คัดลอกรหัสรหัสดังต่อไปนี้:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
<title>แอตทริบิวต์การดำเนินการ 20120430dom node.htm</title>
<meta http-equiv="Content-Type" content="text/html; chareset=utf-8"/>
<script type="text/javascript">
//แม้ว่า Attr (แอตทริบิวต์) จะเป็นโหนด แต่ก็ไม่สามารถเข้าถึงได้โดยใช้ firstChild และ childNodes
ฟังก์ชั่น testBtn() {
// var myNode = document.getElementById("btn");//รับแท็กองค์ประกอบ
// var myNodeName = myNode.nodeName; // รับชื่อของป้ายกำกับด้านบนเป็นปุ่ม
// var x = myNode.attributes["onclick"].nodeType; //atrributes เป็นอาร์เรย์ของแอตทริบิวต์ ความหมายของประโยคนี้คือการค้นหา nodeType=2 ที่มีป้ายกำกับ 'btn' เป็นแอตทริบิวต์
// ถ้า (x == 2) {
// alert("คุณกำลังเข้าถึงโหนดแอตทริบิวต์!");
-
//ต่อไปนี้เป็นรหัสในการปรับเปลี่ยนคุณสมบัติของโหนด==================================== ==== =========================
//================================================ ============================================
var myNode = document.getElementById("btn");//รับแท็กองค์ประกอบ
var x = myNode.getAttribute("id");//รับแอตทริบิวต์ id ของป้ายกำกับ
myNode.setAttribute("value", "test");//แก้ไขแอตทริบิวต์ id ของป้ายกำกับ
var y = myNode.getAttribute("ค่า");
alert("แอตทริบิวต์ของ id เปลี่ยนจาก "" + x + "" เป็น "" + y + """);
//ต่อไปนี้คือการเพิ่มแอตทริบิวต์ให้กับองค์ประกอบ======================================= === ============================
//================================================ ============================================
var myAtrr = document.createAttribute("คลาส");
myAtrr.nodeValue = "คลาสสไตล์";
myNode.setAttribute(myAtrr);
//ความแตกต่างระหว่าง getAttributeNode และ getAttribute คือการได้รับค่าแอตทริบิวต์ - getAttribute()
//getAttribute("") วิธีการส่งกลับค่าของแอตทริบิวต์
//รับค่าแอตทริบิวต์ - getAttributeNode()
//getAttributeNode("") วิธีการส่งคืนโหนดแอตทริบิวต์ getAttributeNode('').value รับค่าโหนด
//ผลลัพธ์ของเบราว์เซอร์ที่แตกต่างกันจะแตกต่างกัน ฉันจะไม่ทำการวิจัยเชิงลึกที่นี่============================= ====== ==============
ถ้า (myNode.getAttributeNode("คลาส") != null)
alert("เพิ่มเรียบร้อยแล้ว!!");
อื่น
alert("เพิ่มข้อมูลไม่สำเร็จ");
//ต่อไปนี้เป็นค่าของแอตทริบิวต์ที่ถูกลบ======================================= === =================================
//================================================ ===========================================
// myNode.removeAttribute("คลาส");
// ถ้า (myNode.getAttribute("คลาส") == null)
// alert("ลบสำเร็จ!!");
//อื่น
// alert("ไม่สำเร็จ");
var delNode=myNode.getAttributeNode("คลาส");
ถ้า (myNode.getAttribute("คลาส") == null)
alert("ลบสำเร็จ!!");
อื่น
alert("ไม่สำเร็จ");
-
</สคริปต์>
</หัว>
<ร่างกาย>
<h1>บทที่ 2 เกี่ยวกับโดม</h1>
<p id="p1">บทนำโดม</p>
<p>วิธีใช้ <a href="#" name="link">dom</a></p>
<input id="btn" type="button" onclick="testBtn()" value="ทดสอบ"/>
</ร่างกาย>
</html>
ให้ความสนใจกับความแตกต่างระหว่างวิธีพารามิเตอร์ที่มีโหนดและไม่มีโหนด