JavaScript HTML DOM

通過 HTML DOM,JavaScript 能夠訪問和變更 HTML 文檔的所有元素。

HTML DOM(文檔對象模型)

當網頁被加載時,瀏覽器會創建頁面的文檔對象模型(Document Object Model)。

HTML DOM 模型被結構化為對象樹

對象的 HTML DOM 树

ต้นไม้ DOM HTML

通過這個對象模型,JavaScript 获得創建動態 HTML 的所有力量:

  • JavaScript 能變更頁面中的所有 HTML 元素
  • JavaScript 能變更頁面中的所有 HTML 屬性
  • JavaScript 能變更頁面中的所有 CSS 樣式
  • JavaScript 能刪除已有的 HTML 元素和屬性
  • JavaScript 能添加新的 HTML 元素和屬性
  • JavaScript 能對頁面中所有已有的 HTML 事件作出反應
  • JavaScript 能在頁面中創建新的 HTML 事件

您將學到什麼

在本教程下面的章節中,您將學到:

  • 如何變更 HTML 元素的內容
  • วิธีที่จะเปลี่ยนรูปแบบขององค์ประกอบ HTML (CSS)
  • วิธีที่จะตอบสนองต่อเหตุการณ์ HTML DOM
  • วิธีที่จะเพิ่มและลบออกองค์ประกอบ HTML

มันคืออะไร DOM?

DOM คือมาตรฐานของ W3C (World Wide Web Consortium)

DOM กำหนดมาตรฐานที่ใช้เข้าถึงเอกสาร:

“W3C Document Object Model (DOM) คือส่วนของระบบที่ไม่ขึ้นกับแผงและภาษา ที่อนุญาตให้โปรแกรมและสคริปต์เข้าถึง ปรับปรุงเนื้อหา โครงสร้างและรูปแบบของเอกสารโดยทันที”

มาตรฐาน W3C DOM ถูกแบ่งเป็น 3 ส่วนต่าง ๆ:

  • Core DOM - ตัวแบบมาตรฐานของทุกประเภทเอกสาร
  • XML DOM - ตัวแบบมาตรฐานของเอกสาร XML
  • HTML DOM - ตัวแบบมาตรฐานของเอกสาร HTML

มันคืออะไร HTML DOM?

HTML DOM คือมาตรฐานของ HTMLวัตถุแบบแบ่งประเภทและตัวเข้าถึงโปรแกรม. มันกำหนด:

  • เป็นวัตถุขององค์ประกอบ HTML
  • ของทุกองค์ประกอบ HTMLคุณสมบัติ
  • เข้าถึงของทุกองค์ประกอบ HTMLวิธี
  • ของทุกองค์ประกอบ HTMLเหตุการณ์

ตัวเลือกอื่น: HTML DOM คือมาตรฐานที่เกี่ยวกับวิธีที่จะหา แก้ไข เพิ่มเติม หรือลบออกตัวองค์ประกอบ HTML.