蓝旭工作室第五周预习：DOM+BOM

一、DOM（document object model）

DOM是W3C的标准，是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容，结构和样式。对网页进行增删改查的操作。

常用DOM操作有：查找节点，读取节点信息，修改节点信息，创建新节点，删除节点。

1、DOM查找

• 按id属性，精确地查找一个元素对象

var elem = document.getElementById("id值");

        getElementById只能用在document上。

        只用于精确查找一个元素，效率非常高。 

• 按标签名，查找指定parent节点下的子代节点

var elems = parent.getElementByTagName("tag名");

        可用在任意父元素上。

        不仅查直接子节点，而且查所有子代节点。

        返回一个动态集合（即使只找到一个元素）。

        必须用[]运算符，取出唯一元素。 

• 通过name属性查找

var elems = document.getElementByName("name值");

        可以返回DOM树中具有指定那么属性值的所有子元素集合。

• 通过class查找

var elems = parent.getElementByClassName("class值");

        查找父元素下指定class属性的元素。 

• 通过CSS选择器查找

只找一个元素：

var elem = parent.querySelector("selector");

        selector支持一切css中的选择器。

        如果选择器匹配的有多个，只返回第一个。

找多个元素：

var elems = parent.querySelectorAll("selector");

        返回非动态集合。

2、DOM修改

DOM标准：

        核心DOM：可操作一切结构化文档的API，万能但繁琐。

        HTML DOM：专门操作HTML文档简化版DOM API。

核心DOM4种操作修改属性

• 读取属性值

先获得属性节点对象，再获得节点对象的值。

var attrNode = elem.attributes[下标/属性名];
var attrNode = elem.getAttributeNode(属性名);

attrNode.value;

 直接获得属性值。

var value = elem.getAttribute("属性名");

• 修改属性值

elem.setAttribute("属性名",value);

• 判断是否包含指定属性

var bool = elem.hasAttribute("属性名");

• 移除属性

elem.remoteAttribute("属性名");

修改样式

elem.style.属性名;

        注：属性名要“去横线，变驼峰”。如background-color变为backgroundColor。 

3、DOM添加

添加元素的步骤

• 创建空元素

var elem = document.createElement("元素名");

• 设置关键属性和样式

元素.属性名 = "值";    //设置属性
元素.style.属性名 = "值";    //设置样式
元素.style.cssText = "多个属性及值";    //设置样式

• 将元素添加到DOM树中

parentNode.appendChile(childNode);    //为一个父元素追加一个子节点
parentNode.insertBefore(newChild,existingChild);    //在父元素指定子节点之前添加新的子节点

添加元素优化——尽量少地操作DOM树

• 如果同时创建父元素和子元素，在内存中先将子元素添加到父元素，再将父元素一次性挂到页面。
• 如果只添加多个平级子元素，将所有子元素临时添加到文档片段，再将文档片段整体添加到页面。

        文档片段——临时保存多个平级子元素的虚拟父元素

var frag = document.createDocumentFragment();    //创建虚拟片段
frag.arrendChild(child);    //将子元素临时追加到frag中
parent.appendChild(frag);    //将frag追加到页面

        追加之后，frag自动释放，不会占用元素。

二、BOM（Browser Object Model）

专门操作浏览器窗口的API——没有标准，有兼容性问题。

1、浏览器对象模型

window	代表整个窗口
history	封装当前窗口打开后，成功访问过的记录
navigator	封装浏览器配置信息
document	封装当前正在加载的网页内容
location	封装当前窗口正在打开的URL地址
screen	封装了屏幕的信息
event	定义了网页中的事件机制

2、获取当前窗口大小

window.outerWidth/outerHeight;    //获取完整窗口大小
window.innerWidth/innerHeight;    //获取文档显示区大小

3、定时器

        让程序按指定时间间隔自动执行任务，如网页动态效果、计时功能等。

• 周期性定时器

        让程序按指定时间间隔反复自动执行一项任务。

setInterval(exp,time);

        exp：执行的语句；time：时间间隔，单位为毫秒。

        停止计时器 

var timer = setInterval();    //先给定时器取名
clearInterval(timer);    //再停止计时器

• 一次性定时器

        让程序延迟一段时间执行。 

setTimeout(exp,time);