【JavaScript入门-26】DOM中内置的属性以及自定义属性

在之前的文章中，我们用到了innerText和textContent，classList。这些都被称为属性。属性主要用来记录元素的信息。例如元素的class src alt在DOM中都有对应的属性！在上文中我们有一个图片

    <img width="200" height="200" class="img-style" src="" />

现在我想使用js给它添加一个alt属性，可以这么写：

      img.alt="这是图片的alt"

我们也可以这样设置图片的宽度，添加下面的代码。

img.width=1000

同样的我们可以通过img.width来获取图片的宽度。这是因为大部分的属性都是getter和setter。

img.width

当然了还有一些属性是能进行读取！例如naturalWidth

console.log("图片的原始宽度",img.naturalWidth)

这个属性是用来记录图片的原始尺寸的！且必须等待图片全部现在完成才能获取到正确的值。

对于具有getter和setter的属性，我们可以直接进行赋值和读取，但是还有属性是无法直接操作的。我们可以使用getAttribue setAttribute来进行操作。

例如上面的alt，我们还可以使用

      img.setAttribute('alt','这是使用setAttribute的alt')

data-*

上面我们主要介绍的自带的一些属性。当然我们还可以使用data-*来自定义属性！

我们来演示一个例子：

    <img data-name="卡通头像"width="200" height="200" class="img-style" src="" />

查看元素，data-name可以成功添加！

现在我想获取data-name的值，首先需要获取到元素！

 const img = document.querySelector(".img-style");

在img对象上，有一个dataset属性，它保存着所有data-*的是。

      console.log("data-*",img.dataset);

了解了，data-*的用法，有的人会问了，自定义属性的场景是什么？这里我们说一个最常见的场景-“图片懒加载”

页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，只有通过javascript设置了图片路径，浏览器才会发送请求。所以懒加载基本的原理就是用dataset自定义属性取代src存储图片的路径，然后在检测到图片进入到可视区域的时候，再将其换为src