โหนดหลักสามประเภท: โหนดองค์ประกอบโหนดแอตทริบิวต์และโหนดข้อความ
สิ่งสำคัญเกี่ยวกับ DOM คือการเพิ่มลบแก้ไขและตรวจสอบโหนดองค์ประกอบและโหนดแอตทริบิวต์ ต่อไปนี้จะแนะนำการดำเนินการบนโหนดองค์ประกอบและการดำเนินการบนโหนดแอตทริบิวต์ตามลำดับ
โหนดองค์ประกอบ
ตรวจสอบ
ก่อนที่จะเพิ่มการลบและแก้ไข DOM คุณต้องค้นหาองค์ประกอบที่เกี่ยวข้องก่อน วิธีการค้นหาเฉพาะมีดังนี้:
getElementById () // รับโหนดหนึ่ง getElementsByTagname () // รับโหนดโหนด nodelist getElementsByName () // รับ Node NodeList โหนด
ในเวลาเดียวกันคุณยังสามารถใช้แอตทริบิวต์ของโหนดองค์ประกอบเพื่อรับโหนดพาเรนต์และโหนดลูกและโหนดข้อความ:
โหนดเด็ก
node.childnodes // รับรายการโหนดลูก โปรดทราบว่าการแบ่งบรรทัดจะถูกนับเป็นโหนดข้อความในเบราว์เซอร์ หากคุณได้รับรายการโหนดด้วยวิธีนี้การกรองจำเป็นต้องมีโหนด FirstChild // ส่งคืนโหนดลูกแรกโหนด LastChild // ส่งคืนโหนดลูกสุดท้าย
โหนดแม่
node.parentNode // ส่งคืนโหนด parent node.ownerDocument // ส่งคืนโหนดบรรพบุรุษ (เอกสารทั้งหมด)
โหนดเพื่อนร่วมชาติ
node.previoussibling // ส่งคืนโหนดก่อนหน้าถ้าไม่ส่งคืน nullnode.nextsibling // ส่งคืนโหนดถัดไป
เพิ่มขึ้น
ในการเพิ่มโหนดใหม่คุณต้องสร้างโหนดก่อนจากนั้นแทรกโหนดที่สร้างขึ้นใหม่ลงใน DOM ดังนั้นสิ่งต่อไปนี้เป็นวิธีการสร้างโหนดและการแทรกโหนดและวิธีการจำลองโหนดก็ถูกนำมาใช้ในการสร้างโหนด
สร้างโหนด
createElement () // สร้างโหนดองค์ประกอบใหม่ตามชื่อแท็กที่ระบุ
สร้างตัวอย่างโค้ด (เพื่อหลีกเลี่ยงการรีเฟรชบ่อยครั้งของ DOM คุณสามารถสร้างตัวอย่างโค้ดก่อนจากนั้นเพิ่มลงใน DOM หลังจากเสร็จสิ้นการดำเนินการโหนดทั้งหมด)
createDocumentFragment ()
โหนดการจำลองแบบ
ClonedNode = node.clonenode (บูลีน) // มีพารามิเตอร์เดียวเท่านั้นส่งผ่านในค่าบูลีนจริงหมายถึงการคัดลอกโหนดเด็กทั้งหมดภายใต้โหนด; เท็จหมายถึงการคัดลอกเฉพาะโหนด
แทรกโหนด
/*แทรกโหนด*/parentNode.AppendChild (ChildNode); // ผนวกโหนดใหม่เข้าสู่ส่วนท้ายของรายการโหนดลูก parentnode.insertbefore (newNode, targetNode); // แทรก newNode ลงใน targetNode/*แทรกรหัส HTML*/node.insertadjacenthtml ('beforebegin', html); // แทรกรหัส Node.InsertAdjacenthtml ('Afterbegin', HTML); // แทรกรหัส Node.InsertAdjacenthtml ('Afterbegin', HTML); // แทรกรหัส node.insertadjacenthtml ('ก่อนหน้า', html); // แทรกรหัสหลังจากองค์ประกอบลูกสุดท้ายขององค์ประกอบ node.insertadjacenthtml ('afterend', html); // แทรกรหัสหลังจากองค์ประกอบแทนที่โหนด
ParentNode.replace (NewNode, TargetNode); // แทนที่ targetNode ด้วย newNode
ลบ
ลบโหนด
ParentNode.removeChild (เด็ก); // ลบโหนดเป้าหมาย Node.parentNode.removeChild (โหนด); // ใช้โดยไม่ทราบโหนดพาเรนต์
โหนดแอตทริบิวต์
โหนดแอตทริบิวต์การดำเนินการคือการเพิ่มลบแก้ไขและตรวจสอบสไตล์ DOM มีวิธีการทำงานที่แตกต่างกันสำหรับสไตล์ในบรรทัดสไตล์อินไลน์และสไตล์ภายนอก รูปแบบที่ได้จากวิธีการต่าง ๆ จะแบ่งออกเป็นอ่านได้เขียนได้และอ่านได้อย่างเดียว
รับสไตล์ CSS โดยตรง
node.style.color // อ่านได้หรือเขียนได้
คุณสมบัติและวิธีการของสไตล์เอง
node.style.csstext // รับสตริงสไตล์อินไลน์โหนด Node.style.length // รับจำนวนสไตล์อินไลน์ node.style.item (0) // รับสไตล์ที่ตำแหน่งที่ระบุ
รับและแก้ไขรูปแบบองค์ประกอบ
HTML5 ให้คุณลักษณะใหม่สำหรับองค์ประกอบ: ClassList เพื่อใช้การเพิ่มการลบการดัดแปลงและการค้นหาแผ่นสไตล์องค์ประกอบ การดำเนินการมีดังนี้:
node.classlist.add (ค่า); // เพิ่มคลาสที่ระบุ Node.ClassList.Contains (ค่า); // พิจารณาว่าองค์ประกอบมีคลาสที่ระบุหรือไม่ หากมี truenode.classlist.remove (ค่า); // ลบระดับคลาสที่ระบุ Node.ClassList.toggle (ค่า); // ลบหากมีคลาสที่แน่นอนและเพิ่มคลาสที่ระบุหากไม่มี
วิธีการแก้ไขลักษณะ DOM
node.getAttribute ('id') // รับ node.setAttribute ('id') // set node.removeattribute () // ลบ node.attributes // รับคุณสมบัติ DOM ทั้งหมดวิธีการอ่านอย่างเดียว
GetComputedStyle เป็นวิธีการของหน้าต่าง มันสามารถรับค่าแอตทริบิวต์ CSS ที่ใช้แล้วทั้งหมดขององค์ประกอบปัจจุบัน แต่เป็นแบบอ่านอย่างเดียว มันมีพารามิเตอร์สองพารามิเตอร์ตัวแรกคือโหนดที่เข้ามาหนึ่งพารามิเตอร์ที่สองสามารถผ่าน: โฮเวอร์,: เบลอ ฯลฯ เพื่อให้ได้สไตล์เทียมเทียมและถ้าไม่เป็นโมฆะจะถูกส่งผ่าน
อย่างไรก็ตาม IE ไม่รองรับวิธี getComputedStyle และ currentstyle สามารถใช้เพื่อรักษาความเข้ากันได้:
window.getComputedStyle? window.getComputedStyle (โหนด, null): node.currentstyle
บทสรุปข้างต้นของวิธีการทำงานของโหนด JavaScript DOM คือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น