DOM

DOM是语言中立的API，用于访问和操作HTML和XML文档,DOM1级将HTML和XML文档形象的看做一个层次化的节点树，可以使用JavaScript来操作这个节点树，进而改变底层文档的外观和结构。

当浏览器加载一个Web页面时，它会创建这个页面的模型。这个模型被称为DOM树，它被保存在浏览器的内存中。这个模型由4个主要节点组成。文档节点，元素节点，属性节点和文本节点。当然DOM总共是有12个节点。

<html>
<body>
    <div id="page">
        <h1 id="header">List</h1>
        <h2>Buy groceries</h2>
        <ul>
            <li id="one" class="hot"><em>fresh</em> figs</li>
            <li id="two" class="hot">pine nuts</li>
            <li id="three" class="hot">honey</li>
            <li id="four">balsamic vinegar</li>
        </ul>
        <script src="js/js.js"></script>
    </div>
</body>
</html>

dom树

NodeList

NodeList 对象代表一个有顺序的节点列表。

理解NodeList，是从整体上透彻理解DOM的关键所在。NodeList是“动态的”；换句话说，每当文档结构发生变化时，它们都会得到更新。它们始终都会保持保存着最新、最准确的信息。从本质上说，所有NodeList对象都是在访问DOM文档时实时运行的查询。

var lis = document.getElementsByTagName("li")

lis[0] //<li id="one" class="hot"><em>fresh</em> figs</li>
lis[1] //<li id="two" class="hot">pine nuts</li>
lis[2] //<li id="three" class="hot">honey</li>
lis.item(3) //<li id="four">balsamic vinegar</li>

//以上 变量lis 就是一个NodeList集，可以加[]访问或者使用item()方法

用途

访问和修改元素
添加或移除HTML内容
创建或修改属性

总结

最基本的节点类型是Node，用于抽象的表示文档中的一个独立的部分；所有其他类型都继承自Node。
Document类型代表整个文档，是一组分层节点的根节点。在JavaScript中，document对象是Document的一个实例。使用document对象，有很多种方式可以查询和取得节点。
Element节点表示文档中所有HTML和XML元素，可以用来操作这些元素内容和特性。

理解DOM的关键，就是理解DOM对性能的影响。DOM操作往往是 JavaScript 程序中开销最大的部分，而访问NodeList导致的问题最多。NodeList对象都是“动态的”，这就意味着每次访问NodeList对象，都会运行一次查询。所以最好的办法就是尽量减少DOM操作。

Document 类型

查找元素

getElementById()  
//接受一个参数，要取得的元素ID
getElementsByTagName() 
//接受一个参数，要取得的元素标签名

文档写入

write()
//接受一个参数，即写入输入流的文本，可以输出text或html
writeln()
//同上，但是会在字符串末尾添加一个换行符(/n)
open(),close()
//分别用于打开和关闭网页的输出流

Element 类型

取得，设置特性

getAttribute()
//接受一个参数，即元素属性，输出元素属性的值
setAttribute()
//接受两个参数，要设置的特性名和值，如果特性存在则修改，如果不存在则创建该特性并设置相应的值
removeAttribute()
//接受一个参数，用于彻底删除元素特性

attributes 类型

grtNamedItem()
//返回属性 等于参数 的节点
removeNamedItem()
//从列表中移除属性 等于参数 的节点
setNamedItem()
//向元素添加指定的属性节点

创建元素

createElement()
//接受一个要创建的元素标签名

DOM扩展

CSS选择符API

querySelector()
//接受一个css选择符，返回与该模式匹配的第一个元素，如果没有找到，返回null。
querySelectorALL()
//同上，但返回的是所有匹配的元素。这个方法是一个NodeList的实例。
matchesSelector()
//接受css选择符。如果调用元素与该选择符匹配，返回true，反之false。

HTML

getElementsByClassName()
//接受一个元素类名，返回指定类的所有元素NodeList。

classList 属性

classList 属性返回元素的类名，作为 DOMTokenList 对象。
该属性用于在元素中添加，移除及切换 CSS 类。
classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

add()//在元素中添加一个或多个类名,如果指定的类名已存在，则不会添加。
contains()//返回布尔值，判断指定的类名是否存在。 
remove()//移除元素中一个或多个类名。
toggle()//如果列表中已存在给定的值，删除它；没有则添加它。

焦点管理

activeElement
//这个属性始终引用DOM中当前获得焦点的元素。

插入标记

innerHTML

在读模式下，innerHTML属性返回与调用元素的所有子节点对应的HTML标记。在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有节点。

使用innerHTML属性也有限制，比如，在大多数浏览器中，通过innerHTML插入<script>元素并不会执行脚本，因为<script>元素必须位于“有作用域的元素”之后。如下即可正常运行：

div.innerHTML = "<input type= \"hidden\"><script defer>alert('hi');<\/script>"

无论什么时候，只要使用innerHTML从外部插入HTML，都应该首先使用可靠的方式处理HTML。IE8为此提供了window.toStaticHTML()方法，这个方法接受一个HTML字符串；返回一个无害的处理版本。

outerHTML

与innerHTML几乎相同，但是会返回调用元素。

insertAdjacentHTML()

此方法接受两个参数：插入位置和要插入的HTML文本。第一个参数必须是下列值之一：

"beforebegin",作为前一个同辈元素插入
"afterbegin",作为第一个子元素插入
"beforeend",作为最后一个子元素插入
"afterend",作为后一个同辈元素插入

内存与性能问题

innerHTML不要应用于循环中，因为这样会导致多次设置。最好的做法是单独构建字符串，然后再一次性的赋值。

专有扩展

children 属性
children 属性返回元素的子元素的集合

children 属性与 childNodes 属性的差别：
childNodes 属性返回所有的节点，包括文本节点、注释节点；
children 属性只返回元素节点；

contains()
接受一个节点，返回的是一个布尔值，来表示传入的节点是否为该节点的后代节点

compareDocumentPosition()也能确定节点关系。这个方法返回一个表示该关系的掩码。

掩码	节点关系
1	无关 (给定的节点不在当前文档中)
2	居前 (给定的节点在DOM树位于参考节点之前)
4	居后 (给定的节点在DOM树位于参考节点之后)
8	包含 (给定的节点是参考节点的祖先)
16	被包含 (给定的节点是参考节点的后代)

// 如果既是‘居后’也是‘被包含’结果则是20

插入文本

innerText

通过innerText属性可以操作元素中包含的所有文本内容

DOM2级和3级

DOM1级主要定义的是HTML和XML文档的底层结构。DOM2和DOM3级则在这个结构的基础上引入了更多的交互能力，也支持了更高级的XML特性。

DOM2 级核心：在1 级核心基础上构建，为节点添加了更多方法和属性。
DOM2 级视图：为文档定义了基于样式信息的不同视图。
DOM2 级事件：说明了如何使用事件与DOM文档交互。
DOM2 级样式：定义了如何以编程方式来访问和改变CSS样式信息。
DOM2 级遍历和范围：引入了遍历DOM文档和选择其特定部分的新接口。
DOM2 级 HTML：在1 级HTML基础上构建，添加了更多属性、方法和新接口。

样式

访问元素的样式

任何支持style特性的HTML元素在JavaScript中都有一个对应的style属性。这个style对象是CSSStyleDeclaration的实例，包含着通过HTML的style特性(属性)指定的所有样式信息，会直接修改和添加在HTML元素中，不能直接修改css外部样式表。

在style特性中指定的任何CSS属性都将表现为这个style对象的相应属性。对于有着短划线的属性需要使用驼峰大小写。
由于float和class是JavaScript中的保留字，因此不能用作属性名。“DOM2 级样式”规范规定样式对象上相应的属性名分别是cssFloat和className，float在IE中则是styleFloat。

<div id="myDiv" style="width:100px;height:100px">方块</div>

var myDiv = document.getElementById("myDiv");
//设置背景颜色
myDiv.style.backgroundColor = "#fff";
//在div中添加"background-color:#fff"
//<div id="myDiv" style="width:100px;height:100px;background-color:#fff">方块</div>

事件

JavaScript与HTML之间的交互是通过事件实现的，是将JavaScript与网页联系在一起的主要方式。

事件流

事件流描述的是从页面接收事件的顺序，因开发团队不同分为冒泡流和捕获流。

事件处理程序

HTML事件处理程序

<div id="myDiv" style="width:100px;height:100px" onclick="myDiv()">方块</div>

<script>
    function myDiv(){
        alert("Hello world!")
    }
</script>
//点击input触发dome函数

DOM0级事件处理程序

var myDiv = document.getElementById("myDiv");

myDiv.onclick = function(){
    alert("Hello world!")
};

DOM2级事件处理程序

dom定义了两个方法，addEventListener()和removeEventListener(),所有dom节点都包含这两个方法，并都接受三个参数：要处理的事件名,事件处理程序的函数和一个布尔值。最后一个布尔值是true则表示捕获阶段调用事件处理程序，反之是冒泡阶段。

var myDiv = document.getElementById("myDiv");

myDiv.addEventListener("click",function(){
    alert("Hello world!")
},true)

addEventListener() 方法用于向指定元素添加事件句柄。
removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件句柄。

跨浏览器的事件处理程序

跨浏览器需要封装以下代码：

var EventUtil = {

    addHandler:function (element,type,handler) {
         if(element.addEventListener){
             element.addEventListener(type, handler,false);
         } else if (element.attachEvent) {
             element.attachEvent("on" + type,handler);
         }else {
             element["on" + type] = handler;
         }
    },

    removeHandler:function (element,type,handler) {
         if (element.removeEventListener) {
             element.removeEventListener(type, handler,false);
         } else if (element.detachEvent) {
             element.detachEvent("on" + type,handler);
         }else {
             element["on" + type] = null;
         }
    }
};
var dome = function(){
    alert("Hello world!")
}

EventUtil.addHandler1(myDiv,"click",dome);
EventUtil.removeHandler(myDiv,"click",dome);

事件对象

在触发DOM上的某个事件的时候,会产生Event对象,这个对象包含着所有与事件有关的信息。

内存和性能

注意限制一个页面中的事件处理程序的数量，数量太多会导致占用大量内存，而且会让用户感觉页面反应不灵敏。
建立在事件冒泡机制之上的事件委托技术，可以有效减少事件处理程序的数量。