JavaScript HTML DOM Elements
หน้านี้สอนวิธีค้นหาและเข้าถึงองค์ประกอบ HTML ในหน้า HTML
ค้นหาองค์ประกอบ HTML
บ่อยครั้ง ด้วย JavaScript คุณต้องการจัดการองค์ประกอบ HTML
ในการทำเช่นนั้น คุณต้องค้นหาองค์ประกอบก่อน มีหลายวิธีในการทำเช่นนี้:
- ค้นหาองค์ประกอบ HTML ด้วย id
- ค้นหาองค์ประกอบ HTML ด้วยชื่อแท็ก
- ค้นหาองค์ประกอบ HTML ตามชื่อคลาส
- ค้นหาองค์ประกอบ HTML ด้วยตัวเลือก CSS
- การค้นหาองค์ประกอบ HTML โดยการรวบรวมวัตถุ HTML
ค้นหาองค์ประกอบ HTML ด้วย Id
วิธีที่ง่ายที่สุดในการค้นหาองค์ประกอบ HTML ใน DOM คือการใช้รหัสองค์ประกอบ
ตัวอย่างนี้พบองค์ประกอบที่มีid="intro"
:
ตัวอย่าง
const element = document.getElementById("intro");
หากพบองค์ประกอบ วิธีการจะคืนค่าองค์ประกอบเป็นวัตถุ (ในองค์ประกอบ)
หากไม่พบองค์ประกอบ องค์ประกอบจะมีnull
.
ค้นหาองค์ประกอบ HTML ด้วยชื่อแท็ก
ตัวอย่างนี้ค้นหา<p>
องค์ประกอบทั้งหมด:
ตัวอย่าง
const element = document.getElementsByTagName("p");
ตัวอย่างนี้ค้นหาองค์ประกอบด้วยid="main"
แล้วค้นหา<p>
องค์ประกอบทั้งหมดภายใน"main"
:
ตัวอย่าง
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");
ค้นหาองค์ประกอบ HTML ตามชื่อคลาส
หากคุณต้องการค้นหาองค์ประกอบ HTML ทั้งหมดที่มีชื่อคลาสเดียวกัน ให้ใช้
getElementsByClassName()
.
ตัวอย่างนี้ส่งคืนรายการองค์ประกอบทั้งหมดที่มีclass="intro"
.
ตัวอย่าง
const x = document.getElementsByClassName("intro");
ค้นหาองค์ประกอบ HTML ด้วยตัวเลือก CSS
หากคุณต้องการค้นหาองค์ประกอบ HTML ทั้งหมดที่ตรงกับตัวเลือก CSS ที่ระบุ (id, ชื่อคลาส, ประเภท, คุณลักษณะ, ค่าของแอตทริบิวต์ ฯลฯ ) ให้ใช้querySelectorAll()
เมธอด
ตัวอย่างนี้ส่งคืนรายการ<p>
องค์ประกอบทั้งหมดที่มีclass="intro"
.
ตัวอย่าง
const x = document.querySelectorAll("p.intro");
การค้นหาองค์ประกอบ HTML ด้วยคอลเล็กชันออบเจกต์ HTML
ตัวอย่างนี้ค้นหาองค์ประกอบแบบฟอร์มด้วยid="frm1"
, ในคอลเล็กชันแบบฟอร์ม และแสดงค่าองค์ประกอบทั้งหมด:
ตัวอย่าง
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
ออบเจ็กต์ HTML ต่อไปนี้ (และคอลเล็กชันอ็อบเจ็กต์) ยังสามารถเข้าถึงได้: