1. คำจำกัดความ
คุณสมบัติ: คุณสมบัติองค์ประกอบ HTML ทั้งหมดจะแสดงด้วยประเภท HTMLELEMENT ประเภท HTMLELEMENT โดยตรงสืบทอดมาจากองค์ประกอบและเพิ่มแอตทริบิวต์บางอย่าง แอตทริบิวต์ที่เพิ่มเข้ามาสอดคล้องกับแต่ละองค์ประกอบ HTML ที่มีคุณสมบัติมาตรฐาน 5 ข้อต่อไปนี้: id, ชื่อ, lang, dir, classname โหนด DOM เป็นวัตถุดังนั้นจึงสามารถเพิ่มคุณสมบัติและวิธีการที่กำหนดเองเช่นวัตถุ JavaScript อื่น ๆ ค่าของคุณสมบัติสามารถเป็นชนิดข้อมูลใด ๆ ซึ่งเป็นตัวพิมพ์เล็กและคุณสมบัติที่กำหนดเองจะไม่ปรากฏในรหัส HTML แต่มีอยู่ใน JS เท่านั้น
แอ็ตทริบิวต์: คุณสมบัติที่แตกต่างจากคุณสมบัติแอตทริบิวต์สามารถเป็นสตริง, ตัวพิมพ์ใหญ่ที่ปรากฏใน InnerHTML และแอตทริบิวต์ทั้งหมดสามารถแสดงรายการผ่านแอตทริบิวต์อาร์เรย์คลาส
2. ความคล้ายคลึงกัน
คุณสมบัติ DOM มาตรฐานถูกซิงโครไนซ์กับแอตทริบิวต์ แอตทริบิวต์ที่ได้รับการยอมรับ (ไม่ใช่ลูกค้า) จะถูกเพิ่มลงในวัตถุ DOM เป็นคุณสมบัติ ตัวอย่างเช่น ID, จัดตำแหน่ง, สไตล์, ฯลฯ ในเวลานี้คุณสมบัติสามารถดำเนินการได้โดยวิธีการทำงานหรือวิธีการ DOM เช่น getAttribute () ที่ใช้คุณสมบัติการทำงาน อย่างไรก็ตามชื่อแอตทริบิวต์ที่ส่งผ่านไปยัง GetAttribute () เหมือนกับชื่อแอตทริบิวต์จริง ดังนั้นเมื่อได้รับค่าลักษณะของชั้นเรียนคุณจะต้องผ่าน "คลาส"
3. ความแตกต่าง
1). สำหรับลักษณะมาตรฐานบางอย่างมีความแตกต่างในค่าที่ได้รับจาก GetAttribute และ Point (.) เช่น HREF, SRC, Value, Style, OnClick และตัวจัดการกิจกรรมอื่น ๆ
2) .Href: GetAttribute ได้รับค่าที่แท้จริงของ HREF ในขณะที่ DOTS ได้รับ URL ที่สมบูรณ์ซึ่งมีความแตกต่างของเบราว์เซอร์
การคัดลอกรหัสมีดังนี้:
<script>
var a = document.body.children [0]
a.href = '/'
การแจ้งเตือน ('แอตทริบิวต์:' + A.GetAttribute ('href'))) // '/'
การแจ้งเตือน ('คุณสมบัติ:' + a.href) // เช่น: '/', อื่น ๆ : URL เต็มรูปแบบ
</script>
ค่าของ SRC นั้นคล้ายกับ HREF แต่เช่นจะคืน URL เต็มรูปแบบ
ค่าค่ายังมีคุณสมบัติในตัวสำหรับการซิงโครไนซ์ 'ทางเดียว' (ทางเดียว)
ตัวอย่างเช่น input.value ซิงโครไนซ์จากแอตทริบิวต์ (เช่นคุณสมบัติได้รับการซิงโครไนซ์จากแอตทริบิวต์)
การคัดลอกรหัสมีดังนี้:
<อินพุต type = "text" value = "Markup">
<script>
var input = document.body.children [0];
input.setAttribute ('value', 'ใหม่');
การแจ้งเตือน (input.value); // 'ใหม่', input.value เปลี่ยนไป
การแจ้งเตือน (input.getAtrrioBute (ค่า)); // 'ใหม่'
</script>
แต่แอตทริบิวต์ไม่สามารถรับการซิงโครไนซ์จากคุณสมบัติ:
การคัดลอกรหัสมีดังนี้:
<อินพุต type = "text" value = "Markup">
<script>
var input = document.body.children [0];
input.value = 'ใหม่';
การแจ้งเตือน (input.getAttribute ('value')); // 'มาร์กอัป' ไม่เปลี่ยนแปลง!
</script>
GetAttribute ได้รับค่าเริ่มต้นในขณะที่จุดจะได้รับค่าเริ่มต้นหรือค่า. VALUE ที่แก้ไขแล้ว ตัวอย่างเช่นเมื่อผู้เข้าชมป้อนอักขระบางตัวแอตทริบิวต์ 'ค่า' จะรักษาค่าดั้งเดิมหลังจากอัพเดทคุณสมบัติ ค่าดั้งเดิมสามารถใช้เพื่อตรวจสอบว่าการเปลี่ยนแปลงอินพุตหรือเพื่อรีเซ็ต
สำหรับตัวจัดการเหตุการณ์เช่น Style และ OnClick วิธีการ getAttribute จะส่งคืนสตริงเมื่อเข้าถึงในขณะที่ DOT ส่งคืนวัตถุที่เกี่ยวข้องและฟังก์ชั่นตัวจัดการเหตุการณ์ที่เกี่ยวข้อง
สำหรับคุณสมบัติที่ตรวจสอบในอินพุต
การคัดลอกรหัสมีดังนี้:
<script>
var input = document.body.children [0]
Alert (input.chected) // true
Alert (input.getAttribute ('ตรวจสอบ')) // สตริงว่างเปล่า
</script>
GetAttribute ได้รับค่าที่คุณตั้งค่าจริง จุดส่งคืนค่าบูลีน
ความแตกต่างของความเข้ากันได้ของเบราว์เซอร์
1. ใน IE <9 เบราว์เซอร์คุณสามารถใช้หมายเลข DOT และ GetAttribute เพื่อเข้าถึงคุณสมบัติที่กำหนดเองระหว่างกัน
2. IE <8 (รวมถึงโหมดความเข้ากันได้ของ IE8 IE7) คุณสมบัติและแอตทริบิวต์เหมือนกัน เนื่องจากแอตทริบิวต์ไม่ใช่ตัวพิมพ์เล็กในกรณีนี้เมื่อใช้ GetAttribute เพื่อเข้าถึงคุณสมบัติเบราว์เซอร์จะเลือกค่าที่ปรากฏเป็นครั้งแรก
การคัดลอกรหัสมีดังนี้:
document.body.abba = 1 // กำหนดคุณสมบัติ (ตอนนี้สามารถอ่านได้โดย getAttribute)
document.body.abba = 5 // กำหนดคุณสมบัติกับกรณีอื่น
// ต้องได้รับทรัพย์สินที่ชื่อว่า 'ABBA' ในวิธีที่ไม่รู้สึกตัว
Alert (document.body.getattribute ('abba')) // 1
คุณสมบัติลำดับความสำคัญ
ในแอปพลิเคชันจริง 98% ของการดำเนินงาน DOM ใช้คุณสมบัติ
มีเพียงสองสถานการณ์ที่ต้องใช้คุณลักษณะ
1. ปรับแต่งแอตทริบิวต์ HTML เนื่องจากไม่ได้ซิงโครไนซ์กับคุณสมบัติ DOM
2. เข้าถึงแอตทริบิวต์ HTML ในตัวซึ่งไม่สามารถซิงโครไนซ์จากคุณสมบัติได้ ตัวอย่างเช่นค่าค่าของแท็กอินพุต