HTML - DOM 属性

HTML DOM 的attributes 属性允许您访问属于 HTML 元素的属性集合。此集合作为 NamedNodeMap 返回，允许您使用其名称与属性交互并检索其值。

NamedNodeMap 是一个对象，它保存元素属性的集合。它允许我们通过名称索引访问属性，并支持各种操作。

语法

以下是 HTML DOM 的attributes 属性的语法：

node.attributes

参数

由于它是一个属性，因此不接受任何参数。

返回值

此属性返回包含 HTML 元素属性集合的 'NameNodeMap'，如果元素没有属性则返回 'null'

示例 1：修改 p 元素的属性

以下示例演示了 HTML DOM 的attributes 属性的用法。它修改了<p> 元素的内容：

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM attributes</title>
<style>
   .highlight {
      background-color: yellow;
    }
</style>
</head>
<body>
<p></p>Modifies attributes of the P Element</p>
<p id="myParagraph">Example Text</p>
<button onclick="modifyParagraph()">Modify</button>
<script>
   function modifyParagraph() {
      var paragraph = document.getElementById("myParagraph");
      paragraph.setAttribute("title", "Modified"); 
      paragraph.textContent = "Modified Text";
      paragraph.classList.add("highlight");
    }
</script>
</body>
</html>

示例 2：检查属性是否存在

以下是 HTML DOM 的attributes 属性的另一个示例。此属性用于检查段落元素上是否存在“title”属性：

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Attributes</title>
</head>
<body>
</p>Checking for attribute Existence</p>
<p id="myParagraph" title="Example Title">Example Text</p>
<button onclick="checkAttributeExistence()">Check Attribute</button>  
<script>
   function checkAttributeExistence() {
      var paragraph = document.getElementById("myParagraph");
      var hasTitle = paragraph.hasAttribute("title");
      alert("Title Attribute Exists: " + hasTitle);
   }
</script>
</body>
</html>

示例 3：从 HTML 元素检索属性列表

下面的示例检索并显示 HTML <div> 元素的所有属性。单击按钮时，所有属性都将以列表格式显示：

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM attributes</title>
</head>
<body>
<div id="ex-Div"class="example" data-info="ex-data">
Hit the button to see the Div Elements...
</div>
<button onclick="showAttributes()">Show Attributes</button>
<ul id="attributeList"></ul>
<script>
   function showAttributes() {
      const element = document.getElementById('ex-Div');
      const attributeList = document.getElementById('attributeList');
      attributeList.innerHTML = '';
      for (let attr of element.attributes) {
         const li = document.createElement('li');
         li.textContent = `${attr.name}: 
         ${attr.value}`;
         attributeList.appendChild(li);
      }
   }
</script>
</body>
</html>

示例 4：获取特定属性值

此示例从 ID 为“myParagraph”的段落元素中检索 title 属性的值，并在警报中显示它：

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM attributes</title>
</head>
<body>
<p>Getting Specific Attribute</p>
<p id="myParagraph" title="Example Title">Example Text</p>
<button onclick="getAttributeValue()">Get Attribute Value</button>    
<script>
   function getAttributeValue() {
      var paragraph = document.getElementById("myParagraph");
      var titleValue =paragraph.getAttribute("title");
      alert("Title Attribute Value: " + titleValue);
   }
</script>
</body>
</html>

支持的浏览器

属性
attributes	是	是	是	是	是

html_dom_element_reference.htm

打印页面