HTML - DOM 属性 (Attr)

文档对象模型 (DOM) 中的属性接口将元素的属性表示为一个对象。并且，此对象表示一个 HTML 属性，通过它我们可以控制 HTML 元素的功能。

元素的属性存储在一个类似数组的无序集合中，称为 NamedNodeMap。您可以使用其名称或索引访问此数组的节点。索引从 0 开始。

例如，<img> 元素的 src 属性定义了要显示的图像的路径。让我们看看如何获取 id 属性的名称 -

HTML DOM 属性 name 属性

点击下面的图片获取其属性

示例

上面示例的代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>HTML DOM Attribute name Property</title>
    <style>
        .my_exe{
            width: 95%;
            padding: 10px;
            margin: 5px auto;
            background-color: rgb(197, 245, 221);
            border-radius: 10px;
            box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
            font-family: sans-serif;
        }
        .my_exe h3, .my_exe p, .my_exe img{
            text-align: center;
            justify-content: center;
            align-items: center;
        }
        .my_exe img{
            border: 1px solid green;
            border-radius: 5px;
            cursor: pointer;
            padding: 10px;
        }
        .my_exe input{
            display: block;
            width: 350px;
            padding: 10px;
            font-size: 18px;
            border-radius: 5px;
            outline: none;
            border: none;
            display: flex;
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <div class="my_exe">
        <h3>HTML DOM Attribute name Property</h3>
        <p>Click on the below image to get it's attribute</p>
        <img id="demo" src="https://tutorialspoint.com/images/logo.png" alt="demo image" onclick="printAttribute()"/>
        <input type="text" id="attribute-box" placeholder="Attribute of img tag..." readonly/>
    </div>

    <script>
        function printAttribute() {
            const element = document.getElementById("demo");
            let aName = element.attributes[0].name;
            document.getElementById("attribute-box").value = aName;
        }
    </script>
</body>

</html>

HTML DOM 属性

下表包含 DOM 属性列表：

序号	属性和描述
1.	value 此属性用于设置或获取属性的值。
2.	specified 它检查是否指定了提到的属性。
3.	name 它用于获取元素上使用的属性的名称。
4.	isId 此属性确定 HTML 属性是否是“id”属性。

打印页面