มีสองวิธีในการเปลี่ยนแอตทริบิวต์ SRC ของรูปภาพ:
1. วิธีการ setAttribute เป็นส่วนประกอบของ "ระดับ 1 DOM" ซึ่งสามารถตั้งค่าแอตทริบิวต์ใด ๆ ของโหนดองค์ประกอบ
2, element.src = แหล่งที่มา; นี่คือวิธีการก่อนที่จะปรากฏตัวของ "ระดับ 1 DOM" และตอนนี้ก็มีผลบังคับใช้
ข้อได้เปรียบของ "ระดับ 1 DOM" คือการพกพาที่ดี วิธีการเก่าเหล่านั้นใช้กับเอกสารเว็บเท่านั้นในขณะที่ DOM ใช้กับภาษามาร์กอัปใด ๆ
ฟังก์ชั่นการจัดการเหตุการณ์
เมื่อคลิกที่ลิงค์ฉันต้องการอยู่บนหน้าเว็บนี้แทนที่จะไปที่หน้าต่างอื่นรหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<a href = "http://www.example.com" onclick = "showpic (นี่); return false;"> คลิก </a>
เมื่อคลิกลิงก์นี้เนื่องจากค่าที่ส่งคืนโดยรหัส JavaScript ที่เรียกโดยฟังก์ชันตัวจัดการเหตุการณ์ onClick เป็นเท็จพฤติกรรมเริ่มต้นของลิงค์นี้จะไม่ถูกเรียกใช้
คุณลักษณะของ ChildNodes
แอตทริบิวต์ ChildNodes สามารถใช้เพื่อให้ได้องค์ประกอบเด็กทั้งหมดขององค์ประกอบใด ๆ อาร์เรย์ที่ส่งคืนโดยคุณสมบัติ ChildNodes มีโหนดทุกประเภทไม่ใช่แค่โหนดองค์ประกอบ ในความเป็นจริงเกือบทุกอย่างในเอกสารเป็นโหนดและแม้กระทั่งช่องว่างและการแบ่งบรรทัดถูกตีความว่าเป็นโหนดและพวกเขาทั้งหมดมีอยู่ในอาร์เรย์ที่ส่งคืนโดยคุณสมบัติ ChildNodes
แต่แต่ละโหนดมีคุณสมบัติ nodetype มี 12 ค่าที่ต้องการสำหรับแอตทริบิวต์ nodetype แต่มีเพียง 3 ของพวกเขาเท่านั้นที่มีค่าที่เป็นประโยชน์: ค่าแอตทริบิวต์ nodetype ของโหนดองค์ประกอบคือ 1 ค่าแอตทริบิวต์ nodetype ของโหนดแอตทริบิวต์คือ 2 และค่าแอตทริบิวต์ nodetype ของโหนดข้อความคือ 3
หากคุณต้องการเปลี่ยนค่าของโหนดข้อความให้ใช้คุณสมบัติ NodeValue ที่จัดทำโดย DOM
องค์ประกอบอาร์เรย์ childNodes [0] มีคำพ้องความหมายที่ใช้งานง่ายและง่ายต่อการอ่านซึ่งสามารถเขียนเป็น FirstChild; DOM ยังมีแอตทริบิวต์ LastChild ที่สอดคล้องกัน
ตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
<p id = "คำอธิบาย"> เลือกรูปภาพ </p>
ก่อนอื่นสร้างตัวแปรเพื่อจัดเก็บ:
การคัดลอกรหัสมีดังนี้:
var description = document.getElementById ("คำอธิบาย");
ค่าส่งคืนของคำอธิบาย nodevalue เป็นโมฆะ คุณสมบัติ nodevalue ขององค์ประกอบ <p> นั้นเป็นค่าโมฆะ หากคุณต้องการได้รับค่าของข้อความที่มีอยู่ในองค์ประกอบ <p> คุณต้องใช้คำอธิบาย childnodes [0] .nodevalue หรือ description.firstchild.nodevalue