Latest web development tutorials
×

JavaScript หลักสูตร

JavaScript หลักสูตร JavaScript แนะนำโดยย่อ JavaScript การใช้ JavaScript ส่งออก JavaScript ไวยากรณ์ JavaScript งบ JavaScript หมายเหตุ JavaScript ตัวแปร JavaScript ชนิดข้อมูล JavaScript วัตถุ JavaScript ฟังก์ชัน JavaScript ขอบเขต JavaScript เหตุการณ์ JavaScript เชือก JavaScript ผู้ประกอบการ JavaScript เปรียบเทียบ JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript ประเภทการแปลง JavaScript นิพจน์ปกติ JavaScript ความผิดพลาด JavaScript แก้จุดบกพร่อง JavaScript ยกตัวแปร JavaScript โหมดที่เข้มงวด JavaScript ใช้ไม่เหมาะสม JavaScript รูปแบบการตรวจสอบสิทธิ์ JavaScript ลิขสิทธิ์คำสำคัญ JavaScript JSON JavaScript void JavaScript ข้อมูลจำเพาะรหัส

JS ฟังก์ชัน

JavaScript นิยามฟังก์ชัน JavaScript อาร์กิวเมนต์ของฟังก์ชัน JavaScript เรียกใช้ฟังก์ชัน JavaScript การปิด

JS HTML DOM

DOM แนะนำโดยย่อ DOM HTML DOM CSS DOM เหตุการณ์ DOM EventListener DOM ธาตุ

JS การสอนที่ทันสมัย

JavaScript วัตถุ JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp วัตถุ

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

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript ป๊อป JavaScript เหตุการณ์หมดเวลา JavaScript Cookies

JS โกดัง

JavaScript โกดัง JavaScript ทดสอบ jQuery JavaScript ทดสอบ Prototype

JS ตัวอย่าง

JavaScript ตัวอย่าง JavaScript ตัวอย่างวัตถุ JavaScript วัตถุเช่นเบราว์เซอร์ JavaScript HTML DOM ตัวอย่าง JavaScript ย่อ

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

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

JavaScript HTML DOM

ผ่าน DOM HTML, การเข้าถึงทุกองค์ประกอบเอกสาร JavaScript HTML

HTML DOM (Document Object Model)

เมื่อโหลดหน้าเว็บเบราเซอร์จะสร้างรูปแบบวัตถุเอกสารหน้า (Document Object Model)

รูปแบบ HTML DOM มีโครงสร้างเป็นต้นไม้ของวัตถุ:

ต้นไม้ HTML DOM

ต้นไม้ DOM HTML

รูปแบบวัตถุโปรแกรมจาวาสคริปต์ได้รับความสามารถเพียงพอที่จะสร้าง HTML แบบไดนามิก

  • JavaScript สามารถเปลี่ยนหน้าสำหรับองค์ประกอบ HTML ทั้งหมด
  • JavaScript สามารถเปลี่ยนหน้าเว็บ HTML คุณสมบัติทั้งหมด
  • JavaScript สามารถเปลี่ยนหน้าทุกรูปแบบ CSS
  • JavaScript สามารถตอบสนองกับทุกเหตุการณ์ที่เกิดขึ้นหน้า

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

โดยปกติ JavaScript คุณต้องจัดการองค์ประกอบ HTML

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

  • หาองค์ประกอบ HTML โดยใช้ ID
  • หาองค์ประกอบ HTML โดยใช้ชื่อแท็ก
  • หาองค์ประกอบ HTML โดยชื่อชั้น

หาองค์ประกอบ HTML โดยใช้ ID

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

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

ตัวอย่าง

var x = document.getElementById ( "บทนำ");

ลอง»

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

หากองค์ประกอบไม่พบแล้ว X จะมี null

หาองค์ประกอบ HTML โดยใช้ชื่อแท็ก

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

ตัวอย่าง

var x = document.getElementById ( "หลัก");
var Y = x.getElementsByTagName ( "P");

ลอง»

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

ในกรณีนี้โดยgetElementsByClassName ฟังก์ชันเพื่อหาชั้น = "บทนำ" องค์ประกอบ:

ตัวอย่าง

var x = document.getElementsByClassName ( "บทนำ");

ลอง»

HTML DOM กวดวิชา

ในการกวดวิชานี้หน้าต่อไปนี้คุณจะได้เรียนรู้:

  • วิธีการเปลี่ยนเนื้อหาขององค์ประกอบ HTML ที่ (innerHTML)
  • วิธีการเปลี่ยนรูปแบบขององค์ประกอบของ HTML (CSS)
  • วิธีเหตุการณ์ HTML DOM ของการเกิดปฏิกิริยา
  • ฉันจะเพิ่มหรือลบองค์ประกอบ HTML