Dom元素小技巧
1. 设置并获取自定义属性
通常情况下在写代码的时候设置自定义属性，一般会通过Attribute的一系列方法来设置自定义属性来存储一些数据；
但是html有自带的存储自定义数据的地方，data-****
<div id="ls" data-user="hello"></div>
我们可以通过console.dir来查看这个dom元素的属性，可以通过dom.dataset来看绑定的东西
console.dir(document.getElementById('ls'))
12.png
var dom = document.getElementById('ls')
console.log(dom.dataset.user);//hello
dom.dataset.user = '张三';
console.log(dom.dataset.user);//张三
通过这个方法获取和修改自定义属性
2.获取标签内的文本
正常情况下
<p id="ls">hello</p>
var dom = document.getElementById('ls')
console.log(dom.innerText);//hello
特殊情况
下面这种布局方式一般不会出现
<div id="ls">hello<span>你好</span></div>
//如果我们想要只获取元素里的hello，不获取span标签里的内容
var dom = document.getElementById('ls')
console.log(dom.innerText);//hello 你好
console.dir(dom.childNodes[0].data)//hello
这时候就无法通过innerText来获取了，要换获取方式
获取
先找到所有子节点
45.png
console.dir(dom.childNodes[0])
//查看第一个子节点，再获取这个节点中的data属性即可
111.png
