Thuộc tính attributes trong HTML DOM

Thuộc tính attributes trong HTML DOM liên quan đến các thuộc tính bên trong thẻ HTML trả về bộ sưu tập các thuộc tính của một node dưới dạng đối tượng kiểu NamedNodeMap. Để truy cập các node này ta có thể dùng số chỉ mục (index). Chỉ mục bắt đầu từ 0.

Cú pháp

Cú pháp cho thuộc tính attributes HTML DOM:

node.attributes

Ví dụ

Dưới đây là ví dụ về thuộc tính attributes:

<!DOCTYPE html> <html> <body> <p>Click nút để lấy thuộc tính thứ hai của danh sách dưới</p> <button id="Btn" onclick="attributeFunc()">TÊN ATTR</button> <button id="Btn" onclick="attrLength()">ĐỘ DÀI ATTR</button> <ol id="LIST" type="A" start="5" reversed> <li>MỘT</li> <li>HAI</li> <li>BA</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>

Kết quả

Ví dụ này sẽ cho kết quả sau:

Sau khi click nút TÊN ATTR:

Sau khi click nút ĐỘ DÀI ATTR:

Giải thích ví dụ:

Tạo ordered list với thuộc tính id, type, start và reversed:

<ol id="LIST" type="A" start="5" reversed> <li>MỘT</li> <li>HAI</li> <li>BA</li> </ol>

Hai nút TÊN ATTR và ĐỘ DÀI ATTR thực thi attributeFunc() và attrLength():

<button id="Btn" onclick="attributeFunc()">TÊN ATTR</button> <button id="Btn" onclick="attrLength()">ĐỘ DÀI ATTR</button>

attributeFunc() lấy phần tử id “LIST”, lấy tên thuộc tính thứ 2 (index 2) bằng attributes.name. Tên thuộc tính tại index 2 hiển thị trong đoạn văn id “Sample”:

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

attrLength() lấy phần tử id “LIST”, lấy số lượng thuộc tính bằng attributes.length (trả về 4). Giá trị 4 hiển thị trong đoạn văn id SAMPLE:

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