使用 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 之前一直在等待完成。