📅 最后修改于: 2023-12-03 15:08:13.548000 🧑 作者: Mango
当你需要通过单击JavaScript中的按钮来更改文本和图像时，你需要使用Document对象模型（DOM），这是一种用于HTML和XML文档、文档中的元素、属性和内容的编程接口。
为了更改文本，你需要使用Document对象模型（DOM）中的textContent属性。首先，你需要使用querySelector()方法来选择要更改文本的HTML元素，然后使用textContent属性来更改它的文本。
为了更改图像，你需要使用Document对象模型（DOM）中的src属性。同样，你需要使用querySelector()方法来选择要更改的图像，然后使用src属性来更改它的路径。
下面是一个示例代码片段，它演示了如何仅通过单击JavaScript中的按钮来更改文本和图像。
<!DOCTYPE html>
<html>
<head>
<title>更改文本和图像</title>
</head>
<body>
<h1>更改文本和图像示例</h1>
<p id="text">这是文本。</p>
<img id="image" src="image1.jpg">
<button onclick="changeContent()">更改文本和图像</button>
<script>
function changeContent() {
// 更改文本
document.querySelector("#text").textContent = "这是更改后的文本。";
// 更改图像
document.querySelector("#image").src = "image2.jpg";
}
</script>
</body>
</html>
在上面的代码中，我们定义了一个 changeContent() 函数来更改文本和图像。该函数会查找ID为text和image的HTML元素，并更改它们的文本和图像路径。我们将这个函数绑定到一个按钮的 onclick 事件中。
运行代码，单击按钮，可以看到文本和图像都已被更改。这就是如何仅通过单击JavaScript中的按钮来更改文本和图像的方法。
希望这篇介绍对你有所帮助！