DOM详解

前言

　　DOM（文档对象模型），用来将HTML和XML文档描绘成一个层次化的节点数，允许开发人员添加、删除或修改页面的内容。IE中的DOM对象是通过COM对象的形式实现的，因此IE的DOM对象与JS对象的行为特点并不一致。

节点类型

常见的四个节点类型：Node.ELEMENT_NODE(1)、Node.ATTRIBUTE_NODE(2)、Node.TEXT_NODE(3)、Node.DOCUMENT_NODE(9)。

在IE8-中不能直接访问节点类型名称(Node.ELEMENT_NODE)。在判断节点类型时最好以数字值(1)比较。

<div id="div"></div>
<script>
    console.log(document.getElementById('div').nodeType); // 1
    console.log(document.getElementById('div').nodeType == Node.ELEMENT_NODE); // true IE8-中会报错Node未定义
    console.log(document.getElementById('div').nodeType == 1); // true
</script>

nodeName：

　　元素节点的nodeName是标签名；

　　属性节点的nodeName是属性名；

　　文本节点的nodeName始终是#text；

　　文档节点的nodeName始终是#document。

<div id="div">11</div>
<script>
    console.log(document.getElementById('div').nodeName); // DIV
    console.log(document.getElementById('div').getAttributeNode('id').nodeName); // id
    console.log(document.getElementById('div').childNodes[0].nodeName); // #text
    console.log(document.nodeName); // #document
</script>

nodeValue：

　　文本节点的nodeValue是文本内容；

　　属性节点的nodeValue是属性值；

　　元素节点的nodeValue是null，

　　文档节点的nodeName是null。

<div id="div">11</div>
<script>
    console.log(document.getElementById('div').nodeValue); // null
    console.log(document.getElementById('div').getAttributeNode('id').nodeValue); // div
    console.log(document.getElementById('div').childNodes[0].nodeValue); // 11
    console.log(document.nodeValue); // null
</script>

NOTE：在通过nodeName来检查是否为某元素时最好先检测nodeType等于1。

节点关系

childNodes：

　　childNodes可以动态执行查询结果，当DOM结构变化时能自动反映出来。

　　可以通过方括号或item()方法来访问childNodes中的某个节点。

<div id="div">
    11
    <span>11111111</span>
    22
</div>
<script>
    console.log(document.getElementById('div').childNodes); // 如下图
    console.log(document.getElementById('div').childNodes[1].nodeType); // 1
    console.log(document.getElementById('div').childNodes.item(1).nodeType); // 1
    console.log(document.getElementById('div').childNodes.length); // 3
    document.getElementById('div').innerHTML += '<span>22222222</span>';
    console.log(document.getElementById('div').childNodes.length); // 4
</script>

　　如图所示：后添加一个span也能动态的显示在childNodes中。

parentNode：父节点

previousSibling：上一个兄弟节点（上一个没有就是null）

nextSibling：下一个兄弟节点（下一个没有就是null）

firstChild：第一个子节点(没有子节点为null)

lastChild：最后一个子节点(没有子节点为null)

hasChildNodes：有一个或多个子节点时返回true，比查询childNodes.length更高效。

<div id="div1"></div>
<div id="div2"> </div>
<div id="div3">


</div>
<script>
    console.log(document.getElementById('div1').hasChildNodes()); // false
    console.log(document.getElementById('div2').hasChildNodes()); // true   IE8- false(在IE8-空文本不会当作节点,标准浏览器是节点)
    console.log(document.getElementById('div3').hasChildNodes()); // true   IE8- false(在IE8-空文本不会当作节点,标准浏览器是节点)
</script>

 ownerDocument：该属性指向文档节点。当访问文档节点时可以通过节点的这个属性来查找提升效率。

<div id="div1"></div>
<script>
    console.log(document.getElementById('div1').ownerDocument); // #document
</script>

操作节点

appendChild：在childNodes末尾添加一个节点，返回新增的节点，如果新节点是已有的节点那么该节点的原位置会被删除。

<div id="div">div</div>
<ul id="ul">
    <li id="li1">1</li>
    <li id="li2">2</li>
    <li id="li3">3</li>
</ul>
<script>
    var oLi = document.createElement('li'),
            oUl = document.getElementById('ul'),
            oDiv = document.getElementById('div'),
            oLi1 = document.getElementById('li1');
    oLi.innerHTML = '4';

    console.log(oUl.appendChild(oLi)); // <li>4</li> 返回新增的元素
    console.log(oUl.appendChild(oLi1)); // <li id="li1">1<div id="div">div</div></li> 返回新增的元素  动态显示了div
    console.log(oLi1.appendChild(oDiv)); // <div id="div">div</div> 返回新增的元素  
</script>

最后的DOM结构：

insertBefore：插入节点。返回被插入的节点。如果参照节点为null，insertBefore和appendChild一样。

<ul id="ul">
    <li id="li1">1</li>
    <li id="li2">2</li>
    <li id="li3">3</li>
</ul>
<script>
    var oLi = document.createElement('li'),
            oUl = document.getElementById('ul');
    oLi.innerHTML = '4';

    console.log(oUl.insertBefore(oLi, null)); // <li>4</li> 返回被插入的元素  插入最后
    console.log(oUl.insertBefore(oLi, oUl.firstChild)); // <li>4</li> 返回被插入的元素  插入前面
    console.log(oUl.insertBefore(oLi, oUl.lastChild)); // <li>4</li> 返回被插入的元素  插入最后一个的前面
</script>

replaceChild：替换节点。返回被替换的节点。节点被替换后，该节点还是存在文档中，如果节点不适用了应当将其销毁。

<ul id="ul"><li id="li1">1</li><li id="li2">2</li><li id="li3">3</li></ul>
<script>
    var oLi = document.createElement('li'),
            oUl = document.getElementById('ul');
    oLi.innerHTML = '4';

    console.log(oUl.replaceChild(oLi, oUl.firstChild)); // <li id="li1">1</li> 返回被替换的元素
    console.log(oUl.replaceChild(oLi, oUl.lastChild)); // <li id="li3">3</li> 返回被替换的元素
</script>

 removeChild：删除节点。返回被删除的节点。节点被删除后，该节点还是存在文档中，如果节点不适用了应当将其销毁。

cloneNode：复制节点。可以传递一个boolean值，true深度复制会复制所有的子节点，false浅度赋值不会复制子节点。该方法不能复制通过js添加的属性和事件。

<ul id="ul"><li id="li1">1</li><li id="li2">2</li><li id="li3">3</li></ul>
<script>
    var oUl = document.getElementById('ul');

    console.log(oUl.cloneNode(false)); // <ul id="ul"></ul> 浅度复制
    console.log(oUl.cloneNode(true)); // <ul id="ul"><li id="li1">1</li><li id="li2">2</li><li id="li3">3</li></ul> 深度复制
</script>

<ul id="ul" onclick="alert(1)"><li id="li1">1</li><li id="li2">2</li><li id="li3">3</li></ul>
<script>
    var oUl = document.getElementById('ul');
    oUl.onmouseover = function(){this.style.background = 'red';} // 该事件未被复制

    console.log(oUl.cloneNode(false)); // <ul id="ul"></ul> 浅度复制
    console.log(oUlClone = oUl.cloneNode(true)); // <ul id="ul"><li id="li1">1</li><li id="li2">2</li><li id="li3">3</li></ul> 深度复制

    document.body.appendChild(oUlClone); // onclick事件被复制了
</script>

document类型

1、访问html：document.documentElement、document.firstChild、document.childNodes[0] 其中document.documentElement的效率最高

2、访问body：document.body

3、文档类型：document.doctype(兼容性很差)

4、title属性：document.title

5、URL地址：document.URL

6、域名：document.domain

7、链接到当前页面的页面：document.referrer

    console.log(document.URL); // url
    console.log(document.domain); // 域名
    console.log(document.referrer); // 链接到本页的url

 8、getElementById：根据元素ID获取元素，没有返回null。

　　1、IE8-的id不区分大小写，标准浏览器区分大小写。

　　2、页面多个元素id相同时，返回第一个。

　　3、IE7-中表单元素的name值与某个元素的ID值相同时，如果name在前会返回name对应的表单元素。

<div name="test" class="div1"></div><!-- IE7- div的name不能获取 -->
<input type="button" name="test" class="button1"/>
<div id="test" class="div2"></div>
<script>
    console.log(document.getElementById('test').className); // div2  IE7- button1
</script>

9、getElementsByTagName：获取的元素是动态的，可以通过[index]、[name]、item(index)、namedItem(name)方法来访问某个元素。

<img name="test1">
<img name="test2">
<img name="test3">
<img name="test4">
<script>
    console.log(document.getElementsByTagName('img')[0].name); // test1
    console.log(document.getElementsByTagName('img')['test1'].name); // test1
    console.log(document.getElementsByTagName('img').item(0).name); // test1
    console.log(document.getElementsByTagName('img').namedItem('test1').name); // test1
</script>

 一些集合：

1、document.anchors：返回页面中带有name属性的a元素；

2、document.forms：返回页面中的所有form元素；

3、document.images：返回页面中的所有img元素；

4、document.links：返回页面中所有带href属性的a元素。

元素类型

1、tagName/nodeName：返回元素的标签名（注意返回的值可能是大写也可能是小写）。

2、getAttribute、setAttribute、removeAttribute操作元素的属性

　　①、此时的class就直接用class而不用className

　　②、属性名不区分大小写

　　③、在html5中规定自定义属性名加上data-以便通过验证

　　④、通过getAttribute获取style和事件处理函数返回的是字符串代码，而通过DOM.style和DOM.onclick返回的确是对象和函数

　　⑤、通过DOM.设置的自定义属性值，通过getAttribute来获取只能得到null

<div id="div" style="font-size: 20px;">div</div>
<script>
    var oDiv = document.getElementById('div');
    oDiv.onclick = function(){
        console.log(this.tagName);
    };
    console.log(typeof oDiv.getAttribute('onclick')); // object null（IE7-两种方法返回值一样）
    console.log(typeof oDiv.onclick); // function
    console.log(typeof oDiv.getAttribute('style')); // string （IE7-两种方法返回值一样）
    console.log(typeof oDiv.style); // object
</script>

<div id="div">div</div>
<script>
    var oDiv = document.getElementById('div');
    oDiv.index = 1;
    console.log(oDiv.getAttribute('index')); // null（IE8-两种方法返回值一样）
    console.log(oDiv.index); // 1
</script>

3、removeAttribute：IE6不支持。