DOM

DOM是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

<html>
    <head>
        <meta charset="UTF-8">
        <title>hellow world</title>
    </head>
    <body>
        <div class="div">
            
        </div>
    </body>
</html>

文档节点是每个文档的根节点。在这个例子中，文档节点只有一个根节点，即<html>元素称之为文档元素，每个文档只能有一个文档元素。在HTML页面中，文档元素时钟都是<html>元素。每一段标记都可以通过树中的一个节点表示：HTML元素通过元素节点表示，特性（attribute）通过特性节点表示，文档类型通过文档类型节点表示，而注释则通过注释节点表示。总共有12种节点类型，这些类型都继承自一个基类型。
1.Node类型
javascript中的所有节点类型都继承自Node类型，因此所有类型都共享着相同的基本属性和方法。每个节点都有一个nodeType属性，用于表明节点的类型。要了解节点的具体信息，可以使用nodeName和nodeValue这两个属性。这两个属性的值完全取决于节点的类型，在使用这两个值之前，可以像下面一样检测一下

if(someNode.NodeType == 1){
        value = someNode.nodeName;
        alert(value);
}

2.节点关系。
在HTML中，可以将<body>看成是<html>元素的子元素，每一个节点都有一个childNodes属性，其中保存着一个NodeList对象。这个时候打印出来第一个的Nodename是文本类型，childNodes把第一个空格当做第一个child作为文本类型。（好不靠谱的感觉）

<div id="div">
            <h1>111111</h1>
            <P>1111111</P>
            <P>1111111</P>
            <P>1111111</P>
            <h3>1111111</h3>
        </div>
    </body>
    <script type="text/javascript">
        var oDiv=document.getElementById("div");
        var array=Array.prototype.slice.call(oDiv.childNodes,0);
        for (var i=0;i<array.length;i++) {
            alert(array[i].nodeName)
        }
    </script>

下面列出一些常用的操作节点的方法：

someNode.lastChild
someNode.firstChild
someNode.nextSibling
someNode.previousSibling
someNode.appendChild  //添加至子节点的最后一个节点
someNode.insertBefore(newNode,前一个同胞节点）
//替换第一个节点
someNode.replaceChild(newNode,someNode.firstChild)
//移除第一个节点
someNode.removeChild(someNode.firstChild)

cloneNode()方法
这个方法接收一个布尔值的参数，表示是否执行深复制，深复制也就是复制节点及其整个子节点树，即只复制节点本身，复制后返回的节点副本属于稳当所有，但没有为他制定父节点，除非appendChild()、insertBefore()将它添加到文档中。

<ul id="ul">
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
        <script type="text/javascript">
            var oUl=document.getElementById("ul");
            var deepList=oUl.cloneNode(true);
            alert(deepList.childNodes.length); //3

            var qianList=oUl.cloneNode(false);
            alert(qianList.childNodes.length);  //3
        </script>

推荐阅读更多精彩内容