โครงสร้างและคุณสมบัติเนื้อหา
น๊อต
โหนดทั้งหมดมีประเภทและมีทั้งหมด 12 ประเภทของโหนด
การคัดลอกรหัสมีดังนี้:
โหนดอินเตอร์เฟส {
// nodetype
const element_node ที่ไม่ได้ลงชื่อสั้น = 1;
const แอตทริบิวต์สั้นที่ไม่ได้ลงชื่อ _node = 2;
const text_node ที่ไม่ได้ลงนามสั้น = 3;
const cdata_section_node = 4;
const entity entity_reference_node = 5;
const entity entity_node ที่ไม่ได้ลงนาม = 6;
const การประมวลผลระยะสั้นที่ไม่ได้ลงนาม _instruction_node = 7;
const ไม่ได้ลงนามสั้น ๆ ความคิดเห็น _node = 8;
const document_node ที่ไม่ได้ลงนามสั้น = 9;
const document_type_node = 10;
const document_fragment_node = 11;
const notation_node ที่ไม่ได้ลงนามสั้น = 12;
-
-
โหนดที่สำคัญที่สุดสองโหนดคือโหนดองค์ประกอบ (1) และโหนดข้อความ (3) ส่วนที่เหลือไม่ค่อยได้ใช้
ตัวอย่างเช่นเมื่อแสดงรายการโหนดองค์ประกอบเด็กทั้งหมดเราสามารถทำซ้ำได้และใช้เด็ก [i] .nodeType! = 1 เพื่อตรวจจับ
นี่คือรหัสการใช้งาน:
การคัดลอกรหัสมีดังนี้:
<body>
<div> ผู้อ่านที่ได้รับอนุญาต: </div>
<ul>
<li> จอห์น </li>
<li> บ๊อบ </li>
</ul>
<!-โหนดความคิดเห็น->
<script>
var childNodes = document.body.childnodes
สำหรับ (var i = 0; i <childNodes.length; i ++) {
ถ้า (ChildNodes [i] .NodeType! = 1) ดำเนินการต่อ
การแจ้งเตือน (ChildNodes [i])
-
</script>
</body>
*คิด
รหัสต่อไปนี้จะแจ้งให้ทราบล่วงหน้า:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<body>
<script>
Alert (document.body.lastchild.nodetype)
</script>
</body>
</html>
nodeName, tagname
ทั้ง NodeName และ Tagname มีชื่อของโหนด
สำหรับ document.body
Alert (document.body.nodename) // body
ชื่อ nodename ทั้งหมดใน HTML จะเป็นตัวพิมพ์ใหญ่
เมื่อ NodeName ไม่ได้เป็นตัวพิมพ์ใหญ่
สถานการณ์นี้หายากถ้าคุณอยากรู้อยากเห็นคุณสามารถอ่านสิ่งต่อไปนี้
คุณอาจรู้อยู่แล้วว่ามีสองวิธีสำหรับเบราว์เซอร์ในการแยกวิเคราะห์: รูปแบบ HTML และรูปแบบ __XML โดยปกติแล้วจะใช้สคีมา HTML แต่เมื่อใช้เทคโนโลยี XMLHTTTPREQUEST__ เพื่อรับเอกสาร XML ใช้ Schema XML
รูปแบบ XML ยังใช้ใน Firefox เมื่อมีการตั้งค่าประเภทเนื้อหาของเอกสาร XHTML เป็น Xmlish
ในโหมด __XML ชื่อโหนดจะถูกเก็บไว้ดังนั้นร่างกายหรือร่างกายอาจปรากฏขึ้น
ดังนั้นหากเอกสาร XML ถึง HTML ถูกโหลดจากเซิร์ฟเวอร์ผ่านเทคโนโลยี XMLHTTPREQUEST__ ชื่อโหนดจะถูกเก็บไว้
NodeName และ __tagname__ เหมือนกันสำหรับองค์ประกอบ
อย่างไรก็ตามโหนดที่ไม่ใช่องค์ประกอบยังมีแอตทริบิวต์ nodename ซึ่งมีค่าพิเศษ:
Alert (document.nodename) // #Document
ประเภทโหนดส่วนใหญ่ไม่มีแอตทริบิวต์ Tagname และ Tagname ของโหนดนั้นมีคำอธิบายประกอบใน IE คือ!
ดังนั้นโดยทั่วไปการพูด nodename มีความหมายมากกว่า tagname แต่ Tagname เป็นเหมือนรุ่นที่เรียบง่ายดังนั้นเมื่อคุณประมวลผลเฉพาะโหนดองค์ประกอบคุณสามารถใช้งานได้
innerhtml
InnerHTML เป็นส่วนหนึ่งของมาตรฐาน HTML5 โปรดดูลิงค์สำหรับรายละเอียด
อนุญาตให้เข้าถึงเนื้อหาโหนดในข้อความ ตัวอย่างต่อไปนี้จะส่งออกเนื้อหาทั้งหมดของ document.body และแทนที่ด้วยเนื้อหาใหม่
การคัดลอกรหัสมีดังนี้:
<body>
<p> ย่อหน้า </p>
<div> และ div </div>
<script>
Alert (document.body.innerhtml) // อ่านเนื้อหาปัจจุบัน
document.body.innerhtml = 'yaaahoo!' // แทนที่เนื้อหา
</script>
</body>
InnerHTML จะมี HTML ที่มีประสิทธิภาพ แต่เบราว์เซอร์ยังสามารถแยกวิเคราะห์ HTML ได้
InnerHTML สามารถใช้ในโหนดองค์ประกอบใด ๆ มันมีประโยชน์มาก
InnerHtml Pitfalls
InnerHTML ไม่ง่ายอย่างที่คิด มันมีข้อผิดพลาดบางอย่างที่รอสามเณรและบางครั้งโปรแกรมเมอร์ที่มีประสบการณ์ไม่สามารถหลีกเลี่ยงได้
innerhtml ของโหนด __table__ ใน IE คืออ่านอย่างเดียว
ใน IE, innerhtml เป็นแบบอ่านอย่างเดียวใน col, colgroup, frameset, head, html, สไตล์, ตาราง, tbody, tfoot, thead, ชื่อ, tr และองค์ประกอบอื่น ๆ
ในแท็กตารางใน IE, innerhtml เป็นแบบอ่านอย่างเดียวยกเว้น TD
ไม่สามารถเพิ่ม InnerHTML ได้
จากโครงสร้างของคำสั่ง InnerHTML สามารถดำเนินการต่อท้ายได้เช่น:
chatdiv.innerhtml += "<div> hi <img src = 'smile.gif'/>! </div>"
chatdiv.innerhtml += "คุณเป็นอย่างไรบ้าง"
แต่สิ่งที่ได้ทำในความเป็นจริง:
1. เนื้อหาเก่าถูกล้างออก
2. เนื้อหาใหม่ถูกแยกวิเคราะห์และแทรก เนื้อหาไม่ได้ต่อท้ายมันถูกสร้างใหม่
ดังนั้นรูปภาพและทรัพยากรอื่น ๆ ทั้งหมดจะถูกโหลดใหม่หลังจากการดำเนินการ += รวมถึง smile.gif
โชคดีที่มีวิธีอื่น ๆ ในการอัปเดตเนื้อหาซึ่งไม่ได้ใช้ InnerHTML ดังนั้นจึงไม่มีปัญหาที่กล่าวถึงข้างต้น
โภชนาการ
InnerHTML ใช้ได้เฉพาะกับโหนดองค์ประกอบ
สำหรับโหนดประเภทอื่น ๆ พวกเขาใช้คุณสมบัติ NodeValue เพื่อรับเนื้อหา ตัวอย่างต่อไปนี้จะแสดงให้เห็นถึงวิธีการทำงานบนโหนดข้อความและโหนดความคิดเห็น
การคัดลอกรหัสมีดังนี้:
<body>
ข้อความ
<!-ความคิดเห็น->
<script>
สำหรับ (var i = 0; i <document.body.childnodes.length; i ++) {
Alert (document.body.childnodes [i] .nodevalue)
-
</script>
</body>
ในตัวอย่างข้างต้นคำเตือนบางอย่างว่างเปล่าเนื่องจากโหนดว่างเปล่า โปรดทราบว่า nodeValue === null สำหรับโหนดสคริปต์ นั่นเป็นเพราะสคริปต์เป็นโหนดองค์ประกอบ โหนดองค์ประกอบใช้ innerhtml
สรุป
น๊อต
ประเภทโหนด สิ่งที่สำคัญที่สุดคือโหนดองค์ประกอบคือ 1 โหนดข้อความคือ 3 และเป็นการอ่านอย่างเดียว
nodeName/tagname
ชื่อแท็กแคป สำหรับโหนดที่ไม่ใช่องค์ประกอบ NodeName จะมีค่าพิเศษอ่านอย่างเดียว
innerhtml
เนื้อหาของโหนดองค์ประกอบสามารถเขียนได้
โภชนาการ
เนื้อหาของโหนดข้อความสามารถเขียนได้
โหนด DOM มีแอตทริบิวต์อื่น ๆ ตามประเภทของมัน ตัวอย่างเช่นแท็กอินพุตมีค่าและ __Checked__ แอตทริบิวต์ แอตทริบิวต์ A มี HREF เป็นต้น
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่าคุณจะชอบมัน