JavaScript ฮ์ทดลอง องค์ประกอบ

บทที่นี้จะเล่าว่าวิธีการค้นหาและเข้าถึงองค์ประกอบ HTML ในหน้า HTML

ค้นหาองค์ประกอบ HTML

โดยทั่วไป ผ่าน JavaScript คุณจะต้องปฏิบัติต่อองค์ประกอบ HTML

เพื่อที่จะทำได้นี้ คุณจะต้องหาองค์ประกอบนี้ก่อน

  • ค้นหาองค์ประกอบ HTML ผ่าน id
  • ค้นหาองค์ประกอบ HTML ผ่านชื่อแบบตัว
  • ค้นหาองค์ประกอบ HTML ผ่าน class name
  • ค้นหาองค์ประกอบ HTML ผ่านเลือกตัวเลือก CSS
  • ค้นหาองค์ประกอบ HTML ผ่านชุดขององค์ประกอบ HTML

ค้นหาองค์ประกอบ HTML ผ่าน id

วิธีที่ง่ายที่สุดในการค้นหาองค์ประกอบ HTML ใน DOM คือ ใช้ id ขององค์ประกอบ

ตัวอย่างนี้ค้นหาองค์ประกอบ id="intro"

ตัวอย่าง

var myElement = document.getElementById("intro");

ทดสอบเอง

ถ้าหาองค์ประกอบ วิธีนี้จะกลับคืนองค์ประกอบเป็นแบบขององค์ประกอบ (ใน myElement)

ถ้าไม่หาองค์ประกอบ ค่า myElement จะมี null。

ค้นหาองค์ประกอบ HTML ผ่านชื่อแบบตัว

ตัวอย่างนี้ค้นหาทุกองค์ประกอบ <p> องค์ประกอบ

ตัวอย่าง

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

ทดสอบเอง

ตัวอย่างนี้ค้นหาองค์ประกอบ id="main" แล้วค้นหาทุกองค์ประกอบ "main" ที่มี <p> องค์ประกอบ

ตัวอย่าง

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");

ทดสอบเอง

ค้นหาองค์ประกอบ HTML ผ่าน class name

หากคุณต้องการหาทุกองค์ประกอบ HTML ที่มี class name เดียวกัน ให้ใช้ getElementsByClassName()。

ตัวอย่างนี้กลับคืนรายชื่อองค์ประกอบที่มี class="intro"

ตัวอย่าง

var x = document.getElementsByClassName("intro");

ทดสอบเอง

ค้นหาองค์ประกอบ HTML ผ่าน class name ไม่เหมาะสมสำหรับ Internet Explorer 8 และสัปดาห์ที่เก่ากว่า

ค้นหาองค์ประกอบ HTML ผ่านเลือกตัวเลือก CSS

หากคุณต้องการค้นหาทุกองค์ประกอบ HTML ที่ตรงกับเลือกตัวเลือก CSS (id, class name, ชนิด, 属性, ค่าของ属性 และอื่นๆ) ให้ใช้ querySelectorAll() วิธี

ตัวอย่างนี้กลับคืนทุกองค์ประกอบที่มี class="intro" <p> รายชื่อองค์ประกอบ

ตัวอย่าง

var x = document.querySelectorAll("p.intro");

ทดสอบเอง

querySelectorAll() ไม่เหมาะสมสำหรับ Internet Explorer 8 และสัปดาห์ที่เก่ากว่า

ค้นหา element HTML ผ่าน selector ของ HTML object

ตัวอย่างนี้ค้นหา element ที่มี id="frm1" ของ form ใน collection forms และแสดงค่าของ element ทั้งหมด:

ตัวอย่าง

var x = document.forms["frm1"];
var text = "";
 var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

ทดสอบเอง

ตัวอนุธรรณ์ HTML ต่อไปนี้ (และชุดตัวอนุธรรณ์) ยังสามารถเข้าถึงได้ด้วย: