使用 DOM API

Created: November-22, 2018

DOM 代表 Document Object Model。它是 XML 和 HTML 等結構化文件的物件導向表示。

設定 Element 的 textContent 屬性是在網頁上輸出文字的一種方法。

例如，請考慮以下 HTML 標記：

<p id="paragraph"></p>

要更改其 textContent 屬性，我們可以執行以下 JavaScript：

document.getElementById("paragraph").textContent = "Hello, World";

這將選擇 id 為 paragraph 的元素，並將其文字內容設定為“Hello，World”：

<p id="paragraph">Hello, World</p>

（另見本演示）

你還可以使用 JavaScript 以程式設計方式建立新的 HTML 元素。例如，考慮具有以下正文的 HTML 文件：

<body>
   <h1>Adding an element</h1>
</body>

在我們的 JavaScript 中，我們建立了一個帶有 textContent 屬性的新 <p> 標籤，並將其新增到 html 主體的末尾：

var element = document.createElement('p');
element.textContent = "Hello, World";
document.body.appendChild(element); //add the newly created element to the DOM

這會將你的 HTML 正文更改為以下內容：

<body>
   <h1>Adding an element</h1>
   <p>Hello, World</p>
</body>

請注意，為了使用 JavaScript 操作 DOM 中的元素，必須在文件中建立相關元素之後執行 JavaScript 程式碼。這可以通過將 JavaScript 的 <script> 標籤實現後所有其他 <body> 內容。或者，你也可以使用事件監聽器來監聽例如。 window 的 onload 事件，將你的程式碼新增到該事件監聽器將延遲執行你的程式碼，直到你的頁面上的所有內容都已載入。

確保載入所有 DOM 的第三種方法是使用 0 ms 的超時函式包裝 DOM 操作程式碼。這樣，這個 JavaScript 程式碼在執行佇列的末尾重新排隊，這使得瀏覽器有機會完成一些非 JavaScript 事情，這些事情在參與這個新的 JavaScript 之前一直在等待完成。