JS修改HTML内容|极客笔记

JS修改HTML内容

在 web 开发中，JavaScript 是一种常用的脚本语言，可以用来实现动态的网页效果和交互行为。通过 JavaScript，我们可以轻松地操作 HTML 元素，改变它们的内容、样式或行为。本文将介绍如何使用 JavaScript 来修改 HTML 内容。

1. 获取 HTML 元素

在修改 HTML 内容之前，首先需要获取到需要操作的 HTML 元素。我们可以通过 JavaScript 中的 document.getElementById() 方法来获取指定 id 的元素，或者通过 document.querySelector() 方法获取符合指定 CSS 选择器的第一个元素。

下面是一个简单的示例，演示如何获取一个 id 为 “content” 的元素：

<!DOCTYPE html>
<html>
<head>
    <title>JS修改HTML内容</title>
</head>
<body>
    <div id="content">
        Hello World!
    </div>

    <script>
        // 获取 id 为 "content" 的元素
        var content = document.getElementById("content");
        console.log(content.textContent);
    </script>
</body>
</html>

在上面的示例中，我们通过 document.getElementById("content") 方法获取了 id 为 “content” 的 div 元素，并将其赋值给变量 content。然后我们通过 content.textContent 获取了该元素的文本内容，并通过 console.log() 方法打印出来。

2. 修改 HTML 内容

一旦获取到了需要操作的 HTML 元素，我们就可以通过 JavaScript 来修改它的内容。常见的操作包括修改元素的文本内容、属性值或样式。

2.1 修改文本内容

要修改 HTML 元素的文本内容，可以通过元素的 textContent 或 innerHTML 属性来实现。其中，textContent 会直接将文本内容作为纯文本处理，而 innerHTML 则会将内容作为 HTML 代码进行解析。

下面是一个示例，演示如何使用 textContent 修改元素的文本内容：

<!DOCTYPE html>
<html>
<head>
    <title>JS修改HTML内容</title>
</head>
<body>
    <div id="content">
        Hello World!
    </div>

    <script>
        var content = document.getElementById("content");
        content.textContent = "Hello JavaScript!";
    </script>
</body>
</html>

在上面的示例中，我们将 id 为 “content” 的 div 元素的文本内容修改为了 “Hello JavaScript!”。

2.2 修改属性值

除了修改文本内容，我们还可以通过 JavaScript 来修改 HTML 元素的属性值。例如，我们可以通过 setAttribute() 方法来设置元素的属性值。

下面是一个示例，演示如何使用 setAttribute() 方法修改元素的属性值：

<!DOCTYPE html>
<html>
<head>
    <title>JS修改HTML内容</title>
</head>
<body>
    <img id="image" src="image.jpg" alt="Image">

    <script>
        var image = document.getElementById("image");
        image.setAttribute("src", "new_image.jpg");
        image.setAttribute("alt", "New Image");
    </script>
</body>
</html>

在上面的示例中，我们获取了 id 为 “image” 的 img 元素，并使用 setAttribute() 方法将其 src 和 alt 属性值修改为了 “new_image.jpg” 和 “New Image”。

2.3 修改样式

通过 JavaScript，我们还可以修改 HTML 元素的样式。可以通过元素的 style 属性来访问和修改元素的内联样式。

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

<!DOCTYPE html>
<html>
<head>
    <title>JS修改HTML内容</title>
    <style>
        .highlight {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="content">
        Hello World!
    </div>

    <script>
        var content = document.getElementById("content");
        content.style.color = "red";
        content.style.fontWeight = "bold";
    </script>
</body>
</html>

在上面的示例中，我们将 id 为 “content” 的 div 元素的颜色修改为了红色，并设置了加粗样式。