JavaScript HTML DOM - 改变 HTML-CSDN博客

本文链接：https://blog.csdn.net/weixin_47477471/article/details/128984927

本文介绍了如何使用JavaScript操作HTMLDOM来改变HTML元素的内容、属性。示例包括改变段落文字、更换图像源，以及添加、删除和替换元素的方法，展示了JavaScript在动态更新网页内容方面的功能。

摘要由CSDN通过智能技术生成

HTML DOM（文档对象模型）是 JavaScript 用于操纵 HTML 网页的一种方法。使用 HTML DOM，您可以改变 HTML 元素的内容、属性和样式。因此，JavaScript HTML DOM - 改变 HTML 对于创建动态 Web 页面非常重要。

下面是如何使用 JavaScript HTML DOM 改变 HTML 元素的内容的一个示例：

<!DOCTYPE html>
<html>
<body>

<p id="demo">点击按钮改变内容：</p>

<button onclick="document.getElementById('demo').innerHTML = '我的内容已经改变了！'">点击我</button>

</body>
</html>

在这个示例中，我们使用了 document.getElementById() 方法来获取段落元素，并使用 .innerHTML 属性来改变其内容。当用户点击按钮时，就会触发改变内容的操作。

除了改变 HTML 元素的内容，您还可以使用 JavaScript HTML DOM 改变 HTML 元素的属性。例如，您可以更改元素的图像、链接或样式。下面是一个更改图像属性的示例：

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="sun.jpg" width="100" height="100">

<p>点击按钮更换图像：</p>

<button onclick="document.getElementById('myImage').src='moon.jpg'">点击我</button>

</body>
</html>

JavaScript 可以动态改变 HTML 元素的内容，改变元素的属性，添加、删除、替换元素。

改变 HTML 元素的内容：

document.getElementById("myHeading").innerHTML = "Hello World!";

上面的代码通过使用 getElementById() 方法，选择了一个元素，然后把它的内容改成了 "Hello World!"。

改变 HTML 元素的属性：

document.getElementById("myImage").src = "landscape.jpg";

上面的代码通过使用 getElementById() 方法，选择了一个元素，然后把它的 src 属性改成了 "landscape.jpg"。

添加元素：

var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var element = document.getElementById("myDiv");
element.appendChild(para);

上面的代码通过使用 createElement() 和 createTextNode() 方法，创建了一个段落元素和一个文本节点，并将文本节点添加到段落元素中。然后通过 getElementById() 方法，选择了一个元素，并将段落元素添加到它中。

删除元素：

var parent = document.getElementById("myList");
var child = document.getElementById("listItem");
parent.removeChild(child);

上面的代码通过使用 getElementById() 方法，选择了一个父元素和一个子元素，然后使用 removeChild() 方法，删除了这个子元素。

替换元素：

var parent = document.getElementById("myList");
var oldChild = document.getElementById("listItem");

总之，JavaScript HTML DOM 改变 HTML 的功能是非常强大且常用的，可以帮助开发人员更好的进行开发。