HTML DOM 属性 对象

HTML DOM 属性对象是一种 JavaScript 对象，它可以允许我们直接访问和修改 HTML 元素的属性。在HTML DOM 中，每个 HTML 元素都有一个与之对应的属性对象。

属性对象的层次结构由 HTML 元素的结构树而定义。例如，假如你想修改一个 HTML img 元素的src属性，您需要通过属性对象先访问到这个元素，然后才能修改它的src属性。

属性对象的方法和属性可以用来访问和修改属性值，以及在 HTML 分类列表中浏览 HTML 元素节点。

比如下面的例子，获取一个 HTML 元素的属性对象：

const element = document.getElementById('myElement');
const attrs = element.attributes;

在上面的例子中，我们首先通过getElementById()方法获取一个ID为 ‘myElement’的 HTML 元素，然后通过attributes属性获取到属性对象来访问和修改它的属性。

下面是属性对象的常用方法和属性：

属性对象的属性

  • nodeValue: 返回属性值，或设置属性值。

  • nodeName: 返回属性的名称。

  • ownerElement: 返回属性所属的元素，如果属性不是属于元素，则返回null。

属性对象的方法

  • getAttribute(): 返回属性的值。

  • setAttribute(): 设置属性的值。

  • removeAttribute(): 移除属性。

  • hasAttribute(): 检查是否存在指定的属性。

下面是属性对象的示例代码：

<!DOCTYPE html>
<html>
<body>
    <p id="demo">Hello World!</p>
    <script>
        const p = document.getElementById("demo");

        // 获取属性对象
        const attr = p.attributes;

        // 获取nodeName和nodeValue
        for (let i = 0; i < attr.length; i++) {
            console.log(attr[i].nodeName + " = " + attr[i].nodeValue);
        }

        // 设置属性值
        p.setAttribute("class", "myClass");

        // 获取属性值
        const x = p.getAttribute("class");
        console.log(x); //输出: myClass

        // 检查属性是否存在
        const hasClass = p.hasAttribute("class");
        console.log(hasClass); //输出：true

        // 移除属性
        p.removeAttribute("class");

        // 检查属性是否存在
        const hasClass2 = p.hasAttribute("class");
        console.log(hasClass2); //输出：false
    </script>
</body>
</html>

在这个例子中，我们首先获取了一个 P 元素的属性对象，并且遍历它来获取 nodeName 和 nodeValue。然后，我们通过setAttributes()方法来为该元素设置class属性，并通过 getAttribute() 来获取它的值。接下来，我们通过hasAttribute() 方法检测该元素是否有class属性，并通过removeAttribute()方法来移除它。

属性对象可以让我们在 JavaScript 中轻松访问和操作 HTML 元素的属性，是前端工程师的必备技能之一。

HTML DOM 对象 HTML DOM 引用p标签 对象