ดอม
DOM: โมเดลวัตถุเอกสาร;
โหนด
โหนดองค์ประกอบ: อะตอมของ DOM คือโหนดองค์ประกอบ องค์ประกอบเช่น <body>, <p>, <ul>, ฯลฯ องค์ประกอบสามารถมีองค์ประกอบอื่น ๆ ได้ องค์ประกอบเดียวที่ไม่รวมอยู่ในองค์ประกอบอื่นคือองค์ประกอบ <html>
โหนดข้อความ: ในเอกสาร XHTML โหนดข้อความจะรวมอยู่ในโหนดองค์ประกอบเสมอ
โหนดแอตทริบิวต์: โหนดแอตทริบิวต์ใช้เพื่อให้คำอธิบายเฉพาะขององค์ประกอบมากขึ้น ตัวอย่างเช่นเกือบทุกองค์ประกอบมีแอตทริบิวต์ชื่อเรื่องและเราสามารถใช้แอตทริบิวต์นี้เพื่ออธิบายสิ่งที่มีอยู่ในองค์ประกอบได้อย่างถูกต้อง:
<p> อย่าลืมซื้อสิ่งนี้ </p>
ใน DOM, title = "A Gentle Reminder" เป็นโหนดแอตทริบิวต์
CSS
รับองค์ประกอบ
GetElementById, GetElementsByTagname, GetElementsByClassName สามวิธีเพื่อรับโหนดองค์ประกอบ
GetElementsByTagname อนุญาตให้ WildCard เป็นพารามิเตอร์ซึ่งหมายความว่าแต่ละองค์ประกอบในเอกสารจะมีสถานที่ในอาร์เรย์ที่ส่งคืนโดยฟังก์ชั่น WildCards ("*") ต้องอยู่ในราคาซึ่งจะแตกต่างจากการคูณการคูณ
คุณยังสามารถใช้ GetElementById และ GetElementsByTagname ดังที่แสดงด้านล่าง:
การคัดลอกรหัสมีดังนี้:
var Shopping = document.getElementById ("ซื้อ");
รายการ var = shopping.getElementsByTagname ("*");
วิธีนี้คุณจะได้รับองค์ประกอบองค์ประกอบที่มีการซื้อมูลค่าแอตทริบิวต์ ID จำนวนเท่าใด
วิธี getElementsByClassName ได้รับการสนับสนุนโดยเบราว์เซอร์ใหม่เท่านั้น ในการทำสิ่งนี้โปรแกรมเมอร์ DOM Script จำเป็นต้องใช้วิธีการ DOM ที่มีอยู่เพื่อใช้งาน GetElementsByClassName ของตนเอง ในกรณีส่วนใหญ่กระบวนการดำเนินการของพวกเขาจะคล้ายกับ getElementsByClassName ต่อไปนี้:
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น getElementsByClassName (โหนด, className) {
if (node.getElementsByClassName) {
ส่งคืน node.getElementsByClassName (className);
}อื่น{
ผลลัพธ์ var = new Array ();
var elems = node.getElementsByTagname ("*");
สำหรับ (var i = 0; i <elems.length; i ++) {
if (elems [i] .classname.indexof (classname)! = -1) {
ผลลัพธ์ [results.length] = elems [i];
-
-
ผลลัพธ์กลับมา;
-
-
ฟังก์ชั่น getElementsByClassName ยอมรับพารามิเตอร์สองพารามิเตอร์ โหนดแรกแสดงถึงจุดเริ่มต้นของการค้นหาในแผนผัง DOM และชื่อคลาสที่สองคือชื่อคลาสที่จะค้นหา
รับและตั้งค่าคุณสมบัติ
GetAttribute เป็นฟังก์ชั่นที่มีพารามิเตอร์เดียวเท่านั้น - ชื่อของแอตทริบิวต์ที่คุณวางแผนจะสอบถาม:
การคัดลอกรหัสมีดังนี้:
Object.getAttribute (แอตทริบิวต์)
SetAttribute () ช่วยให้เราสามารถแก้ไขค่าของโหนดแอตทริบิวต์ หลังจากแก้ไขเอกสารผ่าน setAttribute เมื่อดูซอร์สโค้ดของเอกสารผ่านตัวเลือกแหล่งมุมมองของเบราว์เซอร์สิ่งที่คุณเห็นจะยังคงเป็นค่าคุณสมบัติก่อนหน้านั่นคือการแก้ไขที่ทำโดย setAttribute จะไม่ถูกสะท้อนในซอร์สโค้ดของเอกสาร ปรากฏการณ์นี้ของ "ไม่สอดคล้องกันภายในและภายนอก" มาจากโหมดการทำงานของ DOM: โหลดเนื้อหาคงที่ของเอกสารก่อนจากนั้นรีเฟรชแบบไดนามิกแบบไดนามิกจะไม่ส่งผลกระทบต่อเนื้อหาคงที่ของเอกสาร นี่คือพลังที่แท้จริงของ DOM: การรีเฟรชเนื้อหาหน้าโดยไม่ต้องรีเฟรชหน้าในเบราว์เซอร์