องค์ประกอบ JavaScript DOM

สารบัญ

    แสดงสารบัญ

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

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

บ่อยครั้ง เมื่อใช้ JavaScript คุณต้องการจัดการองค์ประกอบ HTML

เพื่อที่จะทำอย่างนั้นได้ คุณจะต้องค้นหาองค์ประกอบต่าง ๆ ก่อน มีหลายวิธีในการทำเช่นนี้:

  • ค้นหาองค์ประกอบ HTML ด้วยรหัส

  • ค้นหาองค์ประกอบ HTML ตามชื่อแท็ก

  • ค้นหาองค์ประกอบ HTML ตามชื่อคลาส

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

  • ค้นหาองค์ประกอบ HTML โดยคอลเลกชันวัตถุ HTML

ค้นหาองค์ประกอบ HTML ด้วยรหัส

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

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

ตัวอย่าง

const element = document.getElementById("intro");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p id="intro">Finding HTML Elements by Id</p>
<p>This example demonstrates the <b>getElementsById</b> method.</p>

<p id="demo"></p>

<script>
const element = document.getElementById("intro");

document.getElementById("demo").innerHTML = 
"The text from the intro paragraph is: " + element.innerHTML;

</script>

</body>
</html>

หากพบองค์ประกอบ วิธีการจะส่งกลับองค์ประกอบเป็นวัตถุ (ในองค์ประกอบ)

หากไม่พบองค์ประกอบ องค์ประกอบจะมี null

ค้นหาองค์ประกอบ HTML ตามชื่อแท็ก

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

ตัวอย่าง

const element = document.getElementsByTagName("p");

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Tag Name.</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>

<p id="demo"></p>

<script>
const element = document.getElementsByTagName("p");

document.getElementById("demo").innerHTML = 'The text in first paragraph (index 0) is: ' + element[0].innerHTML;

</script>

</body>
</html>

ตัวอย่างนี้ค้นหาองค์ประกอบที่มี id="main" จากนั้นค้นหาองค์ประกอบ <p> ทั้งหมด ภายใน "main":

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<div id="main">
<p>Finding HTML Elements by Tag Name</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
</div>

<p id="demo"></p>

<script>
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");

document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) inside "main" is: ' + y[0].innerHTML;

</script>

</body>
</html>

ค้นหาองค์ประกอบ HTML ตามชื่อคลาส

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

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Class Name.</p>
<p class="intro">Hello World!</p>
<p class="intro">This example demonstrates the <b>getElementsByClassName</b> method.</p>

<p id="demo"></p>

<script>
const x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
</script>

</body>
</html>

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

หากคุณต้องการค้นหาองค์ประกอบ HTML ทั้งหมดที่ตรงกับตัวเลือก CSS ที่ระบุ (id, ชื่อคลาส, ประเภท, คุณลักษณะ, ค่าของแอตทริบิวต์ ฯลฯ) ให้ใช้เมธอด querySelectorAll()

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

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Finding HTML Elements by Query Selector</p>
<p class="intro">Hello World!.</p>
<p class="intro">This example demonstrates the <b>querySelectorAll</b> method.</p>

<p id="demo"></p>

<script>
const x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro" is: ' + x[0].innerHTML;
</script>

</body>
</html>

ค้นหาองค์ประกอบ 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;

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Finding HTML Elements Using <b>document.forms</b>.</p>

<form id="frm1" action="/action_page.php">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>These are the values of each element in the form:</p>

<p id="demo"></p>

<script>
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;
</script>

</body>
</html>

ออบเจ็กต์ HTML ต่อไปนี้ (และคอลเล็กชันออบเจ็กต์) ยังสามารถเข้าถึงได้:

    เอกสาร.จุดยึด

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.anchors</h2>

<a name="html">HTML Tutorial</a><br>
<a name="css">CSS Tutorial</a><br>
<a name="xml">XML Tutorial</a><br>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of anchors are: " + document.anchors.length;
</script>


</body>
</html>

    เอกสาร.ร่างกาย

    <!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>

</body>
</html>

    document.documentElement

    <!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>

</body>
</html>

    เอกสาร.ฝัง

    <!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of embeds: " + document.embeds.length;
</script>

</body>
</html>

    เอกสาร.แบบฟอร์ม

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.forms</h2>

<form action="">
First name: <input type="text" name="fname" value="Donald">
<input type="submit" value="Submit">
</form> 

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of forms: " + document.forms.length;
</script>

</body>
</html>

    เอกสาร.หัว

    <!DOCTYPE html>
<html>

<head>
<title>W3Schools Demo</title>
</head>

<body>

<h2>JavaScript HTMLDOM</h2>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
document.head;
</script>

</body>
</html>

    เอกสาร.ภาพ

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.images</h2>

<img src="pic_htmltree.gif" width="486" height="266">
<img src="pic_navigate.gif" width="362" height="255">

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of images: " + document.images.length;
</script>

</body>
</html>

    เอกสาร.ลิงค์

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.links</h2>

<p>
<a href="/html/default.asp">HTML</a>
<br>
<a href="/css/default.asp">CSS</a>
</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of links: " + document.links.length;
</script>

</body>
</html>

    เอกสาร.สคริปต์

    <!DOCTYPE html>
<html>
<body>

<h2>Finding HTML Elements Using document.scripts</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"Number of scripts: " + document.scripts.length;
</script>

</body>
</html>

    เอกสาร.หัวเรื่อง

    <!DOCTYPE html>
<html>
  <head>
  <title>W3Schools Demo</title>
  </head>
<body>

<h2>Finding HTML Elements Using document.title</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
"The title of this document is: " + document.title;
</script>

</body>
</html>