DOM 修改元素

DOM 提供了很多实用的方法操作元素，本文展示了在 HTML 页面使用 JavaScript 更改元素内容、属性的方法。

更改元素内容

修改 HTML 元素内容的最简单方法是使用 innerHTML 属性。

要更改 HTML 元素的内容，请使用以下语法：

document.getElementById(id).innerHTML = new HTML();

此示例更改 <p> 元素的内容：

<html>
  <body>
    <p id="p1">Hello World!</p>

    <script>
      document.getElementById("p1").innerHTML = "新内容！";
    </script>
  </body>
</html>

示例说明：

上面的 HTML 文档包含一个 id 为 p1 的 <p> 元素
我们使用 document.getElementById 获取该元素
使用元素的 innerHTML 属性将该元素的内容更改为“新内容！”

此示例更改 <h1> 元素的内容：

<!DOCTYPE html>
<html>
  <body>
    <h1 id="id01">Old Heading</h1>

    <script>
      const element = document.getElementById("id01");
      element.innerHTML = "新标题";
    </script>
  </body>
</html>

示例说明：

上面的 HTML 文档包含一个 id 为 id01 的 <h1> 元素
我们使用 document.getElementById 获取该元素
使用元素的 innerHTML 属性将该元素的内容更改为“新标题”

更改属性的值

要更改 HTML 属性的值，请使用以下语法：

document.getElementById(id).attribute = new value();

此示例更改 <img> 元素的 src 属性的值：

<!DOCTYPE html>
<html>
  <body>
    <img id="myImage" src="smiley.gif" />

    <script>
      document.getElementById("myImage").src = "landscape.jpg";
    </script>
  </body>
</html>

示例说明：

上面的 HTML 文档包含一个 id 为 myImage 的 <img> 元素
我们使用 document.getElementById 获取该元素
使用元素的 src 属性从将图片更改为“landscape.jpg”

显示时间

JavaScript 可以在页面上显示时间：

<!DOCTYPE html>
<html>
  <body>
    <script>
      document.getElementById("demo").innerHTML = "Date : " + Date();
    </script>
  </body>
</html>

document.write()

document.write() 方法可直接将内容写入 HTML 输出流：

<!DOCTYPE html>
<html>
  <body>
    <p>Bla bla bla</p>

    <script>
      document.write(Date());
    </script>

    <p>Bla bla bla</p>
  </body>
</html>

文档加载完成后切勿使用 document.write() 输出内容，因为它会覆盖整个文档。比如下面这样：

<!DOCTYPE html>
<html>
 <body>
   <p>Bla bla bla</p>

   <script>
     document.write(Date());
   </script>

   <p>Bla bla bla</p>

   <button onclick="document.write(Date());">注意：点击此按钮会将内容覆盖整个网页</button>
 </body>
</html>

DOM 修改元素

更改元素内容

更改属性的值

显示时间

document.write()

目录