如何使用 javascript 更改 h1 文本(1)

📌 相关文章

📜 如何使用 javascript 更改 h1 文本(1)

📅 最后修改于: 2023-12-03 15:23:53.245000 🧑 作者: Mango

如何使用 JavaScript 更改 h1 文本

在 Web 开发中，我们经常需要通过 JavaScript 来动态修改网页的内容。其中一个常见的需求是更改 <h1> 标签中的文本内容。本文将介绍如何使用 JavaScript 针对 <h1> 标签操作。

获取 h1 元素

在修改 <h1> 标签的文本内容之前，我们需要先获取该元素。有多种方法可以获取元素，其中较为常用的是通过 document.querySelector() 方法获取。该方法会返回满足指定 CSS 选择器的第一个元素。如果没有找到符合条件的元素，则返回 null。

const h1 = document.querySelector('h1');

修改 h1 文本内容

获取到 <h1> 标签的引用之后，我们可以通过修改其 textContent 属性来更改文本内容。该属性可以读取或设置元素中的文本内容。以下是修改 <h1> 标签中文本内容的实例代码：

const h1 = document.querySelector('h1');
h1.textContent = 'Hello world!';

附：完整示例代码

以下是完整的示例代码，你可以将其复制到 HTML 页面中试验。

<!DOCTYPE html>
<html>
<head>
    <title>Change h1 Text</title>
    <meta charset="UTF-8">
    <script>
        window.onload = function() {
            const h1 = document.querySelector('h1');
            h1.textContent = 'Hello world!';
        };
    </script>
</head>
<body>
    <h1>Old Text</h1>
</body>
</html>

在页面加载完成后，该示例代码会将 <h1> 标签中的文本内容修改为 'Hello world!'。

以上就是如何使用 JavaScript 更改 <h1> 文本内容的介绍。