一、BOM浏览器对象模型Browser Object Model
1.BOM的功能
a.弹出新的窗口
b.移动、关闭浏览器的功能
c.页面的前进和后退
2.window
a.alert() 弹提示框
b.prompt() 弹输入框
c.confirm() 弹确认框
d.close() 关闭浏览器
e.open(url,名字,宽高,boolean) 打开浏览器
f.setTimeout("回调函数",指定时间) 指定时间后执行一次回调函数
g.setintervel("回调函数",指定时间) 指定时间后 循环执行回调函数
h.clearIntervel()
3.history 可以记录用户访问过的url的信息
a.back() 返回上一个url
b.forward() 前进下一个页面
c.go()
4.location 当前页面url的信息
a.host 返回主机名和端口号
b.hostname 返回主机名或者ip
c.href 返回完整的url
d.reload() 刷新当前页面
e.replace() 替换当前页面
5.document
a.referrer 返回载入当前文档的url
b.URL 返回当前页面的url
二、DOM document object model 文档对象模型
dom-css
dom-html
1.节点
(1).getElementXxxx
(2).根据层级关系
(3).使用节点的属性
a.parentNode 返回当前节点的父节点
b.childNodes 返回子节点集合
c.firstChild 返回第一个子节点
d.lastChild 返回最后一个子节点
e.nextSibling 下一个节点
f.previousSibling 上一个节点
g.element属性(常用)
h.firstElementChild 返回第一个子元素
i.lastElementChild 返回最后一个子元素
j.nextElementSibling 下一个元素
k.previousElementSibling 上一个元素
2.获取节点信息
a.nodeType 1: 标签element 2:元素属性attr 3:文本text 8:注释 9文档document
b.nodeName
c.nodeValue
3.节点的操作
(1).插入或创建节点
a.createElement("标签名"); 创建标签
b.A.appendChild(B); 在A标签内部追加B标签
c.insertBefore(A,B); 把新建的A标签插入到B标签前面
d.cloneNode(boolean); 复制某个节点true 将内容一起复制 false只复制元素
(2).操作节点属性
a.setAttribute("属性名","属性值"); 设置属性
b.getAttribute("属性名"); 获取属性
(3).删除和替换节点
a.removeChild(); 删除节点
b.replaceChild(newNode,oldNode); 替换节点
4.监听浏览器滚动条
(1)document.defaultView.getComputedStyle(adver,null).top); 获取当前元素距离浏览器顶部的距离(top值)
(2)document.documentElement.scrollTop 获取当前浏览器向下滚动的距离
(3)window.onscroll 当浏览器滚动的时候触发该事件
(4)window.onload 当前页面加载完毕之后触发该事件并且只能执行一次
