4.6 自定义属性的操作
获取属性值 element.属性 获取属性值。 element.getAttribute(‘属性’); 区别： element.属性 获取内置属性值（元素本身自带的属性） element.getAttribute(‘属性’); 主要获得自定义的属性 （标准） 我们程序员自定义的属性设置属性值 element.属性 = ‘值’ 设置内置属性值。 element.setAttribute(‘属性’, ‘值’); 区别： element.属性 设置内置属性值 element.setAttribute(‘属性’); 主要设置自定义的属性 （标准）移除属性 element.removeAttribute(‘属性’); 4.7 H5自定义属性 自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。 自定义属性获取是通过getAttribute(‘属性’) 获取。 但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。 H5给我们新增了自定义属性：设置H5自定义属性 H5规定自定义属性data-开头做为属性名并且赋值。 比如 或者使用 JS 设置 element.setAttribute(‘data-index’, 2)获取H5自定义属性兼容性获取 element.getAttribute(‘data-index’);H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持利用 DOM 提供的方法获取元素 document.getElementById() document.getElementsByTagName() document.querySelector 等 逻辑性不强、繁琐利用节点层级关系获取元素 利用父子兄节点关系获取元素 逻辑性强， 但是兼容性稍差 5.2 节点概述 一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个 基本属性 元素节点 nodeType 为 1 属性节点 nodeType 为 2 文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等） 我们在实际开发中，节点操作主要操作的是元素节点 5.3 节点层级 利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系父级节点 node.parentNode parentNode 属性可返回某节点的父节点，注意是最近的一个父节点 如果指定的节点没有父节点则返回 null子节点parentNode.childNodes（标准） parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。 注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。 如果只想要获得里面的元素节点，则需要专门处理。 所以我们一般不提倡使用childNodes var ul = document. querySelector(‘ul’); for(var i = 0; i < ul.childNodes.length;i++) { if (ul.childNodes[i].nodeType == 1) { // ul.childNodes[i] 是元素节点 console.log(ul.childNodes[i]); } }parentNode.children（非标准） parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返 回 （这个是我们重点掌握的）。 虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用parentNode.firstChild firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。parentNode.lastChild lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点parentNode.firstElementChild firstElementChild 返回第一个子元素节点，找不到则返回null。parentNode.lastElementChild lastElementChild 返回最后一个子元素节点，找不到则返回null。 注意：这两个方法有兼容性问题，IE9 以上才支持。 实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？ 解决方案：如果想要第一个子元素节点，可以使用 parentNode.chilren[0]如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]兄弟节点node.nextSibling nextSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。node.previousSibling previousSibling 返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。兄弟节点node.nextElementSibling nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。node.previousElementSibling previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null。 注意：这两个方法有兼容性问题， IE9 以上才支持。 如何解决兼容性问题 ？ 自己封装一个兼容性的函数 function getNextElementSibling(element) { var el = element; while (el = el.nextSibling) { if (el.nodeType === 1) { return el; } } return null; } 5.4 创建节点 document.createElement(‘tagName’) document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在， 是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。 5.4 添加节点node.appendChild(child) node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。node.insertBefore(child, 指定元素) node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。