Thuộc tính DOM HTML Thuộc tính

Thuộc tính HTML DOM thuộc tính được liên kết với các thuộc tính trong thẻ HTML trả về một tập hợp các thuộc tính của một nút nhất định dưới dạng một đối tượng của loại NamedNodeMap. Để truy cập các nút này, chúng ta có thể sử dụng các số chỉ mục. Việc lập chỉ mục bắt đầu từ 0.

Cú pháp

Sau đây là cú pháp cho thuộc tính HTML DOM thuộc tính -

node.attributes

Ví dụ

Hãy để chúng tôi xem một ví dụ về thuộc tính thuộc tính -

<!DOCTYPE html>
<html>
<body>
<p>Click the button the second attribute of the below list</p>
<button id="Btn" onclick="attributeFunc()">ATTR NAME</button>
<button id="Btn" onclick="attrLength()">ATTR LENGTH</button>
<ol id="LIST" type="A" start="5" reversed>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ol>
<p id="SAMPLE"></p>
<script>
   function attributeFunc() {
      var x = document.getElementById("LIST").attributes[2].name;
      document.getElementById("SAMPLE").innerHTML = x;
   }
   function attrLength(){
      var x = document.getElementById("LIST").attributes.length;
      document.getElementById("SAMPLE").innerHTML = x;
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Thuộc tính DOM HTML Thuộc tính

Sau khi nhấp vào nút TÊN ATTR -

Thuộc tính DOM HTML Thuộc tính

Sau khi nhấp vào nút ATTR LENGTH -

Thuộc tính DOM HTML Thuộc tính

Trong ví dụ trên -

Đầu tiên, chúng tôi tạo một danh sách có thứ tự với id thuộc tính, loại và thuộc tính đảo ngược.

<ol id="LIST" type="A" start="5" reversed>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ol>

Sau đó, chúng tôi tạo hai nút ATTR NAME và ATTR LENGTH để thực thi các hàm thuộc tính propertyFunc () và attrLength () tương ứng.

<button id="Btn" onclick="attributeFunc()">ATTR NAME</button>
<button id="Btn" onclick="attrLength()">ATTR LENGTH</button>

Hàm propertyFunc () nhận phần tử có id “LIST” được liên kết với nó và lấy tên thuộc tính thứ 2 của nó với thuộc tính properties.name. Tên thuộc tính ở chỉ mục thứ 2 sau đó được hiển thị trong đoạn văn với id “Mẫu” -

function attributeFunc() {
   var x = document.getElementById("LIST").attributes[2].name;
   document.getElementById("SAMPLE").innerHTML = x;
}

Hàm attrLenght () cũng nhận phần tử có id “LIST” được liên kết với nó và nhận số thuộc tính mà phần tử cụ thể có bằng cách sử dụng thuộc tính.length, trả về 4 trong trường hợp của chúng tôi. Giá trị 4 sau đó được hiển thị trong đoạn có id SAMPLE -

function attrLength(){
   var x = document.getElementById("LIST").attributes.length;
   document.getElementById("SAMPLE").innerHTML = x;
}