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

一、介绍

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

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

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

二、知识点介绍

1、节点类型

2、遍历节点树

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

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

5、节点的一个方法

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

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

1、节点类型

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

2、遍历节点树

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

<div >

</div>

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以下不兼容

<div >

</div>

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节点的文本内容，可读写

</div>

4.3、nodeType

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

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

console.log(strong.nodeType);

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

4.4、Attributes

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

</div>

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

getAttribute：获取某一个属性的值

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

createAttribute：仅建立一个属性

removeAttribute：删除一个属性

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

setAttributeNode：建立一个节点

removeAttributeNode：删除一个节点

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

4.4.1、attributes的使用方法：（IE和FF通用）

<body>

</body>

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

document.write(d.name);

document.write(d.value);

//显示value aaa

</script>

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的使用方法：

<body>

</body>

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

document.write(d);

//显示 aaa

</script>

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

<body>

</body>

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

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

</script>

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

<head>

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 );/*改变*/

};

</script>

</head>

<body>

</ul>

</body>

4.4.5、removeAttribute的使用方法：（少了一个）

<body>

</body>

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

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

</script>

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

4.4.6、getAttributeNode的使用方法：

<body>

</body>

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

document.write(d.name);

document.write(d.value);

//显示 value aaa

</script>

4.4.7、setAttributeNode的使用方法：

<body>

</body>

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

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

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

</script>

4.4.8、removeAttributeNode的使用方法：

<body>

</body>

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

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

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

</script>

5、节点的一个方法

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

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

console.log(div.hasChildNodes());

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

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

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

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

代码如下：

<!DOCTYPE html>

<head>

<title>使用DOM方法递归遍历节点树</title>

</head>

<body>

<span class="msg">Hello World !</span>

<ul>

<li>综艺

<ul>

</ul>

</li>

</ul>

</body>

/*定义一个数组用于存放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<len;i++){

getChildren(parent.childNodes[i]);

}

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

arr.pop();

}

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

</script>

</html>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,847评论 4赞 362
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,208评论 1赞 292
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,587评论 0赞 243
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,942评论 0赞 205
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,332评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,587评论 1赞 218
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,853评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,568评论 0赞 198
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,273评论 1赞 242
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,542评论 2赞 246
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,033评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,373评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,031评论 3赞 236
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,073评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,830评论 0赞 195
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,628评论 2赞 274
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,537评论 2赞 269

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

推荐阅读更多精彩内容