基本概念
Node节点是DOM中所有节点的基础节点,所有节点类型都共享着Node节点的属性和方法。
Node节点的常用属性
1、基本属性
nodeType:节点的类型(有12种以数值常量表示的节点类型)。
nodeName:根据不同的节点类型返回不同的节点名称。
nodeValue:根据节点的类型设置或返回节点的值。
*可以在谷歌浏览器上使用下面的代码,查看Node节点上的所有属性和方法。
Node.prototype
2、关系属性
someNode.childNodes:
① 保存着一个由直接子节点组成的NodeList(有序的节点列表)对象,这些子节点有可能是元素、文本节点、注释或处理指令。NodeList对象中的项会随着当前文档内容的更新而实时更新,这是与JavaScript中的数据集合的不同之处。
② NodeList是一种类数组对象,用于保存一组有序的节点,可以通过方括号或使用item()方法访问这些节点。
例子:
//如果标签div、P之间有空格,可能会返回文本节点
//因此需要将标签不留空隙排列在一起
<div><p>0</p><p>1</p><p>2</p></div>
var div = document.getElementsByTagName('div')[0];
console.log(div.firstChild.nodeName); //输出:P
console.log(div.childNodes[0].nodeName); //输出:P
console.log(div.childNodes.item(0).nodeName); //输出:P
console.log(div.childNodes.length); //输出:3
③ 可以使用Array.prototype.slice()方法将NodeList对象转换为数组。
代码如下:
function convertToArray(nodes){
var array = null;
try {
array = Array.prototype.slice.call(nodes, 0);
} catch (ex) {
array = new Array();
for (var i=0, len=nodes.length; i < len; i++){
array.push(nodes[i]);
}
}
return array;
}
//使用上面的函数
<div><p>0</p><p>1</p><p>2</p></div>
var p_list = document.getElementsByTagName("p");
console.log(Array.isArray(p_list));
//输出:false
console.log(Array.isArray(convertToArray(p_list)));
//输出:true
*上面的代码针对IE8及更早版本做了兼容性处理。
someNode.parentNode:指向当前元素的父节点。
someNode.previousSibling: 指向当前元素的前一个同胞节点。
someNode.nextSibling:指向当前元素的后一个同胞节点。
someNode.firstChild和someNode.lastChild:分别指向其childNodes列表中的第一个和最后一个节点。
例子:
<div id="wrap"><p id="0"></p><p id="1"></p><p id="2"></p></div>
console.log($("0").parentNode.id); //输出:wrap
console.log($("1").previousSibling.id); //输出:0
console.log($("1").nextSibling.id); //输出:2
console.log($("wrap").firstChild.id); //输出:0
console.log($("wrap").lastChild.id); //输出:2
function $(id) {
return document.getElementById(id);
}
Node节点的常用方法
1、操作节点
appendChild():添加节点,用于向childNodes列表的末尾添加一个节点。
insertBefore():插入节点,这个方法接受两个参数:要插入的节点和作为参照的节点。
replaceChild():替换节点,这个方法接受两个参数:要插入的节点和要替换的节点。
removeChild():这个方法接受一个参数,即要移除的节点。
例子:
<div>
<p>0</p>
<p>1</p>
<p>2</p>
</div>
var div = document.getElementsByTagName('div')[0]
var p = document.createElement('p')
p.appendChild(document.createTextNode('3'))
div.insertBefore(p, div.lastChild)
浏览器截图:
2、其他方法
hasChildNodes():这个方法在节点包含一或多个子节点的情况下返回true。
例子:
<div>
<p>0</p>
<p>1</p>
<p>2</p>
</div>
var div = document.getElementsByTagName('div')[0];
console.log(div.hasChildNodes()); //输出:true
//文本节点是P的子节点
var p = document.getElementsByTagName('p')[0];
console.log(p.hasChildNodes()); //输出:true
cloneNode():这个方法接受一个布尔值参数,在参数为true的情况下,执行深复制,也就是复制节点及其整个子节点树;在参数为false的情况下( 默认为false ),执行浅复制,即只复制节点本身。
例子:
<div>
<p>0</p>
<p>1</p>
<p>2</p>
</div>
var div = document.getElementsByTagName('div')[0];
var p = document.getElementsByTagName('p')[0];
div.appendChild(p.cloneNode()); //浅复制
div.appendChild(p.cloneNode(true)); //深复制
浏览器截图:
contains():这个方法返回的是一个布尔值,来表示传入的节点是否为该节点的后代节点。如果传入的节点是其本身,也会返回true。
例子:
<div>
<p>0</p>
<p>1</p>
<p>2</p>
</div>
var div = document.getElementsByTagName('div')[0];
var p = document.getElementsByTagName('p')[0];
console.log(div.contains(p)); //输出:true
console.log(div.contains(div)); //输出:true
isEqualNode():这个方法可以判断两个节点是否相等。当两个节点的类型、属性、子节点相同,这两个节点就是相等的。
例子:
<div>
<p class="style">0</p>
<p class="style_o">0</p>
<p class="style">0</p>
<p class="style">2</p>
</div>
var p_0 = document.getElementsByTagName('p')[0],
p_1 = document.getElementsByTagName('p')[1],
p_2 = document.getElementsByTagName('p')[2],
p_3 = document.getElementsByTagName('p')[3];
console.log(p_0.isEqualNode(p_1)); //输出:false
console.log(p_0.isEqualNode(p_2)); //输出:true
console.log(p_0.isEqualNode(p_3)); //输出:false
文中的代码部分,带有“例子”和“测试代码”字样的,只是用来学习或测试某一功能用的代码,不可以直接用于项目的开发中。带有“代码如下”字样的,都是经过本人测试,简单修改即可用于项目开发中的代码,如有错误,欢迎指出。