H5 规定自定义属性规范
H5 规定自定义属性应以 data- 开头作为属性名并赋值，并对这种自定义的属性添加了一种获取的方法： element.dataset
首先我们输出一下 dataset，看看 dataset 是什么，可以看到直接输出dataset，输出结果为一个对象 集合，所以dataset 是一个包含了所有 data- 开头的自定义属性的集合
<div data-index="1" data-name="jack"></div>
<script>
var div=document.querySelector('div');
console.log(div.dataset);
</script>
单独输出有两种形式：dataset.XXX 以及 dataset[XXX]
<div data-index="1" data-name="jack"></div>
<script>
var div=document.querySelector('div');
console.log(div.dataset.index);
console.log(div.dataset['index']);
</script>
对于较长的属性命名，如：data-index-first ,获取时需要采用驼峰命名法，dataset.indexFirst
父节点
在获取元素时我们可以利用DOM提供的一系列方法获取，但是这些方法过于繁琐，不简练。所以我们学习节点操作，页面中所有内容都是节点，有文档节点，元素节点，属性节点等，我们主要针对研究的是元素节点
节点（node）拥有 节点类型（nodeType），节点名称（nodeName），节点值（nodeValue）
父节点：
parentNode：得到的是最近的父级节点，找不到的话返回 null
<div class="father">
<div class="son"></div>
</div>
<script>
var son=document.querySelector('.son');
console.log(son.parentNode);
</script>
子节点
有父节点，也有子节点，例如在列表中获取一堆 li 标签就显得很便捷
子节点：
childNodes：可以看出输出结果为9个，但是明明只有四个元素，那剩下的五个是什么呢？可以看到每个 li 标签换行时有回车，回车算文本节点，也就是这个方法会把元素节点和文本节点都输出出来
<ul class="father">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var father=document.querySelector('.father');
console.log(father.childNodes);
</script>
对此也有解决办法，使用 nodeType 得到属性值，元素节点属性值为 1，文本节点属性值为 3，属性节点的属性值为 2，只要判断是否为1即可
<ul class="father">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var father=document.querySelector('.father');
for(var i=0;i<father.childNodes.length;i++){
if(father.childNodes[i].nodeType==1){
console.log(father.childNodes[i]);
}
}
</script>
但这种方法太繁琐，不使用这种，有另一种方法
更简便的方法：element.children
<ul class="father">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var father=document.querySelector('.father');
console.log(father.children);
</script>
