คุณสมบัติแอตทริบิวต์ HTML DOM ที่เชื่อมโยงกับแอตทริบิวต์ภายในแท็ก HTML ส่งคืนคอลเลกชันของแอตทริบิวต์ของโหนดที่กำหนดในรูปแบบของวัตถุประเภท NamedNodeMap ในการเข้าถึงโหนดเหล่านี้ เราสามารถใช้หมายเลขดัชนีได้ การจัดทำดัชนีเริ่มต้นจาก 0
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับคุณสมบัติแอตทริบิวต์ HTML DOM -
node.attributes
ตัวอย่าง
ให้เราดูตัวอย่างคุณสมบัติคุณสมบัติ −
<!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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
หลังจากคลิกที่ปุ่ม ATTR NAME -
หลังจากคลิกที่ปุ่ม ATTR LENGTH -
ในตัวอย่างข้างต้น −
ขั้นแรก เราได้สร้างรายการเรียงลำดับด้วยแอตทริบิวต์ id ประเภท และแอตทริบิวต์ที่ย้อนกลับ
<ol id="LIST" type="A" start="5" reversed> <li>ONE</li> <li>TWO</li> <li>THREE</li> </ol>
จากนั้นเราได้สร้างปุ่ม ATTR NAME และ ATTR LENGTH สองปุ่มเพื่อเรียกใช้ฟังก์ชัน attributeFunc() และ attrLength() ตามลำดับ
<button id="Btn" onclick="attributeFunc()">ATTR NAME</button> <button id="Btn" onclick="attrLength()">ATTR LENGTH</button>
ฟังก์ชัน attributeFunc() รับองค์ประกอบที่มี id “LIST” ที่เชื่อมโยงกับมัน และรับชื่อแอตทริบิวต์ที่ 2 ด้วยคุณสมบัติ attributes.name จากนั้นชื่อแอตทริบิวต์ที่ดัชนีที่ 2 จะแสดงในย่อหน้าที่มีรหัส "ตัวอย่าง" −
function attributeFunc() {
var x = document.getElementById("LIST").attributes[2].name;
document.getElementById("SAMPLE").innerHTML = x;
} ฟังก์ชัน attrLenght() ยังรับองค์ประกอบที่มี id “LIST” เชื่อมโยงอยู่ และรับจำนวนแอตทริบิวต์ที่องค์ประกอบเฉพาะมีโดยใช้ attributes.length ซึ่งจะคืนค่า 4 ในกรณีของเรา ค่า 4 จะแสดงในย่อหน้าด้วย id SAMPLE -
function attrLength(){
var x = document.getElementById("LIST").attributes.length;
document.getElementById("SAMPLE").innerHTML = x;
} 