JavaScript - 文件物件模型 (DOM)

<p>DOM詳解：網頁文檔的編程接口

<p>DOM（文檔對像模型）是用於網頁文檔的編程接口，它將HTML或XML文檔的結構表示為對象的樹。借助DOM，開發者可以使用JavaScript動態地與網頁交互並操作網頁。 HTML DOM允許JavaScript更改HTML元素的內容。

<p>

<p>如何在HTML頁面中查找和訪問HTML元素？

• 按ID查找HTML元素

<p>示例：

<code class="language-javascript">const element = document.getElementById("intro");</code>

• 按標籤名查找HTML元素

<p>示例：

<code class="language-javascript">const element = document.getElementsByTagName("p");</code>

• 按類名查找HTML元素

<p>示例：

<code class="language-javascript">const x = document.getElementsByClassName("intro");</code>

• 使用CSS選擇器查找HTML元素

<p>使用querySelectorAll()方法查找與指定CSS選擇器（ID、類名、類型、屬性、屬性值等）匹配的所有HTML元素。

<p>示例：查找具有類名“intro”的段落元素：

<code class="language-javascript">const x = document.querySelectorAll("p.intro");</code>

• 使用HTML對象集合查找HTML元素

<p>節點 (Nodes)

<p>DOM中的所有內容都是節點，例如元素、文本、屬性。

<p>元素節點 (Element Nodes):

<p>表示HTML或XML元素。例如：<div>、<h1>、<p>、<span>等。

<code class="language-html"><h1>Hello, World!</h1></code>

<p>在上面的例子中，<h1> 是一個元素節點。

<p>文本節點 (Text Node):

<p>表示元素內的文本內容。

<code class="language-html"><h1>Hello, World!</h1></code>

<p><h1> 元素內的文本 "Hello, World!" 是一個文本節點。

<p>創建新的HTML元素（節點）：

1. 創建元素: 使用document.createElement()方法創建HTML元素。
2. 創建文本節點: 使用document.createTextNode()方法創建文本節點。
3. 將文本添加到元素: 使用appendChild()方法將文本節點附加到已創建的元素。
4. 創建div元素: 再次使用document.createElement()創建<div>元素。
5. 將元素插入div: 使用appendChild()將前面創建的元素放入div中。
6. 將div插入文檔: 最後，將div添加到文檔主體（或任何其他所需的父元素）。

<p>示例代碼片段（略去完整代碼，僅保留關鍵部分）：

<code class="language-javascript">// 创建一个段落元素
const para = document.createElement("p");
// 创建一个文本节点
const text = document.createTextNode("这是一个新的段落！");
// 将文本节点添加到段落元素
para.appendChild(text);
// ... (后续代码将段落元素添加到页面)</code>

<p>更改HTML樣式:

<p>語法：

<code class="language-javascript">document.getElementById(id).style.property = new style;</code>

<p>示例：（略）

<p>

<p>透過以上方法，您可以有效地操作和修改網頁內容。

以上是JavaScript - 文件物件模型 (DOM)的詳細內容。更多資訊請關注PHP中文網其他相關文章！