ล่าสุดการพัฒนาเว็บบทเรียน
×

JS เกี่ยวกับการสอน

JS บ้าน JS บทนำ JS สถานที่ที่จะ JS ส่งออก JS วากยสัมพันธ์ JS งบ JS ความคิดเห็น JS ตัวแปร JS ผู้ประกอบการ JS คณิตศาสตร์ JS การมอบหมาย JS ชนิดข้อมูล JS ฟังก์ชั่น JS วัตถุ JS ขอบเขต JS เหตุการณ์ JS เงื่อนไข JS วิธีสตริง JS เบอร์ JS วิธีการจำนวน JS คณิตศาสตร์ JS วันที่ JS รูปแบบวันที่ JS วันวิธีการ JS แถว JS วิธีการอาร์เรย์ JS booleans JS เปรียบเทียบ JS เงื่อนไข JS สวิตซ์ JS ห่วง For JS ในขณะที่ห่วง JS หยุด JS ประเภทการแปลง JS นิพจน์ทั่วไป JS ข้อผิดพลาด JS แก้จุดบกพร่อง JS hoisting JS โหมดที่เข้มงวด JS คู่มือสไตล์ JS ปฏิบัติที่ดีที่สุด JS ข้อผิดพลาด JS ประสิทธิภาพ JS คำสงวน JS JSON

JS ฟอร์ม

แบบฟอร์มการตรวจสอบ รูปแบบ API

JS วัตถุ

นิยามวัตถุ คุณสมบัติของวัตถุ วิธีการของวัตถุ ต้นแบบวัตถุ

JS ฟังก์ชั่น

นิยามฟังก์ชั่น ค่าฟังก์ชัน ฟังก์ชั่นการภาวนา ปิดฟังก์ชั่น

JS HTML DOM

DOM แนะนำ DOM วิธีการ DOM เอกสาร DOM องค์ประกอบ DOM HTML DOM CSS DOM ภาพเคลื่อนไหว DOM เหตุการณ์ DOM EventListener DOM การเดินเรือ DOM โหนด DOM Nodelist

JS เบราว์เซอร์ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS ตัวอย่าง

JS ตัวอย่าง JS HTML DOM JS HTML อินพุต JS HTML วัตถุ JS HTML เหตุการณ์ JS เบราว์เซอร์ JS ทดสอบ JS สรุป

JS คู่มืออ้างอิง

JavaScript วัตถุ HTML DOM วัตถุ


 

JavaScriptรายการ HTML DOM Node


รายการโหนดเป็นคอลเลกชันของโหนด


รายการ HTML DOM Node

getElementsByTagName()วิธีการส่งกลับรายการโหนดรายการโหนดเป็นคอลเลกชันอาร์เรย์เหมือนของโหนด

รหัสต่อไปนี้เลือกทั้งหมด <p> โหนดในเอกสาร:

ตัวอย่าง

var x = document.getElementsByTagName("p");

โหนดสามารถเข้าถึงได้จากจำนวนดัชนี ในการเข้าถึงโหนดที่สอง <p> คุณสามารถเขียน:

y = x[1];
ลองตัวเอง»

หมายเหตุ: ดัชนีเริ่มต้นที่ 0


HTML DOM Node รายการยาว

คุณสมบัติความยาวกำหนดจำนวนโหนดในรายการโหนด:

ตัวอย่าง

var myNodelist = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myNodelist.length;
ลองตัวเอง»

ตัวอย่างอธิบายว่า:

  1. รับทั้งหมด <p> องค์ประกอบในรายการโหนด
  2. แสดงความยาวของรายการโหนด

คุณสมบัติความยาวจะเป็นประโยชน์เมื่อคุณต้องการที่จะห่วงผ่านโหนดในรายการโหนด:

ตัวอย่าง

เปลี่ยนสีพื้นหลังของทุก <p> องค์ประกอบในรายการโหนด:

var myNodelist = document.getElementsByTagName("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
}
ลองตัวเอง»

รายการโหนดไม่ได้เป็นอาร์เรย์!
รายการโหนดอาจมีลักษณะเช่นอาร์เรย์ แต่มันไม่ได้ คุณสามารถห่วงผ่านรายการโหนดและอ้างอิงไปยังต่อมน้ำมันเช่นอาร์เรย์ อย่างไรก็ตามคุณไม่สามารถใช้วิธีการอาร์เรย์เช่น valueOf() หรือ join() ในรายการโหนด