แอตทริบิวต์และคุณสมบัติขององค์ประกอบ DOM นั้นง่ายต่อการผสมเข้าด้วยกันและไม่สามารถแยกแยะได้ ทั้งสองเป็นสิ่งที่แตกต่างกัน แต่ทั้งสองมีความสัมพันธ์กันอย่างใกล้ชิด เพื่อนใหม่หลายคนรวมถึงฉันในอดีตมักจะไม่เข้าใจ
แอตทริบิวต์ถูกแปลเป็นคำว่า "ลักษณะ" ของจีนและทรัพย์สินได้รับการแปลเป็นคำว่า "แอตทริบิวต์" ภาษาจีน จากความหมายที่แท้จริงของจีนมีความแตกต่างเล็กน้อย มาพูดถึงคุณลักษณะก่อน
แอตทริบิวต์เป็นโหนดคุณสมบัติ แต่ละองค์ประกอบ DOM มีแอตทริบิวต์แอตทริบิวต์ที่สอดคล้องกันเพื่อจัดเก็บโหนดแอตทริบิวต์ทั้งหมด แอตทริบิวต์เป็นคอนเทนเนอร์ของคลาสอาร์เรย์ เพื่อความแม่นยำมันคือ namenodemap ในระยะสั้นมันเป็นภาชนะที่คล้ายกับอาร์เรย์ แต่ไม่เหมือนกับอาร์เรย์ ดัชนีตัวเลขแต่ละตัวของแอตทริบิวต์จะเก็บโหนดแอตทริบิวต์ในรูปแบบของคู่ชื่อชื่อ (name =” value”)
คัดลอกรหัสดังนี้: <div id = "box" gameid = "880"> สวัสดี </div>
รหัส HTML ขององค์ประกอบ DIV ข้างต้นประกอบด้วยคลาส, ID และ Custom GameID คุณสมบัติเหล่านี้ถูกเก็บไว้ในแอตทริบิวต์คล้ายกับแบบฟอร์มต่อไปนี้:
คัดลอกรหัสดังนี้: [, id = "box", gameid = "880"]
คุณสามารถเข้าถึงโหนดแอตทริบิวต์เช่นนี้:
การคัดลอกรหัสมีดังนี้:
var elem = document.getElementById ('Box');
console.log (elem.attributes [0] .name); // ระดับ
console.log (elem.attributes [0] .Value); // กล่อง
อย่างไรก็ตาม IE6-7 จัดเก็บหลายสิ่งหลายอย่างในแอตทริบิวต์และวิธีการเข้าถึงด้านบนนั้นแตกต่างจากผลลัพธ์การส่งคืนของเบราว์เซอร์มาตรฐาน โดยปกติคุณจะต้องได้รับโหนดแอตทริบิวต์และใช้วิธี getAttribute โดยตรง:
คัดลอกรหัสดังนี้: console.log (elem.getAttribute ('gameid')); // 880
ในการตั้งค่าโหนดแอตทริบิวต์เพื่อใช้วิธีการ setattribute ให้ใช้ RemoveAttribute เพื่อลบ:
การคัดลอกรหัสมีดังนี้: elem.setAttribute ('testattr', 'testVal');
console.log (elem.removeattribute ('gameid')); // ไม่ได้กำหนด
แอตทริบิวต์จะได้รับการอัปเดตแบบไดนามิกเนื่องจากโหนดแอตทริบิวต์จะถูกเพิ่มหรือลบออก
คุณสมบัติเป็นทรัพย์สิน หากองค์ประกอบ DOM ถือเป็นวัตถุวัตถุธรรมดาคุณสมบัติเป็นคุณสมบัติที่เก็บไว้ในวัตถุในรูปแบบของคู่ชื่อชื่อ (name =” value”) มันง่ายกว่ามากในการเพิ่มและลบคุณสมบัติและไม่แตกต่างจากวัตถุธรรมดา:
การคัดลอกรหัสมีดังนี้:
elem.gameid = 880; // เพิ่ม
console.log (elem.gameid) // รับ
ลบ elem.gameid // ลบ
เหตุผลที่แอตทริบิวต์และคุณสมบัติเป็นเรื่องง่ายที่จะผสมเข้าด้วยกันคือโหนดแอตทริบิวต์จำนวนมากมีคุณสมบัติคุณสมบัติที่สอดคล้องกันเช่น ID และคลาสขององค์ประกอบ DIV ด้านบนเป็นทั้งแอตทริบิวต์และคุณสมบัติที่สอดคล้องกันซึ่งสามารถเข้าถึงและแก้ไขได้ไม่ว่าจะใช้วิธีใด
การคัดลอกรหัสมีดังนี้:
console.log (elem.getAttribute ('id')); // กล่อง
console.log (elem.id); // กล่อง
elem.id = 'สวัสดี';
console.log (elem.getAttribute ('id')); // สวัสดี
แต่สำหรับโหนดแอตทริบิวต์ที่กำหนดเองหรือคุณสมบัติที่กำหนดเองทั้งสองไม่มีส่วนเกี่ยวข้องกัน
การคัดลอกรหัสมีดังนี้:
console.log (elem.getattribute ('gameid')); // 880
console.log (elem.gameid); // ไม่ได้กำหนด
Elem.Areaid = '900';
console.log (elem.getAttribute ('saileid')) // null
สำหรับ IE6-7 ไม่มีความแตกต่างระหว่างแอตทริบิวต์และคุณสมบัติ:
การคัดลอกรหัสมีดังนี้:
console.log (elem.getattribute ('gameid')); // 880
console.log (elem.gameid); // 880
Elem.Areaid = '900';
console.log (elem.getAttribute ('พื้นที่')) // 900
สามเณรหลายคนอาจตกอยู่ในหลุมนี้ได้อย่างง่ายดาย
บางโหนดแอตทริบิวต์ทั่วไปขององค์ประกอบ DOM มีคุณสมบัติคุณสมบัติที่สอดคล้องกัน สิ่งที่พิเศษกว่าคือคุณสมบัติบางอย่างที่มีค่าของประเภทบูลีนเช่นองค์ประกอบบางรูปแบบ:
การคัดลอกรหัสมีดังนี้:
<อินพุต type = "วิทยุ" checked = "ตรวจสอบ" id = "raido">
var radio = document.getElementById ('วิทยุ');
console.log (Radio.getAttribute ('Checked')); // ตรวจสอบ
console.log (Radio.Checked); // จริง
สำหรับโหนดแอตทริบิวต์พิเศษเหล่านี้เฉพาะในกรณีที่โหนดนี้มีอยู่ค่าคุณสมบัติที่สอดคล้องกันเป็นจริงเช่น:
การคัดลอกรหัสมีดังนี้:
<อินพุต type = "วิทยุ" checked = "อะไรก็ได้" id = "raido">
var radio = document.getElementById ('วิทยุ');
console.log (Radio.getAttribute ('Checked')); // อะไรก็ตาม
console.log (Radio.Checked); // จริง
ในที่สุดเพื่อแยกแยะความแตกต่างระหว่างแอตทริบิวต์และคุณสมบัติได้ดีขึ้นโดยทั่วไปสามารถสรุปได้ว่าโหนดแอตทริบิวต์สามารถมองเห็นได้ในรหัส HTML และคุณสมบัติเป็นเพียงแอตทริบิวต์คู่ชื่อปกติ
การคัดลอกรหัสมีดังนี้:
// ทั้ง GameID และ ID เป็นโหนดแอตทริบิวต์
// id ยังสามารถเข้าถึงและแก้ไขผ่านคุณสมบัติ
<div gameid = "880" id = "box"> สวัสดี </div>
// AreaID เป็นเพียงทรัพย์สิน
Elem.Areaid = 900;