HTML DOM - 修改

在网页开发中，我们经常需要通过 JavaScript 来修改 HTML 元素的内容、样式或属性。这就涉及到了 HTML DOM 的修改操作。在本章节中，我们将学习如何使用 JavaScript 来修改 HTML DOM。

修改元素内容

要修改 HTML 元素的内容，我们可以通过 innerHTML 或 innerText 属性来实现。innerHTML 会将 HTML 元素作为字符串返回，而 innerText 则会返回元素的文本内容。

下面是一个示例，演示如何使用 innerHTML 来修改元素内容：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<body>

<p id="demo">Hello, World!</p>

<script>
document.getElementById("demo").innerHTML = "Hello, JavaScript!";
</script>

</body>
</html>

修改元素样式

要修改 HTML 元素的样式，我们可以通过 style 属性来实现。通过设置 style 属性的各种属性，如 color、font-size、background-color 等，我们可以改变元素的外观。

下面是一个示例，演示如何使用 style 属性来修改元素样式：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<body>

<p id="demo" style="color: red;">Hello, World!</p>

<script>
document.getElementById("demo").style.color = "blue";
document.getElementById("demo").style.fontSize = "20px";
</script>

</body>
</html>

修改元素属性

要修改 HTML 元素的属性，我们可以通过 setAttribute 或直接修改属性值来实现。setAttribute 方法可以设置任意属性，而直接修改属性值则只能修改已存在的属性。

下面是一个示例，演示如何使用 setAttribute 来修改元素属性：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="image.jpg">

<script>
document.getElementById("myImage").setAttribute("src", "new_image.jpg");
</script>

</body>
</html>

以上就是关于 HTML DOM 修改的一些基本操作，通过这些操作，我们可以灵活地控制网页的呈现效果。在实际开发中，我们可以根据需要使用这些方法来修改页面元素，实现更好的用户体验。