Day29 DOM 介绍

文件物件模型 (DOM)

文件物件模型(DOM)是HTML、XML 和 SVG 文件的程序介面。它提供了一个文件的结构化表示法，并定义让程序可以存取并改变文件架构、风格和内容的方法。DOM 提供了文件以拥有属性与函式的节点与物件组成的结构化表示。节点也可以附加事件处理程序，一旦触发事件就会执行处理程序。本质上，它将网页与脚本或程序语言连结在一起。

DOM的组成

DOM是由节点组成的。
1.html载入完毕後，浏览器会把html文件结构化生成一个DOM树
2.获取DOM的元素节点
3.操作该元素（改变该元素的属性或给该元素新增事件）

在HTML中，一切都是节点

• 元素节点：HTML标签
• 文字节点：标签中的文字
• 属性节点：标签的属性，
  文字节点是元素节点的子节点，属性节点既不是元素节点的子节点也不是元素节点的父节点，整个html文件是一个文件节点，而所有的节点都是Object型别。

DOM的用处

• 获取元素节点
• 设定元素的属性值
• 设定元素的样式
• 动态建立和删除元素
• 给元素系结事件

DOM API

DOM: JavaScript 用来控制网页的节点与内容的标准，DOM有着W3C所制定的标准来规范。API:应用程序介面，英文全名是：Application Programming Interface。可以透过 DOM API 取得节点，JavaScript如下方程序码：

根据传入的值，找到 DOM 中 id 为 'xxx' 的元素。

document.getElementById("xxx");

针对给定的 tag 名称，回传所有符合条件的 NodeList 物件 [注1]

document.getElementsByTagName("xxx");

针对给定的 class 名称，回传所有符合条件的 NodeList 物件。

document.getElementsByClassName("xxx");

针对给定的 Selector 条件，回传第一个 或 所有符合条件的 NodeList。

document.querySelector("xxx");
document.querySelectorAll("xxx");

而透过 DOM API 选取出来的节点，我们可以透过操作 textContent 属性来变更它的文字。设定一个 HTML 属性节点为 id，名称为 greet：

<h1 id="greet"></h1>

也可以先透过 document.querySelector() 选取方法来取得节点，然後修改 textContent 属性：

<script>document.querySelector('#greet').textContent = 'Hello World!'</script>