JavaScript节点操作

1.使用dom.

1.nodeName 返回类型string //节点名称,根据节点的类型而定义;
2.nodeVale 返回类型string //节点的值,同样根据节点的类型而定义;
3.nodeType 返回类型number //节点类型,常量值之一;
4.fistChild 返回类型Node     //指向childNodes列表中第一个节点;
5.lastChild 返回类型Node //指向childnodes列表中的最后一个节点;
6.childNodes 返回类型Nodelist //所有子节点的列表,方法item(I)可以访问第I+1节点;
7.parentNode 返回类型node //指向节点的父节点,如果已是根节点,则返回null;
8.previousSibling 返回类型Node //指向前一个兄弟节点,如果该节点已经是第一个节点,则返回null;
9.nextSibling 返回类型Node //指向后一个兄弟节点,如果该节点已经是第一个节点,则返回null;
10.hasChildNdodes() 返回类型Boolean //当childNodes包含一个或者多个节点时,返回true;
11.attributes 返回类型nameNodemap //包换一个元素特性的Attr对象仅用于元素节点;
12.appendChild(node) 返回类型node //将node节点添加到childnodes的末尾;
13.removeChild(node) 返回类型node //从childnodes中删除node节点;
14.replaceChild(newnode,oldnode)返回类型node //将childnodes中的oldnode节点替换成newnode节点;
15.insertBefore(newnode,oldnode) 返回类型 node //在childNodes中refonde节点之前插入newnode节点;    

---

2.检测节点的类型 .

注:通过nodeType属性可以检测出节点的类型,该属性返回的一个代表节点类型的整数值,总共有12个可取的值:如alert(document.nodeType); 显示值为9,而真正有用的,就三种节点;
    (1).元素节点的nodeType值为1;
    (2).属性节点的nodeType值为2;
    (3).属性节点的nodeType值为3;

3.利用父子兄弟关系查找节点.

childNodes属性来访问元素节点所有包含的文本节点,那么在获取了某个节点之后.可以通过父子关系利用hasChildNodes()方法和childNodes属性获取该节点所包含的所有子节点;

    列子:
                    function mymydom(){
                var ul =document.getElementById("mylist");  //获取<UL>标签
                var DOMstring = "";
                if(ul.hasChildNodes()){     //判断是否有子节点
                    var ch = ul.childNodes;
                    for(var i=0;i<ch.length;i++){   //逐一查询;
                        DOMstring += ch[i].nodeName+"\n";
                    }
                    alert(DOMstring);
                }
            }

                body部分:
                        <ul id="mylist">
                            <li>糖醋排骨</li>
                            <li>泡菜</li>
                            <li>水煮鱼</li>
                            <li>麻婆豆腐</li>
                        </ul>

4.设置节点属性

        1.getAttribute();
        2.setAttribute();  

5.创建和添加节点

        1.首先利用 document.createElement(); 
        在利用createTextNode()方法创建文本节点..并利用appendChild()方法把它添加到DIV 节点的childNodes列表的最后;
                var div = document.createElement("div");  //创建一个DIV;
                var oot =document.createTextNode("天气真好") //创建一个文本节点
                    div.appendChild(oot); //把文本节点放到div里面
                     document.body.appendChild(div);   //在把div放到HTML中;

6.删除节点; removeChild();

    function deleteP(){
        var oP = document.getElementsByTagName("p")[0];
        oP.parentNode.removeChild(oP);  // 删除节点
    }
            body部分:
                <p>这行文字你看不到</p>

7.替换节点; replaceChild();

        window.onload = function(){
        function replaceP(){
            var oldP = document.getElementsByTagName("p")[0];
            var newP = document.createElement("p");//创建新的节点
            var otext = document.createTextNode("德玛西亚");
            newP.appendChild(otext);
            oldP.parentNode.replaceChild(newP,oldP);//替换节点
        }
                replaceP();
    }
        body部分:
            <p>我被替换了</p>;

8.在特定的节点前插入节点; insertBefore();

        window.onload = function(){
        function insertP(){
            var oldP = document.getElementsByTagName("p")[0];
            var newP = document.createElement("p");//创建新的节点
            var otext = document.createTextNode("德玛西亚");
            newP.appendChild(otext);
            oldP.parentNode.insertBefore(newP,oldP);//插入节点
        }
                    insertP();
    }   

                body部分:
                <p>插入到这行之前</p>;

9.在特定的节点插入节点;insertBefore;

        window.onload = function(){
            function insertAfter(newElement,targetElement){
                var oparent = targetElement.parentNode;  //首先找到目标元素的父元素
                if(oparent.lastChild == targetElement){  //判断如果目标元素是最后一个子元素了
                    oparent.appendChild(newElement);    //直接加到子元素的列表最后
                之前}else{                                    
                    oparent.insertBefore(newElement,targetElement.nextElementSibling);
                }                                       //插入到目标元素的下一个兄弟元素
            }
            function inserP(){
                var ooldP = document.getElementById("mytarget");
                var onewP = document.createElement("P");//新建一个节点
                var otext = document.createTextNode("德玛西亚");
                onewP.appendChild(otext);
                insertAfter(onewP,ooldP);//插入节点
            }
            inserP();
        }