Node类型

所有的节点都继承自Node类型,因此所有的节点都具有Node类型的所有属性和方法。

Node类型的属性

1 nodeType:通过nodeType可以确定一个节点属于那一个类型的节点。

                  nodeType的值有两种,一种是用数字表示节点的类型,另一种是用字符常量来表示,因为第二种方法在IE浏览器中不适用,所以全部使用第一种方

                  法来表示。

                  其中nodeType的值为1代表是元素节点,即各种标签

                        nodeType的值为9代表文档节点,即document节点

                        nodeType的值为3代表文本节点,即标签内部的文字

                        nodeType的值为8代表注释节点

                        nodeType的值为10代表documentFragment节点

                        nodeType的值为11代表特性节点,即标签内部的sytle,id,class等特性的节点

举例:<input type="button" value="aaa" id="_2"></input>

        var a=document.getElementsById("_2");

        if(a.nodeType==1)......//a的nodeType的值为true

2 nodeValue和nodeName:不同的节点的这两个属性的值是不同的,document的nodeName就为“#document”而nodeValue为null,

                                       文本节点的nodeName为“#text”,nodeValue为文本节点中文本的值

                                       在后续的文章中,会在具体的节点中进行分别介绍

3 childNodes:这个属性对应一个NodeList类型的对象,表示某个节点的所有子节点

                     可以使用[]或者item()的方法获得某个具体的子节点,length可以获取子节点的个数

                     设定element为某个具有子节点的节点,假设它有三个子节点

                     element.childNodes[0]或者element.iten(0)代表它的第一个子节点,2,3代表第2,第3个子节点

                     element.chileNodes.length 代表子节点的个数,这里等于3

   childNodes虽然和Array有着类似的方法,但是它不是Array类型,是随着节点的不同的操作动态变化的,这一点在NodeList中再进行介绍

   如果想要把childNodes类型转化为Array类型,可以用call()方法来实现

   var ch=Array.prototype.slice.call(element.childNodes,0);

   此时,ch就变成了一个Array类型,同时数组中的内容就是element.chileNodes中的内容

   因为在IE8之前,DOM对象为COM对象,所以在IE8之前不能用js或者DOM的方法,如果想执行上述的操作,必须将二者分开

   即

   

 

parentNode:表示某个节点的父节点
firstNode:表示某个节点的第一个孩子节点
lastNode:表示某个节点的最后一个孩子节点
previousSibling:表示某个节点的上一个同胞节点
nextSibling:表示某个节点的下一个同胞节点

关系图如下

 

 

5 hasChildNodes()方法:返回true或false,某个元素是否有孩子节点

  element代表某个节点

  element.hasChileNodes()

6 ownerDocument

  所有节点的ownerDocument属性都指向文档元素,即html。

  element代表任何一个节点,element.ownerDocument就是html元素,这样可以不用层层寻找,直接跳转到页面顶端

Node类型中的方法

<html>

<body>

<div>

<img></img>

</div>

</body>

</html>

1 appendChild:在父节点的childNodes末尾加入一个节点

var dd=document.getElementsByTagName("div");

var ins=document.createElement("a")//创建了一个a标签

dd[0].appendChild(ins)//这样便把<a>标签插入了div的chileNodes的末尾,相当于在img后面加了一个<a>标签

2 removeChild:移除某个节点的子节点

var dd=document.getElementsByTagName("div");

var ins=document.getElementsByTagName("img")//创建了一个a标签

dd[0].removeChild(ins[0])//将div的子节点img移除

或者dd[0].remove(dd[0].firstChild)

3 insertBefore:将某个节点插入父节点的另一个子节点之前

var dd=document.getElementsByTagName("div");

var ins=document.createElement("a")//创建了一个a标签

dd[0].insertBefore(ins,bb[0].firstChild)//将a插入了img之前

4 replaceChild:用一个新的元素,将其父节点的某个子节点的元素替换掉

var dd=document.getElementsByTagName("div");

var ins=document.createElement("a")//创建了一个a标签

dd[0].replaceChild(ins,bb[0].firstChild)//用a替换了img

5 cloneNode():复制节点(树)

接收一个参数,true或false,如果为true,则复制节点以及它所有的后代节点

                                      如果为false,则只复制这一个节点

var dd=document.getElementsByTagName("div");

 

如果dd.cloneChild(true)则复制的为div节点以及img节点

如果 dd.cloneChild(false)则只复制div节点

var clone=dd .cloneChild(true)//此时clone中存储着整个div的节点树,但只是存储在clone中

如果想与整个html文档发生关联,则需要将clone插入文档中,用appendChild等方法。

 

posted @ 2016-09-20 10:52  shenlong77  阅读(10056)  评论(0编辑  收藏  举报