点击切换帐号登陆
帐号密码登陆

将HTML文档做为节点树进行遍历

# 做为节点树的文档

> 文档中的节点,如同生活中的我们, 有父母,有兄弟,或者自己的子女

## 1. 做为节点树的文档

`Document`对象,以及`Element`对象和文档中的`Text`文本对象,统统是`Node`对象

原生`Node`对象上定义了以下重要的属性,全部在它的原型属性上: `Node.prototype`

* `parentNode`: 父节点
* 除根元素外, 每个都有,且只有一个父节点
* 根元素的父节点为:`null`
* `文档碎片`也没有父节点

* `childNodes`: 某节点的子节点的实时表示
* 返回`NodeList`类数组对象
* 该对象是只读的
* 子节点中包括不仅包括元素节点,还包括文本节点

* `firstChild`: 某节点的第一个节点, 没有返回`null`

* `lastChild`: 某节点的最后一个节点,没有返回`null`

* `previoursSibling`: 该节点的前一个兄弟节点

* `nextSibling`: 该节点的后一个兄弟节点

> 拥有共同父节点的二个节点,互为兄弟节点

* `nodeType`: 节点类型,常用的有
* 1: `Element`元素节点
* 3: `Text`: 文本节点
* 9: `Document`: 文档节点
* 11: `DocumentFragment`: 碎片节点

* `nodeName`: 节点名称, 元素标签名,大写字母

* `nodeValue`: `Text`节点或`Comment`注释节点的内容

----------------------------------------------------------

## 2. 示例源码

> code/chapter03/demo01.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node节点树</title>
</head>
<body>
<ul name="list">
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
<li>list5</li>
</ul>

<script>
var ul = document.getElementsByTagName('ul').namedItem('list');
console.log(ul);

// 获取ul的所有子节点及数量
var children = ul.childNodes;
console.log(children);
console.log(children.length); // 11
// 看上去只有5个列表项, 为什么返回11?
// 因为我看到的是5个元素节点, 实际上还存在着6个文本节点
// 因为将<li>之间的换行解析成为了文本节点
// 如果只想获取元素节点,可以通过判断节点类型

// 手工创建一个伪NodeList对象 children
var children = {};
var index = 0;
for (var i = 0; i < ul.childNodes.length; i++) {
if (ul.childNodes[i].nodeType === 1) {
children[index] = ul.childNodes[i];
index++;
}
}
children.length = 5;
console.log(children);

// 第一个子元素节点
var first = ul.firstChild; // 实际上返回的是第一个文本节点,回车符
var first = ul.firstChild.nextSibling; // 第一个子元素节点应该是当前子点的下一个兄弟
console.log(first);

// 最后一个子元素节点
var last = ul.lastChild; // 实际上返回的是最后一个文本节点,回车符
// 基于同上面同样的原因,最后一个子元素节点应该是当前子点的前一个兄弟
var last = ul.lastChild.previousSibling;
console.log(last);

// 查看节点名称
console.log(last.nodeName); // 'LI'

// 查看节点类型
console.log(last.nodeType); // 1 元素节点

// 查看节点值
console.log(last.nodeValue); // 只有文本节点才有值
//查看最后一个节点的值,实际上是当前节点的第一个子节点(文本类型)的值
console.log(last.firstChild.nodeValue);
// 查看父节点
console.log(last.parentNode); // ul对象
</script>
</body>
</html>
```


任务

?不会了怎么办
无数据提示暂无评论哟...我要评论
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号