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