（第六天）DOM

概念

文档对象模型（DOM）是表示和操作HTML和XML文档内容的基础API。

选取文档元素

（1）通过ID选取元素

var id = document.getElementById("section1");
 
<input type="text" id="section1" value="">

【注】在低于IE8版本的浏览器中，getElementById()对于匹配元素的ID不区分大小写，而且也返回匹配name属性的元素。

（2）通过名字选取元素

HTML的name属性最初打算为表单元素分配名字，在表单数据提交到服务器时使用该 属性的值。类似id属性，name是给元素分配名字，但是区别于id，name属性的值不是必须唯一：多个元素可能有同样的名字，在表单中，单选和复选框按钮通常是这种情况。而且，和id不一样的是name属性只在少数HTML元素中有效，包括表单、表单元素、<iframe>和<img>元素。

基于name属性的值选取HTML元素，可以使用Document对象的getElementsByName()方法。

var arr = document.getElementsByName("fav_color");  //通过name，返回一个HTMLElement集合
 
<input type="text" name="fav_color" />

【注】getElementsByName()定义在HTMLDocument类中，而不在Document类中，所以它只针对HTML文档可用，在XML文档中不可用。它返回一个NodeList对象，后者的行为类似一个包含若干个Element对象的只读数组。通过实践证明在IE9以及IE9以下，getElementsByName()也返回id属性匹配指定值的元素。为了兼容，应该小心谨慎，不要将同样的字符串同时用做name和id。

（3）通过标签名获取元素

Document对象的getElementByTagName()方法可用来选取指定类型（标签名）的所有HTML或XML元素。例如在文档中获得包含所有<span>元素的只读的类数组对象。

var spans = document.getElementsByTagName("span");
 
<span></span>

（4）通过CSS选择器选取元素

#warning  /*通过id*/
 
.warning  /*通过class*/
 
input       /*所有input元素*/
 
<input type='text" class="warning"  id="warning" value="">

（5）document.all[]

在DOM标准化之前，IE 4引入了document.all[]集合来表示所有文档中的元素（除了Text节点）。document.all[]方法已经被标准的方法（如getElementById()和getElementsByTagName()）等所取代，现在已经废弃不应该再使用。

文档的节点树

Document对象、它的Element对象和文档中表示文本的Text对象都是Node对象。Node定义了以下重要的属性：

（1）parentNode

该节点的父节点，或者针对类似Document对象应该是null，因为它没有父节点。【获取当前元素的父节点】

（2）childNodes

只读的类数组对象（NodeList对象），它是该节点的子节点的实时表示【返回指定节点的所有子节点】

（3）firstChild、lastChild

该节点的子节点中第一个和最后一个，如果该节点没有子节点则为null【获取当前节点的第一个（childNodes[0]）或最后一个节点 (childNodes[length-1])】

（4）nextSibling

该节点的下一个节点：得到下一个元素【这个元素的类型可以包含空文本节点】

（5）previoursSibling

获取当前节点的上一个节点【nextElementSibling只能得到元素结点】

节点

（1）nodeType【节点类型】

• Element（元素即指标签）   <span></span>                                                 用1表示
• Attr（属性）                    <span color="red"></span                                 用2表示
• Text（文本）                   <span>this is a simple document</span>              用3表示
• Comments（注释）          <!-- this is a comments-->                               用8表示
• Document（文档）           alert(window.document.nodeType);                      用9表示

（2）nodeName【节点名称】

返回的结果都是大写， 文本的nodeName是#text，注释的nodeName是#comment

（3）nodeValue【节点值】

只对文本节点和注释有用,对于标签没有作用

创建、插入和删除节点

（1）创建Element元素节点

var element = document.createElement("span");

（2）插入节点

appendChild()和insertBefore()方法

var list = document.getElementById("list");
 
var li = document.createElement("li");
 
li.appendChild(li);   /*将创建的元素li添加到父元素list中*/
 
list.insertBefore(li, list.childNodes[]); /*插入到list.chldNodes[3]前面*/  在元素内部指定节点插入子节点
 
<ul id = "list"></ul>

【注】在给标签赋值时如果是双标签即如<span></span>则其赋值用innerHTML或者innerText，否则如单标签如<input type="text" />则赋值为value

（3）删除和替换节点

removeChild()方法是从文档树中删除一个节点。但是请放心：该方法不是在待删除的节点上调用，而是在其父节点上调用。在父节点上调用该方法，并将需要删除的子节点作为方法参数传递给它。在文档中删除n节点，代码你可以这样写：

n.parentNode.removeChild(n);

replaceChild()方法删除一个子节点并用一个新的节点取而代之。在父节点上调用该方法，第一个参数是新节点，第二个参数是需要代替的节点。例如

n.parentNode.replaceChild(document.createElement("span"),n);

作为元素树的文档

当将主要的兴趣点集中在文档的元素上而非它们之间的 文本（或者是空文本）  上时，这个时候我们将文档看做是Element对象树，忽略部分文档： Text和Comment节点  。【注】Text和Comment节点没有children属性，它意味着上述Node.parentNode属性不可能返回Text或Comment节点。任何Element的parentNode总是另外一个Element，或者，追溯到树根的Document或DocumentFragment节点。其对应的基于元素属性的节点有：

 firstElementChild，lastElementChild
 
        /*类似firstChild和lastChild，但只代表Element*/
 
 nextElementSibling，previousElementSibling
 
      /*类似nextSibling和previousSibling，但只代表Element*/
 
 childElementCount
 
    /*子元素的数量。返回的值和children.length值相等*/

使用DocumentFragment

DocumentFragment是一种特殊的Node，它作为其他节点的一个临时容器。像这样创建一个DocumentFragment:

var frag = document.createDocumentFragment();

DocumentFragment是独立的，而不是任何其他文档的一部分。它的parentNode总是为null，但类似Element，它可以有任意多的子节点，可以用appendChild()、insertBefore()等方法来操作它们。

它的特殊之处在于它使得一组节点被当做一个节点看待：如果给appendChild()、insertBefore()或replaceChild()传递一个DocumentFragement，其实是将该文档片段的所有子节点插入到文档中，而非片段本身。由于javascript在操作DOM时都会重新加载整个文档的DOM，为了减少DOM操作可以在操作DOM(为其添加或删除属性时)可以将DOM放入DocumentFragment中，最后一次性操作文档碎片,DocumentFragment可以相当于缓冲区，当需要更新大量的DOM节点时，页面会进行大量的渲染，这样将大大的降低了性能，为此可以用DocumentFragment将所有渲染的节点放入内存中，最后进行一次性渲染，这样既可减轻浏览器的负担也可提高页面渲染的速度。

以下函数使用DocumentFragment来倒序排列一个节点的子节点：

/*加载DOM树调用函数进行逆序输出*/
window.onload = function() {
    reverse(document.getElementById("list"));
}
 
function reverse(n){
 
/*创建一个DocumentFragment作为临时容器*/
 
var f = document.createDocumentFragment();
 
/*从后至前循环子节点，将每一子节点移动到文档片段中。n的最后一个节点变成f的第一节点，反之亦安然。注意，给f添加一节点，该节点自动地会从n中删除*/
 
while(n.lastChild)  f.appendChild(n.lastChild);
 
/*最后，把所有得子节点一次性全部移回n中*/
 
n.appendChild(f);
 
}
 
<ul id = "list">
    <li><span><a href = "#"></a></span></li>
    <li><span><a href = "#"></a></span></li>
    <li><span><a href = "#"></a></span></li>
    <li><span><a href = "#"></a></span></li>
    <li><span><a href = "#"></a></span></li>
    <li><span><a href = "#"></a></span></li>
</ul>