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

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 องค์ประกอบ

❮ก่อนหน้า ถัดไปบท❯

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

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

มักจะมี JavaScript คุณต้องการที่จะจัดการกับองค์ประกอบ HTML

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

  • หาองค์ประกอบ HTML โดย id
  • หาองค์ประกอบ HTML โดยใช้ชื่อแท็ก
  • หาองค์ประกอบ HTML โดย class ชื่อ
  • หาองค์ประกอบ 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" และแล้วก็พบว่าทั้งหมด <p> องค์ประกอบภายใน "main" :

ตัวอย่าง

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
ลองตัวเอง»

หาองค์ประกอบ HTML โดย Class ชื่อ

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

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

ตัวอย่าง

var x = document.getElementsByClassName("intro");
ลองตัวเอง»

หาองค์ประกอบโดยชื่อชั้นไม่ทำงานใน Internet Explorer 8 และรุ่นก่อนหน้านี้

หาองค์ประกอบ HTML CSS Selectors โดย

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

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

ตัวอย่าง

var x = document.querySelectorAll("p.intro");
ลองตัวเอง»

querySelectorAll() วิธีการไม่ทำงานใน Internet Explorer 8 และรุ่นก่อนหน้านี้

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

ตัวอย่างนี้พบว่าองค์ประกอบรูปแบบที่มี id="frm1" ในคอลเลกชันรูปแบบและการแสดงทุกค่าองค์ประกอบ:

ตัวอย่าง

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 ต่อไปนี้ (และคอลเลกชัน Object) ยังสามารถเข้าถึงได้:

ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!

การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 »


❮ก่อนหน้า ถัดไปบท❯