Web-API-DOM的自定义属性的操作-H5自定义属性-节点概述-节点层级-父子节点-兄弟节点-创建节点-添加节点

4.6 自定义属性的操作

1. 获取属性值
   element.属性 获取属性值。
   element.getAttribute(‘属性’);
   区别：
   element.属性 获取内置属性值（元素本身自带的属性）
   element.getAttribute(‘属性’); 主要获得自定义的属性 （标准） 我们程序员自定义的属性
2. 设置属性值  element.属性 = ‘值’ 设置内置属性值。
   element.setAttribute(‘属性’, ‘值’);
   区别：
   element.属性 设置内置属性值  element.setAttribute(‘属性’); 主要设置自定义的属性 （标准）
3. 移除属性
   element.removeAttribute(‘属性’);
   4.7 H5自定义属性
   自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
   自定义属性获取是通过getAttribute(‘属性’) 获取。
   但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
   H5给我们新增了自定义属性：
4. 设置H5自定义属性
   H5规定自定义属性data-开头做为属性名并且赋值。
   比如
   
   或者使用 JS 设置
   element.setAttribute(‘data-index’, 2)
5. 获取H5自定义属性
6. 兼容性获取 element.getAttribute(‘data-index’);
7. H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持
8. 利用 DOM 提供的方法获取元素
   document.getElementById()
   document.getElementsByTagName()
   document.querySelector 等 
   逻辑性不强、繁琐
9. 利用节点层级关系获取元素
   利用父子兄节点关系获取元素
   逻辑性强， 但是兼容性稍差
   5.2 节点概述
   一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个
   基本属性
   元素节点 nodeType 为 1
   属性节点 nodeType 为 2
   文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）
   我们在实际开发中，节点操作主要操作的是元素节点
   5.3 节点层级
   利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系
10. 父级节点
    node.parentNode
    parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
    如果指定的节点没有父节点则返回 null
11. 子节点
12. 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]);
    } }
13. parentNode.children（非标准）
    parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返
    回 （这个是我们重点掌握的）。
    虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用
14. parentNode.firstChild
    firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
15. parentNode.lastChild
    lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点
16. parentNode.firstElementChild
    firstElementChild 返回第一个子元素节点，找不到则返回null。
17. parentNode.lastElementChild
    lastElementChild 返回最后一个子元素节点，找不到则返回null。
    注意：这两个方法有兼容性问题，IE9 以上才支持。
    实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和
    lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？
    解决方案：
18. 如果想要第一个子元素节点，可以使用 parentNode.chilren[0]
19. 如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]
20. 兄弟节点
21. node.nextSibling
    nextSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。
22. node.previousSibling
    previousSibling 返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。
23. 兄弟节点
24. node.nextElementSibling
    nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。
25. 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 添加节点
26. node.appendChild(child)
    node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的
    after 伪元素。
27. node.insertBefore(child, 指定元素)
    node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before
    伪元素。