《JavaScript高级程序设计 第三版》学习笔记 （十）DOM详解

一、节点

1.节点层次

（1）节点是浏览器中的基础类型，所有DOM对象都是特殊的节点，继承自node，可以使用节点自带的方法。
（2）可以通过somenode.childNodes[0];somenode.childNodes.item(0);somenode.firstChild;somenode.lastChild迭代当前节点的子节点。
（3）可以通过somenode.parentNode获取当前节点的父节点。
（4）可以通过somenode.appendChild(anothernode);somenode.insertBefore(anothernode,somenode.firstChild);somenode.replaceChild(another,somenode.firstChild)添加和替换子节点。
（5）可以通过somenode.removeChild(somenode.firstChild)删除节点。

2.document类型

（1）document是一个特殊的node，是window的一个属性，可以在全局直接访问。
（2）可以通过document.documentElement;document.childNodes[0];document.firstChild获取html元素的引用，第一种效率最高。
（3）可以通过document.body获取body元素引用，这个最常用。
（4）可以通过document.title获取和设置页面的标题，这个设置不影响<title>标签。
（5）可以通过document.domain设置当前页面所在的域。当页面中存在多个frame/iframe，并且这些框架中的页面在不同域时，通过js是无法直接完成跨域页面通信的。如果把每个页面的document.domain设置成相同的值，这些页面就能相互访问对方包含的javascript对象了。
（6）可以通过document.getElementById;documment.getElementsByTagName;document.getElementsByName获取到html元素的引用。非常常用。
（7）可以通过document.anchors;document.applets;document.forms;document.images;document.links等特殊集合直接访问html元素。
（8）可以通过document.write;document.writeln动态写入文档流。

3.element类型

（1）直接把element理解为html元素也没有问题。因为element广泛的应用，就是提供了一组操作html标签的API。
（2）可以通过element.arrtName获取或设置html元素的某个属性值。如div.id=1;img.src="1.jpg";table.className="class1"。
（3）可以通过element.getAttribute("attrName");element.setAttribute("attrName",value);element.removeAttribute("attrName")设置、修改或删除html元素的属性。getAttribute返回的是某个属性的值，如果用这个方法去访问style或者onclick之类的属性，得到的都是字符串，而不是对象或函数。
（4）可以通过document.createElement("div"/"<div id='mydiv'>");的形式创建element。

二、DOM操作

1.动态脚本

（1）动态脚本指的是不在head写script标签载入js文件，而是通过创建element并添加的方法把外部js引入。
（2）引入动态脚本的难点在于，怎样确定脚本已经加载完毕可以使用了。我们将在以后的内容详细展开，这里只给出一个简单的例子。

[javascript] view plain copy

1. //小实验  
2. var script=document.createElement("script");  
3. script.type="text/javascript";  
4. script.src="demo.js";  
5. document.body.appendChild(script);  

2.动态样式

（1）动态脚本是引入js文件，那css文件能动态加载么？答案是肯定的。
（2）样式的载入本来就是异步的，因此动态载入样式有个好处就是不用太关心啥时候完成。

[javascript] view plain copy

1. //小实验  
2. var link=document.createElement("link");  
3. link.rel="stylesheet";  
4. link.type="text/css";  
5. link.href="style.css";  
6. document.getElementsByTagName("head")[0].appendChild(link);  

三、DOM扩展

1.选择器

　　用原生的getElementById和getElementsByTagName选取往往比较麻烦，扩展性也不好。因此有很多js库写了自己的选择器。W3C制定了一个选择器标准，要求所有实现此类功能的js库，都完成一个或使用已经存在的选择器，选择器使用CSS筛选器语法，开发人员都会尽可能提高自己的选择器的性能，从而提高js库的执行效率。目前实现最好的是jQuery的sizzle引擎。

2.HTML5

（1）HTML5定义DOM的同时，为js提出了很多新的API。
（2）document.getElementsByClassName()，根据class内容筛选出html元素；
（3）element.classlist，定义了一套操作class的api，如element.classlist.add/remove/toggle/contains。
（4）document.activeElement，保存当前具有焦点的element。element.hasFocus()，返回当前元素时候含有焦点。
（5）document.readyStated，表示页面是loading还是complete，目前所有浏览器都支持。
（6）document.charset，获取或设置页面渲染的字符集。
（7）自定义数据属性集data-。自定义字符集的好处是不必利用getAttribute去获取某个自定义属性，而是直接通过element.dataset.myAttr操作。当然，这要求html标签中，属性的前缀是data-。
（8）scrollIntoView()，允许控制滚动条滚动，以显示某个元素。element.scrollIntoView()。传入true或NULL，让元素顶部与窗口顶部对齐；传入false，让元素尽可能多的显示在页面中，类似与垂直居中。

四、专业扩展

　　浏览器厂商都根据自己的喜好在标准之外添加着一些扩展功能。基本上这些功能是不通用的，但以后说不定会成为标准。比如element.children，是IE为了去除页面空白字符弄出来的，如果没有空白字符，这个和childNodes是完全一样的。还有contains，判断一个节点是不是另一个节点的祖先（注意不止是父亲），if (parentNode.contains(childNode))。另外还有几个控制滚动条的方法，这里不再赘述。

五、DOM2和DOM3

1.以上都是DOM1，而DOM2和DOM3的目的在于扩展DOM API，以满足操作XML的所有需求，同时提供更好的错误处理及特性检测能力。DOM2没有在DOM1基础上引入新类型，只是增加了新方法和新属性；DOM3同样增强了已有类型，但也引入了一些新类型。
2.js修改样式style的功能是DOM2才加入的。同时DOM2又增加了操作styleSheet的API。
3.DOM2级定义了createRange()方法，定义一个选中的范围。