js交互开发（高级）基本内容 第十七节 javascript的DOM（四）

一、自定义属性

1、设置属性值

一般的自定义属性可以通过getAttribute('属性')方法来获取，但是有些自定义属性很容易引起歧义，不容易判断是元素的自带属性还是自定义属性。因此，HTML5新增了自定义属性的规范，在HTML5中规定通过“data-属性名”的方式设置自定义属性。

元素的“data-*”自定义属性有两种设置方式，分别如下：

（1）在HTML中设置自定义属性

// 在div元素上设置data-index属性

（2）在JavaScript中设置自定义属性

在JavaScript代码中，可以通过setAttribute('属性', 值)或者“元素对象.dataset.属性名='值'”两种方式设置自定义属性。需要注意的是，通过后者的方式只能设置以“data-”开头的自定义属性。

2、获取属性值

在DOM操作中，提供了两种获取属性值的方式，第1种是通过getAttribute()方式，该方式可以获取内置属性或者自定义属性；第2种是使用HTML5新增的“element.dataset.属性”或者“element.dataset['属性'] ”方式（有兼容性问题）。接下来，通过案例形式演示如何获取属性值。

dataset是一个集合，里面存放了所有以data开头的自定义属性，如果自定义属性里面包含有多个连字符（-）时，获取的时候采取驼峰命名法。

二、节点基础

HTML文档可以看作是一个节点树，网页中的所有内容都是节点，一般来说，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这3个基本属性。下面列举常见的节点类型：

元素节点，nodeType为1

属性节点，nodeType为2

文本节点，nodeType为3，文本节点包含文字、空格、换行等

DOM根据HTML中各节点的不同作用，可将其分别划分为标签节点（元素节点）、文本节点和属性节点。节点之间的层级关系如下：

根节点：标签是整个文档的根节点，有且仅有一个

父节点：指的是某一个节点的上级节点

子节点：指的是某一个节点的下级节点

兄弟节点：两个节点同属于一个父节点

1、获取父级节点

在JavaScript中，可以使用parentNode属性来获得离当前元素的最近的一个父节点，如果找不到父节点就返回为 null，语法格式为：obj.parentNode，obj是一个DOM对象。

2、获取子级节点

在JavaScript中，可以使用childNodes属性或者children属性两种方式来获得当前元素的所有子节点的集合。

案例演示：如何使用childNodes属性获取当前元素的子节点。

• 我是li
• 我是li
• 我是li
• 我是li

childNodes属性返回的是NodeList对象的集合，返回值里面包含了元素节点、文本节点等其他类型的节点。

children是一个可读的属性，返回所有子元素节点。children只返回子元素节点，其余节点不返回，目前各大浏览器都支持该属性，在实际开发中推荐使用children。

案例演示：如何使用children属性获取当前元素的子节点。

1. 我是li
2. 我是li
3. 我是li
4. 我是li

使用firstChild属性和lastChild属性获取子节点，前者返回第一个子节点，后者返回的是最后一个子节点，如果找不到则返回null。需要注意的是它们的返回值包括文本节点和元素节点等。

使用firstElementChild属性和lastElementChild属性获取子元素节点，前者返回第一个子元素节点，后者返回最后一个子元素节点，如果找不到则返回null。需要注意的是，这两个属性有兼容性问题，IE9以上才支持。

实际开发中，firstChild 和lastChild 包含其他节点，操作不方便，而firstElementChild和lastElementChild又有兼容性问题，为了解决兼容性问题，在实际开发中通常使用“obj.children[索引] ”的方式来获取子元素节点。

obj.children[0] // 获取第一个子元素节点

obj.children[obj.children.length - 1] // 获取最后一个子元素节点

3、获取兄弟节点

在JavaScript中，可以使用nextSibling属性获得下一个兄弟节点，或者使用previousSibling属性获得上一个兄弟节点，它们的返回值包含元素节点或者文本节点等。如果找不到，就返回null。

可以使用nextElementSibling返回当前元素的下一个兄弟元素节点，previousElementSibling属性返回当前元素的上一个兄弟元素节点，如果找不到则返回null。需要注意的是，这两个属性有兼容性问题，IE9以上才支持。

实际开发中，nextSibling和previousSibling属性返回值都包含其他节点，操作不方便，而nextElementSibling和previousElementSibling又有兼容性问题。为了解决兼容性问题，在实际开发中通常使用封装函数来处理兼容性。