JavaScript 使用DOM API

示例

DOM代表d ocument Ø bject中号奥德尔。它是结构化文档(如XML和HTML)的面向对象表示。

设置textContentan的属性Element是在网页上输出文本的一种方法。

例如,考虑以下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中,我们创建一个属性为的新<p>标记,textContent并将其添加到html主体的末尾:

var element = document.createElement('p');
element.textContent = "Hello, World";
document.body.appendChild(element); //将新创建的元素添加到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为止。