Node对象

    遍历节点

         获取父节点

parentNode

父节点可以是所有节点类型，包括文档节点

代码示例

var child = document.getElementById(‘huawei’);

var parent = child.parentNode;

 

 

     获取父元素节点

parentElement

父级必须是元素节点（HTML的标签）

获取<htm>标签的父元素节点值为null

代码示例

var child = document.getElementById(‘huawei’);

var parent = child.parentElement;

 

 

获取子节点

 

firstChild

获取指定标签的第一个子节点

代码示例

var btn3 = document.getElementById(‘btn3’);

btn3.onclick = function(){

var parentDiv = document.getElementById(‘parentDiv’);

var firstChild = parentDiv.firstChild;

firstChild.style.backgroundColor = ‘lightgreen’;

}

 

lastChild

获取指定标签的最后一个子节点

代码示例

var btn4 = document.getElementById(‘btn4’);

btn4.onclick = function(){

var parentDiv = document.getElementById(‘parentDiv’);

var lastChild = parentDiv.lastChild;

lastChild.style.backgroundColor = ‘lightgreen’;

}

 

chilNodes

获取指定标签的所有子节点

代码示例

var btn5 = document.getElementById(‘btn5’);

btn5.onclick = function(){

var parentDiv = document.getElementById(‘parentDiv’);

var children = parentDiv.childNodes;

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

children[i].style.backgroundColor = ‘lightgreen’;

}

}

 

 

注意！！！

获取指定节点时存在空白节点，不能正确获取子节点

 

解决方案

 

自调函数

特点

自已调用自己

定义变量、函数、对象、数组等-全部都在函数作用域中

代码示例

(function(g){

/*

1. 之前定义的所有函数必须被定义在当前函数作用域中
2. 这些函数必须可以在全局作用域中被正常使用

*/

var MyTool = {

firstChild : function(parentNode){

// 1.正确的子节点；2.空白节点

var child = parentNode.firstChild;

// 判断当前是否为空白节点

if (child.nodeType === 3){

child = child.nextSibling;

}

return child;

},

childNodes : function(parentNode){

var arr = [];

var children = parentNode.childNodes;

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

var child = children[i];

if(child.nodeType === 1){

arr.push(child);

}

}

return arr;

}

}

// 将当前的函数作用域中的对象，提升为全局作用域的

g.MyTool = MyTool;

})(window);

 

方案调用

var firstChild = MyTool.firstChild(parent);

console.log(firstChild);

 

 

 

 

 

         获取兄弟节点

 

previousSibling: 获取指定节点的前一个兄弟节点。

代码

var btn6 = document.getElementById(‘btn6’);

btn6.onclick = function(){

var two = document.getElementById(‘two’);

// 中间存在一个空白节点

var one = two.previousSibling.previousSibling;

one.className = ‘list-group-item active’;

}

 

nextSibling: 获取指定节点的后一个兄弟节点。

代码

var btn7 = document.getElementById(‘btn7’);

btn7.onclick = function(){

var two = document.getElementById(‘two’);

// 中间存在一个空白节点

var three = two.nextSibling.nextSibling;

three.className = ‘list-group-item active’;

}

 

    插入节点

         appendChild()

将一个节点添加到指定父节点的节点列表的末尾

代码

//向<ul>标签添加子节点<li>香蕉</li>

/*//1.获取目标节点

var ul=document.getElementById(‘parent’);

//2.创建新的子节点

var newLi=document.createElement(‘li’);

var textNode=document.createTextNode(‘香蕉’);

newLi.appendChild(textNode);

//3.将新的子节点添加到<ul>标签中

ul.appendChild(newLi);*/

 

inserBefore

在当前节点的某个子节点之前插入一个子节点

代码

//向ID=‘jz’节点前面添加一个新的兄弟节点

var ul = document.getElementById(‘parent’);

var jz=document.getElementById(‘jz’);

 

var newLi=document.createElement(‘li’);

var textNode=document.createTextNode(‘香蕉’);

 

newLi.appendChild(textNode);

 

 

 

删除节点

parentNode.removeChild(childNode)

代码

 

var parent = document.getElementById(‘parent’);

var child = document.getElementById(‘child’);

 

parent.removeChild(child);

 

 

    替换节点

parentNode.replaceChild(newChild,oldChild)

代码

// 新创建的<li>标签

var newLi = document.createElement(‘li’);

var text = document.createTextNode(‘大米’);

newLi.appendChild(text);

// 从页面中获取到的<li>

var wz = document.getElementById(‘wzry’);

 

var phone = document.getElementById(‘phone’);

var mi = document.getElementById(‘mi’);

 

phone.replaceChild(wz,mi);

 

 

 

 

 

    复制节点

node.cloneNode(blooean)

true

复制

false

不复制

注意：如果被复制的节点存在ID值时，复制完成以后需要修改ID属性的值

代码

 

var btn=document.getElementById(‘btn’)

var copy=btn.cloneNode(true);

btn.setAttribute(‘id’,’btn2′);

var p1=document.getElementById(‘p1’);

p1.appendChild(copy)