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

将HTML文档做为元素树进行遍历

# 做为元素树的文档

## 1. Element对象树

* 通常我们只关心HTML文档中的元素,而不是文本
* 将文档看成对象树,忽略`Text`文本节点和`Comment`注释节点很有必要

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

## 2. children 属性

* 该属性在`Element`对象上调用, 返回该对象下面的所有子元素对象
* 返回值类型是: `HTEMCollection`
* 类似于节点对象的`ChildNodes`属性,但过滤掉了文本/注释节点
* 文本类节点是没有子元素的,没有`children`属性

## 3. parentElement

* `parentElement`: 返回当前节点的父元素
* 可以在文本节点上调用
* 返回的父元素类型必须是: `Element` 或 `Document` 或`DocumentFragment`

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

## 4. firstElementChild / lastElementChild

* `firstElementChild`: 返回元素对象的第一个子元素对象
* `lastElementChild` : 返回元素对象的最后一个子元素对象

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

## 5. nextElementSibling / previousElementSibling

* `nextElementSibling`: 当前元素对象的下一个兄弟元素对象
* `previousElementSibling`: 当前元素对象的前一个兄弟元素对象

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

## 6. 示例源码

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>做为元素树的文档</title>
</head>
<body>
<ul>
<li>list1</li>
<li>list2</li>
<li>list3</li>
<li>list4</li>
</ul>

<script>
var ul = document.getElementsByTagName('ul')[0];

// 1.childElementCount: 查看子元素数量
console.log(ul.childElementCount);

// 2. children: 获取全部子元素: HTMLCollection
console.log(ul.children);
// 根据索引获取子元素集合中的某一个
console.log(ul.children[1]);

// 3. parentElement: 获取父元素
console.log(ul.children[1].parentElement);

// 4. firstElementChild: 获取第一个子元素
console.log(ul.firstElementChild);

// 5. lastElementChild: 获取最后一个子元素
console.log(ul.lastElementChild);

// 获取第3个<li>
var thirdChild = ul.children.item(2);
console.log(thirdChild);

// 6. nextElementSibling: 下一个兄弟元素
console.log(thirdChild.nextElementSibling);

// 7. previousElementSibling: 前一个兄弟元素
console.log(thirdChild.previousElementSibling);
</script>
</body>
</html>
```


任务

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