【DOM】Node类型

2017-11-16  本文已影响0人  Wonder233

DOM1级定义了一个Node接口，该接口由DOM中的所有节点类型实现。这个Node接口在JavaScript中作为Node类型实现的；除了IE之外，其他所有浏览器中都可以访问这个类型。

JavaScript中所有的节点类型都继承自Node类型，因此所有节点类型都共享着相同的基本属性和方法。
每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在Node类型中定义的下列12个数值常量来表示：

通过比较上面这些常量，可以很容易的确定节点的类型：

if (someNode.nodeType == Node.ELEMENT_NODE){//IE中无效
    alert("Node is an element");
}

if (someNode.nodeType == 1){//适用于所有浏览器
    alert("Node is an element");
}

开发人员最常用的是元素和文本节点。

nodeName和nodeValue属性

用途：了解节点的具体信息。对于元素节点，nodeName中保存的始终都是元素的标签名，而nodeValue的之则始终为null。

使用这两个值以前，最好是先检测一下节点的类型
if(someNode.nodeType == 1){ value = someNode.nodeName; }

节点关系

在HTML中，可以将<body>元素看成是<html>元素的子元素；相应的，<html>元素是<body>元素的父元素。而<head>元素，则可以看成是<body>元素的同胞元素。

1、childNodes属性

每个节点都有childNodes属性，其中保存着一个NodeList对象。
NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点。

注意：虽然可以通过方括号语法来访问NodeList的值，而且这个对象也有length属性，但它并不是Array的实例。
　　　NodeList对象实际上是基于DOM结构动态执行查询结果，因此DOM结构的变化能够自动反应在NodeList对象中。

可以通过方括号，也可以使用item()方法来访问保存在NodeLIst中的节点。

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.items(1);
var count = someNode.childNodes.length;
//length属性表示访问NodeList那一刻，其中包含的节点数量。

可以将NodeList对象转换为数组：

//IE8及之前版本无效
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

因为IE8及更早版本将NodeList实现为一个COM对象，所以上面的代码会导致错误。要在IE中将NodeList转换为数组，必须手动枚举所有成员：

//所有浏览器中都可以运行
function convertToArray(nodes){
    var array = null;
    try{
        array = Array.prototype.slice.call(nodes,0); //针对非IE浏览器
    }catch(ex){
        array = new Array();
        for(var i= 0,len=nodes.length;i<len;i++){
            array.push(nodes[i]);
        }
    }
    return array;
}

2、parentNode属性

1、每个节点都有一个parentNode属性，该属性指向文档树中的父节点。
2、包含在childNodes列表中的所有节点都具有相同的父节点，因此他们的parentNode属性都指向同一个节点。
3、包含在childNodes列表中的每个节点相互之间都是同胞节点。通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点。
（列表中第一个节点的previousSibling，最后一个节点的nextSibling属性的值都是null）

if(someNode.nextSibling == null){
    alert("这是childNodes列表中最后一个节点。");
}else if(someNode.previousSibling == null){
    alert("这是childNodes列表中第一个节点。");
}

父节点与其第一个和最后一个子节点之间也存在特殊关系。

someNode.firstChild == someNode.childNodes[0]; //true
someNode.lastChild ==someNode.childNodes[someNode.childNodes.length-1]; //true

3、hasChildNodes()方法

这个方法在节点包含一或多个子节点的情况下返回true。

4、ownerDocument属性

该属性指向表示整个文档的文档节点。通过这个属性，可以直接访问文档节点。

操作节点

1、appendChild()

用途：向childNodes列表的末尾添加一个节点。
返回：childNodes的新增节点、父节点及以前的最后一个子节点的关系指针都会相应的更新，更新完成后，返回新增的节点。

var returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode);         //true
alert(someNode.lastNode == newNode);    //true

若传入到appendChild()中的节点已经是文档的一部分了，那么结果是将该节点从原来的的位置转移到新位置。

//someNode 有多个子节点
var returnedNode = someNode.appendChild(someNode.firstNode);
alert(returnedNode == someNode.firstChild); // false
alert(returnedNode == someNode.lastChild);  //true

2、insertBefore()

用途：把节点放在childNodes列表中某个特定的位置上。
用法：
insertBefore(param1,param2)
param1——要插入的节点
param2——作为参照的节点
返回：插入节点后，被插入的及诶单会变成参考节点的前一个同胞节点（previousSibling），同时被方法返回。如果参照节点是null，则insertBefore()与appendChild()执行相同的操作。

//插入后成为最后一个子节点
returnedNode = someNode.insertbefore(newNode,null);
alert(returnedNode == someNode.lastNode); //true

//插入后成为第一个子节点
returnedNode = someNode.insertbefore(newNode,someNode.firstChild);
alert(returnedNode == newNode);         //true
alert(newNode == someNode.firstNode);   //true

//插入到最后一个子节点前面
returnedNode = someNode.insertbefore(newNode,someNode.lastChild);
alert(newNode == someNode.childNodes[someNode.childNodes.length-1]);    //true

3、replaceChild()

用途：插入一个节点并替换插入位置处的节点。
用法：
replaceChild(param1,param2)
param1——要插入的节点
param2——要替换的节点
返回：返回要替换的节点并从文档树中被移除，同时由要插入的节点占据其位置。

//替换第一个子节点
returnedNode = someNode.replaceChild(newNode,someNode.firstChild);

//替换最后一个子节点
returnedNode = someNode.replaceChild(newNode,someNode.lastChild);

4、removeChild()

用途：移除一个节点
用法： removeChild(param)　param—— 要移除的节点
返回：要移除的节点

//移除第一个子节点
returnedNode = someNode.removeChild(someNode.firstChild);

//移除最后一个子节点
returnedNode = someNode.removeChild(someNode.lastChild);

前面四个方法操作的都是某个节点的子节点，并不是所有类型的节点都有子节点。

5、cloneNode()

用途：创建调用这个方法的节点的一个完全相同的副本。
用法： cloneNode(param)
　　　 param——true，执行深复制，即复制节点及其整个子节点树；false，执行浅复制，即复制节点本身。
返回：返回复制后的节点副本，但并没有为它指定父节点。因此这个节点是“孤儿”，要通过appendChild()、insertBefore()或replaceChild()将它添加到文档中去。

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

//将上面的<ul>元素的引用保存在变量myList中
var deepList = myList.cloneNode(true);
alert(deepList.childNodes.length);    //3（IE<9）或7（其他浏览器）

var shallowList = myList.cloneNode(false);
alert(shallowList.childNodes.length);   //0

6、normalize()

用途：处理文档树中的文本节点。
用法：由于解析器的实现或DOM的操作等原因，可能会出现文本节点不包含文本，或者接连出现两个文本节点的情况。当在某个节点上调用这个方法时，就会在该节点的后代节点中查找上述两种情况。如果找到了空文本节点，则删除它；如果找到了相邻的文本节点，则将它们合并为一个文本节点。

上一篇下一篇

猜你喜欢

热点阅读