JAVASCRIPT高级程序设计_9_DOM_节点层次

• 节点的层次结构

　　　　

1. 节点的类型node，都具有nodeType属性。其属性值为1-13的数值。一般来说，somenode.nodeType==1，则表明该节点为元素节点。somenode.nodeType==3，则表明该节点为文本节点。
2. 以上两个节点类型用的比较多一些。
3. nodeValue和nodeName属性返回节点的名称和值。
4. 每个节点都有childNodes属性，该属性保存了一个nodeList对象。这个对象是类数组，动态的，可以通过[ ]来访问childNodes。

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

• 操作节点（都需要通过somenode这个节点对象来调用）

1. appendChild()用于给childNodes的末尾添加一个节点。
2. inserBefore()给childNodes中的特定位置上插入节点。第一个参数是传入的节点，第二个是参照位置。
3. replaceChild()移除childNodes中的节点。第一个参数是要移除的节点，第二个参数是用于替换的节点。

• HTMLDocument的操作

1. 最常见的是getElementById和 getElementsByTagName()。
2. 返回的对象为HTMLCollection[ ] ;
3. 获得到的element具有以下属性：
   • id
   • title
   • lang
   • dir
   • className

　　　　可以直接访问和修改甚至删除。getAttribute() ，setAttribute()， removeAttribute()

            var div=document.getElementById('div');
            //show attribute
            console.log(div.getAttribute('id'))
            //set attribute
            div.setAttribute("id","mydiv");
            console.log(div.id)
            //add attribute and then remove it
            div.color="red";
            console.log(div.getAttribute("color"));//null
            console.log(div.color);//red

　　注意：直接设置属性，是无法成为attribute的。所以只能通过div.color这种方式来访问。

1. document.write()方法可以在页面被呈现的过程中直接向其中输出内容。如果在文档加载结束后再调用document.write()，那么输出的内容将会重写整个页面。

<div id="showTime">
        <p>The current time is: </p>
        <script type="text/javascript">
            function showtime(){
                document.write("<strong>"+new Date().toString()+"<strong>");
            }
            showtime();
        </script>
    </div>

　　2. 遍历元素内所有的属性名和值

    function iterateAttributes(element){
            var pairs=new Array();
            var i;
            var len=element.attributes.length;
            var attrName, attrValue;
            for(i=0;i!=len;i++){
                attrName=element.attributes[i].nodeName;
                attrValue=element.attributes[i].nodeValue;
                pairs.push("name="+attrName+" value="+attrValue);
            }
            return pairs.join(' ');
        }

　　3. 创建元素

　　使用document.creatElement("  ")来创建元素

• text类型

1. 通过childNodes和nodeValue来获得

            var div_2=document.getElementById('div_2');
            console.log(div_2.childNodes[0]);//"DIV 2"
            console.log(div_2.childNodes[0].nodeValue);//DIV 2

• 创建文本节点的方法：

1. 创建一个element
2. 将textNode添加入element
3. 将element添加到body

        //添加文本节点的顺序：
        var element=document.createElement('div_3');//创建一个元素节点
        var textNode=document.createTextNode("Hello A");//创建一个文本节点
        element.appendChild(textNode);//将文本节点嵌入元素节点
        document.body.appendChild(element);//将元素节点嵌入文档树中

　　如果有多个textNode添加到元素节点内部，那么需要通过element.normalize()来规范化，将所有的textNode合并成一个节点。

　　同样，可以通过element.split( n )来分割文本节点，传入n是文本分割的位置。

• 注释节点

1. 性质和文本节点一样

    <div>
        <!-->  comment    </!-->
    </div>