html语言节点树,从屌丝到架构师的飞越（JavaScript篇）-JavaScript 遍历HTML节点树

一、介绍

这节课呢，我们来了解的是JavaScript 遍历HTML节点树，

在Dom文档查的结构中，实际上各级标签呈现树状排列。我们可以把整个html文档看成一个树形，可以通过遍历节点树的形式进行标签的选取。

Dom文档中，遍历节点的节点有，文本节点，注释节点和标签节点。

二、知识点介绍

1、节点类型

2、遍历节点树

3、基于元素节点数的遍历

4、parentElement ——> 返回当前元素的父元素节点(IE不兼容)

5、节点的一个方法

6、使用DOM方法递归遍历节点树——>小案例

三、上课对应视频的说明文档

1、节点类型

所以一般我们获取节点类型用  nodeType

2、遍历节点树

这种遍历可以遍历  文本类节点、注释节点、元素节点等。  任何浏览器都好使。

2.1、parentNodes ——>父节点(最顶端的parentNode为#document);

var strong = document.getElementsByTagName('strong')[0];

console.log(strong.parentNode);

//strong.parentNodes ————div

//strong.parentNode.parentNode ————body

//strong.parentNode.parentNode.parentNode ————html

//strong.parentNode.parentNode.parentNode .parentNode————document

2.2、childNodes ——> 子节点们

var div = document.getElementsByTagName('div')[0];

console.log(div.childNodes);

2.3、firstChild ——>第一个子节点

var div = document.getElementsByTagName('div')[0];

console.log(div.firstChild);

2.4、lastChild ——> 最后一个子节点

var div = document.getElementsByTagName('div')[0];

console.log(div.lastChild);

2.5、nextSibling ————>后一个兄弟节点

var strong  = document.getElementsByTagName('strong')[0];

console.log(strong.nextSibling);

3、基于元素节点数的遍历

遍历元素节点。

除了children以外，其他遍历ie9以下不兼容

3.1、parentElement ——> 返回当前元素的父元素节点(IE不兼容)

var strong = document.getElementsByTagName('strong')[0];

console.log(strong.parentElement);

3.2、children ——> 只返回当前元素的元素子节点

var div = document.getElementsByTagName('div')[0];

console.log(div.children);

3.3、node.childElementCount === node.children.length 当前元素节点的子元素节点个数(IE不兼容)

var div = document.getElementsByTagName('div')[0];

console.log(div.children.length);

3.4、firstElementChild ——> 返回的是第一个节点(IE不兼容)

var div = document.getElementsByTagName('div')[0];

console.log(div.firstElementChild);

3.5、lastELementChild ————>返回的是最后一个元素节点(IE不兼容)

var div = document.getElementsByTagName('div')[0];

console.log(div.lastElementChild);

3.6、nextElementSibling / previousElementSibling ——> 返回后一个/前一个兄弟元素节点(IE不兼容)

var strong = document.getElementsByTagName('strong')[0];

console.log(strong.nextElementSibling);

console.log(strong.previousElementSibling);

4、节点的四个属性

4.1、nodeName

元素的标签名，返回字符串，以大写的形式表示，只读

var strong  = document.getElementsByTagName('strong')[0];

console.log(typeof(strong.nodeName) + strong.nodeName);

4.2、nodeValue

text节点或Comment节点的文本内容，可读写

4.3、nodeType

该节点类型，只读  (返回以上节点类型后面对应的值)

var strong  = document.getElementsByTagName('strong')[0];

console.log(strong.nodeType);

对应最上面表格  为元素节点

4.4、Attributes

Element节点的属性集合  ,属性值可以改，但属性名不可以改

attributes：获取一个属性作为对象

getAttribute：获取某一个属性的值

setAttribute：建立一个属性，并同时给属性捆绑一个值

createAttribute：仅建立一个属性

removeAttribute：删除一个属性

getAttributeNode：获取一个节点作为对象

setAttributeNode：建立一个节点

removeAttributeNode：删除一个节点

attributes可以获取一个对象中的一个属性，并且作为对象来调用，注意在这里要使用“[]”，IE在这里可以使用“()”，考虑到兼容性的问题，要使用“[]”。关于attributes属性的使用方式上，IE和FF有巨大的分歧，在此不多介绍。

4.4.1、attributes的使用方法：(IE和FF通用)

var d = document.getElementById("sss").attributes["value"];

document.write(d.name);

document.write(d.value);

//显示value aaa

getAttribute，setAttribute，createAttribute，removeAttribute四兄弟的概念比较容易理解，使用方法也比较简单，唯一需要注意这几点：

1、createAttribute在使用的时候不需要基于对象的，document.createAttribute()就可以。

2、setAttribute，createAttribute在使用的时候不要使用name，type，value等单词，IE和FF的反应都奇怪的难以理解。

3、createAttribute在使用的时候如果只定义了名字，没有d.nodeValue = "hello";语句定义值，FF会认为是一个空字符串，IE认为是undefined，注意到这点就可以了。

4.4.2、getAttribute的使用方法：

var d = document.getElementById("sss").getAttribute("value");

document.write(d);

//显示 aaa

4.4.3、setAttribute的使用方法：(你会发现多了一个名为good的属性hello)

var d = document.getElementById("sss").setAttribute("good","hello");

alert(document.getElementById("t").innerHTML)

4.4.4、createAttribute的使用方法：(多了一个名为good的空属性)

window.onload = function (){

var oBox = document.getElementById('box');

alert( document.body.innerHTML );

oBox.setAttribute('value','name');

alert( document.body.innerHTML );

attr = document.createAttribute('hallo');

alert( document.body.innerHTML );/*同上*/

attr.nodeValue = 'world';/*对自定义属性进行编辑*/

alert( document.body.innerHTML );/*同上*/

oBox.setAttributeNode(attr);/*对标签插入自定义属性*/

alert( document.body.innerHTML );/*改变*/

};

4.4.5、removeAttribute的使用方法：(少了一个)

var d = document.getElementById("sss").removeAttribute("value");

alert(document.getElementById("t").innerHTML)

getAttributeNode，setAttributeNode，removeAttributeNode三个方法的特点是都直接操作一个node(节点)，removeAttributeNode在一开始的时候总会用错，但是充分理解了node的含义的时候，就能够应用自如了。

4.4.6、getAttributeNode的使用方法：

var d = document.getElementById("sss").getAttributeNode("value");

document.write(d.name);

document.write(d.value);

//显示 value aaa

4.4.7、setAttributeNode的使用方法：

var d = document.createAttribute("good");

document.getElementById("sss").setAttributeNode(d);

alert(document.getElementById("t").innerHTML);

4.4.8、removeAttributeNode的使用方法：

var d = document.getElementById("sss").getAttributeNode("value")

document.getElementById("sss").removeAttributeNode(d);

alert(document.getElementById("t").innerHTML);

5、节点的一个方法

Node.hasChildNodes();  是否有孩子节点。有：true；没有：false

var div = document.getElementsByTagName('div')[0];

console.log(div.hasChildNodes());

6、使用DOM方法递归遍历节点树——>小案例

需求：完成遍历并且带缩进

这里细节点：定义一个数组存放缩进“Tab”，何时压入一个缩进，何时退出一个缩进？

只要有子节点，加压入一个缩进，只要本级所有子节点输出完，就退一个\t

代码如下：

使用DOM方法递归遍历节点树

Hello World !

• 电影
• 综艺
  • 跑男
  • 爸爸
  • 真男
• 剧集

/*定义一个数组用于存放Tab*/

var arr = [];

function getChildren(parent){

/*如果parent是元素节点，就返回nodeName，否则，返回nodeValue*/

console.log(arr.join("")+"|-"+(parent.nodeType==1?parent.nodeName:parent.nodeValue));

if (parent.childNodes.length){

/*只要有子节点，加压入一个缩进*/

arr.push("\t")

for (var i= 0,len=parent.childNodes.length;i

getChildren(parent.childNodes[i]);

}

/*只要本级所有子节点输出完，就退一个\t*/

arr.pop();

}

}

getChildren(document.body.childNodes[3]);