ประเภทโหนด
น๊อต
นี่คือค่า nodetype ที่สำคัญบางอย่าง:
1: องค์ประกอบองค์ประกอบ
2: attr
3: ข้อความ
8: ความคิดเห็น
9: เอกสารเอกสาร
nodeName, nodevalue
ความสัมพันธ์ของโหนด
ChildNodes: แต่ละโหนดมีคุณสมบัติ ChildNodes ซึ่งถือวัตถุ nodelist
FirstChild: เทียบเท่ากับเด็ก [0]
LastChild: เทียบเท่ากับ ChildNodes.length-1
ในเวลาเดียวกันโหนดอื่น ๆ ในรายการเดียวกันสามารถเข้าถึงได้โดยใช้คุณสมบัติก่อนหน้าและคุณสมบัติถัดไปของแต่ละโหนดในรายการ
โหนดการทำงาน
ภาคผนวก ()
วิธี AppendChild () ใช้เพื่อเพิ่มโหนดไปยังจุดสิ้นสุดของรายการ ChildNodes หลังจากเพิ่มโหนดแล้วพอยน์เตอร์ความสัมพันธ์ของโหนดใหม่โหนดพาเรนต์และโหนดลูกสุดท้ายของ ChildNodes จะได้รับการปรับปรุงตามลำดับ
แทรกก่อน ()
InsertBefore () วิธีการยอมรับพารามิเตอร์สองพารามิเตอร์: โหนดที่จะแทรกและโหนดที่จะอ้างอิง
// หลังจากการแทรกมันจะกลายเป็นโหนดลูกสุดท้าย returnedNode = somenode.insertBefore (newNode, null); // หลังจากการแทรกมันจะกลายเป็นโหนดแรก returedNode = somenode.insertBefore (newNode, somenode.firstchild);
replacechild ()
replacechild () ยอมรับพารามิเตอร์สองตัวโหนดที่จะแทรกและโหนดที่จะเปลี่ยน
var returnNode = somenode.replacechild (newNode, somenode.firstchild);
removeChild ()
ลบและไม่แทนที่โหนดเท่านั้น
var arefirstchild = somenode.removeChild (somenode.firstchild);
Clonenode ()
รายการ 1
รายการ 2
รายการ 3
var deeplist = mylist.clonenode (จริง); console.log (deeplist.length); // 3VAR ตื้นเขิน = myList.ClonEnode (เท็จ); console.log (ตื้น childnodes.length); // 0
ประเภทเอกสาร
โหนดเอกสารมีคุณสมบัติดังต่อไปนี้:
บุตรของเอกสาร
var html = document.documentelement; // รับการอ้างอิงถึง <html> console.log (html === document.childnodes [0]); // trueconsole.log (html === document.firstchild); // จริง
ข้อมูลเอกสาร
// รับชื่อของเอกสาร var OriginalTitle = document.title; // ตั้งค่าเอกสารชื่อเอกสาร title = "ชื่อหน้าใหม่"; // รับ urlvar url ที่สมบูรณ์ = document.url; // รับชื่อโดเมน var domain = document.domain; // รับ urlvar referrer = document.referrer; // สมมติว่าหน้ามาจาก p2p.wrox.com domain // document ที่ประสบความสำเร็จโดเมน = "nczonline.net"; // ล้มเหลว
CALL Document.getElementById ("myelement"); ผลลัพธ์จะส่งคืนองค์ประกอบ <put> ดังที่แสดงด้านล่าง;
วิธีที่ดีที่สุดคือไม่ทำให้แอตทริบิวต์ชื่อของฟิลด์ฟอร์มเหมือนกับ ID ขององค์ประกอบอื่น ๆ
<อินพุต type = "text" name = "myelement" value = "ฟิลด์ข้อความ"> <div id = "myelement"> a div </div>
คอลเล็กชันพิเศษ
การเขียนเอกสาร
<html> <head> <title> document.write () ตัวอย่างที่ 3 </title> </head> <body> <script type = "text/javascript"> document.write ("<script type =/" text/javascript/"src =/" file.js/">") </script> </body> </html>สตริง <// สคริปต์> จะไม่ถือเป็นแท็กปิดสำหรับแท็กสคริปต์ภายนอกดังนั้นจะไม่มีเนื้อหาที่ไม่จำเป็นในหน้า
ประเภทองค์ประกอบ
โหนดองค์ประกอบมีลักษณะดังต่อไปนี้:
ในการเข้าถึงชื่อแท็กขององค์ประกอบคุณสามารถใช้แอตทริบิวต์ NodEname หรือแอตทริบิวต์ TagName;
<div id = "mydiv"> </div> var div = document.getElementById ("mydiv"); console.log (div.tagname); // divconsole.log (div.nodename); // divif (element.tagname == "div") {// คุณไม่สามารถเปรียบเทียบได้เช่นนี้มันเป็นเรื่องง่ายที่จะทำผิดพลาด} ถ้า (element.tagname.toLowerCase == "div") {// นี่คือสิ่งที่ดีที่สุด (สำหรับเอกสารใด ๆ )}รับคุณสมบัติ
มีวิธีการ DOM หลักสามวิธีสำหรับลักษณะการทำงานคือ GetAttribute (), setAttribute () และ RemoveAttribute ();
โปรดทราบว่าชื่อแอตทริบิวต์ที่ส่งผ่านไปยัง GetAttribute () เหมือนกับชื่อแอตทริบิวต์จริง ความประทับใจ: เพื่อให้ได้ค่าแอตทริบิวต์ของคลาสคุณควรผ่าน "คลาส" แทน "classname"
var div = document.getElementById ("mydiv"); console.log (div.getAttribute ("คลาส")); // bdสร้างองค์ประกอบ
ใช้ Method.createElement () วิธีการสร้างองค์ประกอบใหม่
ลูกขององค์ประกอบ
ก่อนที่จะทำการดำเนินการคุณมักจะต้องตรวจสอบคุณสมบัติ nodetype ก่อนดังแสดงในตัวอย่างต่อไปนี้:
สำหรับ (var i = 0; len = element.childnodes.length; i <len; i ++) {ถ้า (element.childnodes [i] .nodeType == 1) {// ดำเนินการบางอย่าง}}}}}}}}}}ประเภทข้อความ
โหนดข้อความมีคุณสมบัติดังต่อไปนี้:
สร้างโหนดข้อความ
คุณสามารถใช้ document.createTextNode () เพื่อสร้างโหนดข้อความใหม่
โหนดข้อความปกติ
ทำให้เป็นปกติ ()
แยกโหนดข้อความ
SplitText ()
ประเภทความคิดเห็น
โหนดความคิดเห็นมีคุณสมบัติดังต่อไปนี้:
เทคโนโลยีการดำเนินงาน DOM
แบบฟอร์มการทำงาน
// สร้าง tablevar table = document.createelement ("ตาราง"); table.border = 1; table.width = "100%"; // สร้าง tbodyvar tbody = document.createelement ("tbody"); table.appendchild (tbody); // สร้างบรรทัดแรก tbody.insertrow (0); tbody.rows [0] .insertcell (0); tbody.rows [0] .cells [0] .AppendChild (document.createTextNode ("เซลล์ 1,1")); tbody.Rows [0] 2,1 ")); // สร้างบรรทัดที่สอง tbody.insertrow (01); tbody.rows [1] .insertcell (0); tbody.rows [1] .cells [0] 1,2 ")); tbody.rows [1] .insertcell (1); tbody.rows [1] .cells [1] .AppendChild (document.createtextNode (" เซลล์ 2,2 ")); document.body.appendchild (ตาราง);ตัวเลือก API
วิธีการ querySelector ()
// รับองค์ประกอบร่างกาย var tbody = document.querySelector ('body'); // รับองค์ประกอบด้วย id "mydiv" var mydiv = document.querySelector ("#mydiv"); // รับองค์ประกอบแรกด้วยคลาส Document.body.querySelector ("IMG.Button");เมธอด querySelectorAll ()
// รับองค์ประกอบทั้งหมด <em> ใน A <div> (คล้ายกับ getElementsByTagname ("em")) var ems = document.getElementById ("mydiv") querySelectorall ("em"); // ได้รับองค์ประกอบทั้งหมด " Document.QuerySelectorall ("P strong");HTML5
ส่วนขยายที่เกี่ยวข้องกับชั้นเรียน
GetElementsByClassName () วิธี:
วิธีนี้สามารถเรียกผ่านวัตถุเอกสารและองค์ประกอบ HTML ทั้งหมด
// รับองค์ประกอบทั้งหมดที่มี "ชื่อผู้ใช้" และ "ปัจจุบัน" ในชั้นเรียน ลำดับของชื่อคลาสไม่สำคัญกับ var allCurrentUserNames = document.getElementsByClassName ("ชื่อผู้ใช้ปัจจุบัน"); // รับองค์ประกอบทั้งหมดด้วยชื่อคลาส "เลือก" ในองค์ประกอบที่มี ID "mydiv" var ที่เลือก = document.getElementById ("mydiv")การจัดการโฟกัส
HTML5 ยังเพิ่มฟังก์ชั่นของการช่วยเหลือในการจัดการโฟกัส DOM ประการแรกคือคุณสมบัติของเอกสารการใช้งานที่ใช้งานซึ่งหมายถึงองค์ประกอบใน DOM ที่ได้รับการโฟกัสในปัจจุบัน
var button = document.getElementById ("myButton"); button.focus (); การแจ้งเตือน (document.activeElement === ปุ่ม); // จริงโดยค่าเริ่มต้นเมื่อเอกสารเพิ่งโหลดเอกสารการใช้งาน ActiveElement จะถูกเก็บไว้ใน Document.activeElement พร้อมการอ้างอิงถึงองค์ประกอบของ Document.body ในระหว่างการโหลดเอกสารค่าของ document.activelement เป็นโมฆะ
นอกจากนี้ยังมีการเพิ่มวิธีการ Document.hasfocus () ซึ่งใช้เพื่อพิจารณาว่าเอกสารได้รับโฟกัสหรือไม่
ปุ่ม var = document.getElementById ("myButton"); botton.focus (); แจ้งเตือน (document.hasfocus ()); // จริง