Javascript节点对象操作大全

Javascript节点对象操作大全

资深讲师:李强强

微博:http://www.weibo.com/lqqhwei

微刊:http://kan.weibo.com/2573752331/myprofile

1.Node节点对象操作

2.元素节点

3.属性节点

4.文本节点

5.节点的增、删、改和查操作

6.节点的替换

7.节点的克隆

node操作

1.document.getElementById("id");

2.document.getElementsByName("name");

3.document.getElementsByTagName("tagname");

4.document.getElementsByClassName("classname");

5.getAttribute("id");

6.setAttribute("id","div1");

7.removeAttribute("id");

获取元素标签:

1.obj.innerHTML

2.obj.outerHTML

获取元素中的文本:

1.obj.textContent;

node节点操作

1.document节点

2.元素节点

3.属性节点

4.文本节点

节点关系:

1.父子关系

2.兄弟关系

节点属性:

1.节点名称

obj.nodeName

2.节点类型

obj.nodeType

1 元素节点

2 属性节点

3 文本节点

9 文档节点

3.节点值(key=value结构的才有值)

obj.nodeValue

属性节点(节点名称，节点类型=>2，节点值)

文本节点(节点名称，节点类型=>3，节点值)

元素节点(节点名称，节点类型=>1)

文档节点(节点名称=>#document,节点类型=>9)

节点的增、删、改、查(重点)

节点类型

1.元素节点

2.属性节点

3.文本节点

4.文档节点 #document 9 null

节点属性

1.节点名称-nodeName

2.节点类型-nodeType

3.节点值-nodeValue(元素节点没有)

三种节点和属性

1.元素节点

1)nodeName div

2)nodeType 1

3)nodeValue null

2.属性节点

1)nodeName id

2)nodeType 2

3)nodeValue "div1"

3.文本节点

1)nodeName #text

2)nodeType 3

3)nodeValue "aaaaaaaaaaaaa"

查

1.获取元素节点

    1).document.getElementById("id");

    2).document.getElementsByName("name");

    3).document.getElementsByTagName("tagname");

    4).document.getElementsByClassName("classname");

2.获取属性节点

    1)obj.attributes;

    2)obj.getAttribute("id");

3.获取文本节点

    1)var obj=document.getElementById("div1");   

    for(var i=0;i<obj.childNodes.length;i++){

        if(obj.childNodes[i].nodeType==3){

            document.write(obj.childNodes[i].nodeType,"<br>");

        }

    }

    //注意页面上的回车转行也算一个文本节点

4.获取子节点

    1)obj.childNodes;  //获取子节点

5.获取第一个子节点

    1)obj.firstChild;

6.获取最后一个子节点

    1)obj.lastChild;

7.获取父节点

    1)nodeobj.parentNode;

8.获取子元素节点

    1)obj.children;

    //获取元素中的子元素对象，不要文本

9.获取父元素节点

    1)obj.parentElement;

    //和obj.parentNode相同，获取同一个人，是单数

10.获取前一个兄弟元素

    1)obj.previousSibling;

11.获取下一个兄弟元素

    1)obj.nextSibling;

增

1.增加元素节点

    1)var obj=document.getElementById("div1");   

    var obj2=document.createElement("h1");

    obj2.id="hid4";

    obj2.innerHTML="dddddddddddd";

    obj.appendChild(obj2);

    alert(obj.childNodes.length);

    alert(document.body.innerHTML);

    //document.createElement("元素标签");

    //appendChild("追加子节点");

    2)把一个子节点(new)插入到另外一个节点(old)之前，父节点.insertBefore(new,old);

    var oldobj=document.getElementById("div1");   

    var newobj=document.createElement("h1");

    newobj.id="hid4";

    newobj.innerHTML="dddddddddddd";

    oldobj.parentNode.insertBefore(newobj,oldobj);

2.增加属性节点

    1)obj.setAttribute("age","30");

    2)attrobj=document.createAttribute("age");

      attrobj.nodeValue=30;

      obj.setAttributeNode(attrobj);

3.增加文本节点

    1)obj.innerHTML="aaaaaa";

    2)obj.textContent="aaaaaa";

    3)textobj=document.createTextNode("aaaaaaa");

    obj.appendChild(textobj);

    //追加的文本和前面文本不会合并成一个

删

1.删除子节点

parentNode.removeChild(x);

2.删除属性节点

obj.removeAttribute("age")

3.删除文本节点(文本节点属于子节点,与删除子节点方法相同)

parentNode.removeChild(x);

改

1.修改元素节点

//元素本身是需要修改的,比如修改a标签本身是没有意义的，而是修改它身上的属性和里面的文本节点

2.修改属性节点

obj.setAttribute("age",40);

3.修改文本节点

    1)textobj.nodeValue="bbbbbbbbb";

    2)var obj=document.getElementById("hid1").childNodes[0];   

    var str="linux";

    obj.insertData(3,str);

    alert(obj.parentNode.childNodes.length);

替换

1.替换子节点

父节点.replaceChild(newtext,oldtext)

2.替换文本节点

textobj.replaceData(offset,length,str)

克隆

1.复制节点(克隆元素节点和文本节点)

obj.cloneNode();

//默认参数为true,一般情况下把一个节点放到另的地方去，都是移动，而不是复制，除非用cloneNode()方法

obj.cloneNode(false);

//只复制元素空架,没有里面的子节点