您的位置：首页 > Web前端 > Node.js

《JS高程（3）》DOM节点层次Node类型-第10章笔记(11)

2017-02-04 08:48 537 查看

节点层次

节点之间的关系构成了层次，所有页面标记则表现为一个以特定节点为根节点的树形结构。

文档节点

document

是每个文档的根节点。文档节点只有一个子节点—

<html>

文档元素。文档元素是文档的最外层元素，文档中的所有元素都包含在其中，每个文档只能有一个文档元素。

Node类型


节点类型	数值常量
Node.ELEMENT_NODE	1
Node.ATTRIBUTE_NODE	2
Node.TEXT_NODE	3
Node.CDATA_SECTION _NODE	4
Node.ENTITY_PEFERENCE _NODE	5
Node.ENTITY_NODE	6
Node.PROCESSING_INSTRUCTION _NODE	7
Node.COMMENT_NODE	8
Node.DOCUMENT_NODE	9
Node.DOCUMENT_TYPE _NODE	10
Node.DOCUMENT_FPAGMENT _NODE	11
Node.NOTATION_NODE	12

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

IE没有公开Node类型的

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

nodeName和nodeValue属性

nodeName:始终保存的是元素的标签名

nodeValue:对于元素节点为空。

节点关系

每个节点都有一个childNodes属性，其中保存着一个NodeList对象，类似数组，有length属性，可以通过[]访问NodeList的值，但它并不是Array的实例，反馈的是一个动态结果，访问的是某个瞬间的一个值。

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

arrayObject.slice(start,end)

//通过call()遍历将其转换为数组
//在IE8及之前版本无效
var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes,0);

IE中将NodeList转换为数组必须枚举所有成员。

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

childNodes列表中所有节点为子节点，即同胞节点，可通过

previousSibling

与

nextSibling

访问同胞节点。

if(someNode.nextSiling === null){
alert("Last node in the parent's childNodes list.");
}else if(someNode.previousSiling === null){
alert("First node in the parent's childNodes list.");
}

操作节点

关系指针是只读的，操作方法如下：


方法名	参数	作用
appendChild()	新增节点	在childNodes列表的末尾添加节点
insertBefore()	插入的节点和参照的节点	被插入的节点会变成参照节点的前一个同胞节点
replaceChild()	插入的节点和替换节点	被替换的节点由这个方法返回并从文档树中移除，同时插入节点
removeChild()	移除的节点	被移除的节点将成为方法的返回值

这些方法必须先取得父节点，并不是所有所有类型都有子节点，再不支持子节点的节点上调用这些方法，将会导致错误。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： dom javascript

相关文章推荐

新的分享

章节导航