BOM&DOM

1.1 介绍

 browser object model ：浏览器对象模型，ECMAScript 规范规定，用于描述浏览器行为。提供对象进行相应操作。

 学习：window、history、location
window：表示窗体
history：浏览记录
location：当前访问路径
screen：浏览器屏（了解）
navigator 浏览器特性（了解）
1.2 window 窗体
 每一个html对应一个window对象。
frameset 框架

1.2.1 window集合
 提供frames[] 数组获得所有的框架
1.2.2 window属性
 导航定位
self ：当前操作窗口
parent：当前的父窗口
top：所有的顶级窗口

 bom其他对象引用
例如：history引用，window.history
 opener 确定有谁打开当前页面，在子窗口获得父窗口
A.html 打开 B.html ,此时在B.opener 获得就是A的window对象。
1.2.3 window 方法
1.2.3.1 打开窗口
 open方式
格式：window.open(URL,name,features,replace)
URL：确定打开路径
name：一般没有，设置以什么方式打开。如果不写，默认：_blank

	features : 用于确定新窗口特性，例如：大小，是否有地址栏等
		大部分值不同的浏览器实现不同，常用：height、width等
		注意：多个值之间使用逗号分隔，每一个值格式：k=v
	replace : 打开新窗口是否替换历史记录，一般没用。

1.2.3.2 消息框
警告框：window.alert(“内容”); 提供确定按钮
提示框：window.confirm(“内容”) 提供 确定 和 取消按钮
点击确定，返回值：true
点击却小，返回值：false
确定框：window.prompt(“内容”,“默认”) 提供 确定 、 取消 和 文本框进行输入
确认 返回值：输入值
取消，返回值：null
1.2.3.3 指定时间执行 Timing
setInterval 指定js函数，按照指定时间，循环执行。
格式：setInterval(函数,时间)
函数：两种写法，函数名，“函数名()”
时间：单位毫秒
clearInterval 将setInterval开启定时器关闭。
格式：clearInterval(对象)

setTimeout 在执行时间，延迟执行一次js函数。
clearTimeout 停止setTimeout生成定时器。

1.3 history历史
 History 对象包含用户（在浏览器窗口中）访问过的 URL。

 length 属性：表示历史记录个数。
back() 回退 左边按钮
forward() 前进 右边按钮
go(number | url) 跳到指定的位置
-1 等效于back()
1 等效于forward()
1.4 Location
 Location 对象包含有关当前 URL 的信息。
1.4.1 属性
 URL路径： http://www.itheima.com:80/a/b/c/demo.html?username=jack&password=1234
hash 设置或返回从井号 (#) 开始的 URL（锚）。(了解)
index.html#xxx 获得xxx
host 设置或返回主机名和当前 URL 的端口号。
www.itheima.com:80
hostname 设置或返回当前 URL 的主机名。
www.itheima.com
pathname 设置或返回当前 URL 的路径部分。
/a/b/c/demo.html
port 设置或返回当前 URL 的端口号。
80
protocol 设置或返回当前 URL 的协议。
http
search 设置或返回从问号 (?) 开始的 URL（查询部分）。
username=jack&password=1234

href 设置或返回完整的 URL。
location.href= …; 指定请求路径

1.4.2 方法
assign() 加载新的文档。 将打开新的页面，历史记录也是新。
replace() 用新的文档替换当前文档。将打开新的页面，历史记录将被覆盖。
reload() 重新加载当前文档。 （刷新）

2 DOM

2.1 介绍
 DOM：Document object Model 文档对象模型，用于修改文档（及可以对文档中内容进行CRUD）
文档：结构化文档。例如：html、xml等
 DOM规范：html dom、xml dom等

 之后的操作，将html页面加载内容（浏览器），浏览器将整个文档生成一个对象 document，将采用DOM树方式对html内容进行展现。
2.2 document获取
 获取方式：window.document ，浏览器将文档加载成功之后，自动生成dom树，并将封装好的对象赋值给window.document
 window 对象属性，可以直接访问，及document. 操作
2.3 Element获取
document.getElementById(“id属性的值”) ， 通过标签id属性值 获得 元素
id属性值，必须在整个文档唯一的。
document.getElementsByName(“name属性值”) 通过标签name属性获得元素们
name属性值可以重复的。


document.getElementsByClassName(“class 属性值”) 通过标签class属性获得元素们
document.getElementsByTagName(“标签名称”) 通过标签名获得 元素们
2.4 Element方法
appendChild() 指定的元素内追加
insertBefore() 指定的元素前追加
elementNode.insertBefore(new_node,existing_node)
new_node 当前新创建element
existing_node 谁之前（已经存在）
removeChild() 删除指定的元素
elementNode.removeChild(node) 父亲吧孩子删除掉。
elementNode 必须是父元素
node 子元素
通过孩子如何父元素
childElement.parent.removeChild(childElement)
childElement.remove(); 不合理 自杀

3 计算器案例分析

1.提供 input type=“text” 显示数据
2.提供 input type=“button” 点击获得数据（0-9 、 ±*/ ±）
通过onclick 点击时 获得数据 提供 getNumber(9)
提供两个变量记录 有操作符的前
例如： 123 + 456
firstNum 记录123
secondNum 456
operator 记录操作内容，及符号（字符串） + - … ， 记录上一次操作
3.每一次点击操作的时候，需要考虑是否需要计算
例如： 123 + 456 ，使用eval函数，将字符串表达式进行计算。eval(“12+12”) 结果24
4.如果是± 不能计算，只修改的第二个记录数的前面的符号
例如： 123 + 456 ，点击± ， 123 + -456
表示其他符号操作

5. 通过 运算符 （+ - * / 。。。） 进行处理，不同的运算符 处理方法不同

   计算器整体思想： 用户可以看到计算过程 ，程序需要记录操作（进行计算）

6. 文本框只需要获得一次，之后进行操作

   页面加载成功触发函数