数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律学如何使用 JavaScript 更改所有 HTML 标签内的文本
在本文中，我们将执行使用 JavaScript 更改所有 HTML 标签内文本的任务。让我们深入了解本文，以了解更多关于更改所有 HTML 内文本的信息，但首先，让我们定义 HTML 标签。
什么是 HTML 标签
HTML 标签是标记语言的一部分，用于在 HTML 文档中表示 HTML 元素的开始和结束。HTML 标签是 HTML 元素的一部分，它帮助 Web 浏览器将 HTML 文档转换为网页。
为了更好地理解如何使用 JavaScript 更改所有 HTML 标签内的文本。让我们来看以下示例。
示例
在下面的示例中，我们创建一个简单的网页，我们将通过运行脚本更改文本。
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h2>
Click on the button to change the text
</h2>
<label id = "tutorial">
Welcome to Tutorialspoint
</label>
<br>
<button onclick="changetext()">
Click Here!
</button>
<script>
function changetext() {
var x = document.getElementById("tutorial");
if (x.innerHTML === "Welcome to Tutorialspoint") {
x.innerHTML = "The Best E-way Learning";
} else {
x.innerHTML = "Welcome to Tutorialspoint";
}
}
</script>
</body>
</html>
当脚本执行时，它将生成一个包含文本和点击按钮的输出。如果用户点击按钮，文本将被更改，并且网页上将显示另一个文本。
使用 replaceWith()
Element.replaceWith() 方法用一组 Node 或字符串对象替换其父级子列表中的此 Element。对于 String 对象，将插入等效的 Text 节点。
语法
以下是 replaceWith() 的语法 -
ChildNode.replaceWith(Node);
示例
考虑以下示例，我们使用 replaceWith() 更改标签内的文本。
<!DOCTYPE html>
<html>
<body>
<h2 id="tutorial">
<span class="quotation">“</span>
Lost in the ave of you
<span class="quotation">”</span>
</h2>
<script>
const changed = document.getElementById('tutorial');
changed.childNodes[2].replaceWith('Welcome');
</script>
</body>
</html>
运行上述脚本后，输出窗口将弹出，显示替换了网页上脚本中使用的原始文本的文本。
使用 querySelector()
当提供选择器或选择器集时，Document 方法 querySelector() 返回文档中与它们匹配的第一个 Element。如果没有匹配项，则返回 Null。
语法
以下是 querySelector() 的语法
querySelector(selectors)
示例
执行以下代码，我们使用 querySelector() 更改 HTML 标签中的文本。
<!DOCTYPE html>
<html>
<body>
<h1>Welcome</h1>
<script>
document.querySelector("h1").textContent = 'Tutorialspoint';
</script>
</body>
</html>
当脚本执行时，它们将生成一个输出，该输出包含网页上已替换为标签中使用的原始文本的文本。
更新于: 2023年4月20日
1K+ 次查看
广告