学习笔记

h5特性：data- 开头的属性都是我们自定义的属性
h5获取自定义属性：div.dataset.index
dataset是一个集合，里面存放了所有以data-开头的自定义属性
如果一个data名为data-list-name，获取的时候应该为：div.dataset.listName(驼峰取名)

利用节点的层次关系获取元素，逻辑性更强
页面中所有内容都是节点
一般来说，每个节点都有nodeType、nodeName、nodeValue这三个基本属性

• 元素节点nodeType为1
• 属性节点nodeType为2
• 文本节点nodeType为3
  我们主要操作的是元素节点
  节点操作
  父级节点
• parentNode(得到的是离元素最近的父亲结点)
  子节点
• childNodes(得到的是子节点集合，包含元素节点和文本节点)
• children只返回子元素节点，也是实际开发常用的
• 第一个子元素和最后一个子元素，firstChild和lastChild，不管是元素节点还是文本节点
• firstElementChild 返回第一个元素节点
  有兼容性问题

实际开发中ol.children[0];
ol中第一个子元素节点
ol.children[ol.children.length-1] 最后一个子元素节点

兄弟节点

• div.nextElementSibling（得到div的下一个兄弟元素节点）
• div.nextSibling(得到div的下一个节点，包括文本节点)

节点操作之创建节点和添加节点

• 创建：var li=document.createElement(‘li’);
• 添加：node.appendChild(child);（后面）
• node.insertBefore(child,指定元素)（指定元素的前面）
  浅拷贝：只复制标签，不复制里面的内容
  深拷贝：标签和里面的内容都复制