JavaScript可以通过DOM操作HTML元素。

DOM：Document Object Model（文档对象模型）

一、改变HTML内容

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为2-1.JavaScript操作HTML-改变HTML内容.html

<!DOCTYPE html>
<html>
    <head>
        <!-- 调整字符集为utf-8 -->
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    </head>
    <!--
        js是可以操作网页,网页的数据/内容、网页的元素、样式和属性
        DOM操作
        DoM：Document object mode1,html编程接口,可以通过编程的接口修改网页的内容
    -->
    <!--
        1.通过ID进行选择,比较精确
        document.getElementById
        2.通过ClassName进行选择
        document.getElementsByClassName
        3.通过标签的名称进行选择
        document.getElementsByTagName
    -->
    <div id="demo1" class="demo">
    </div>

    <div id="demo2" class="demo">

    </div>
    <script>
        // 1.先找到这个元素
        var divElement = document.getElementById("demo1")
        divElement.innerHTML = "通过JS插入一条数据"
    </script>
</html>

2、双击【2-1.JavaScript操作HTML-改变HTML内容.html】,输出内容为：通过JS插入一条数据

二、改变HTML属性

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为2-2.JavaScript操作HTML-改变HTML属性.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修改属性演示</title>
    <style>
        .box {
            padding: 20px;
            margin: 10px;
            border: 2px solid #3498db;
        }
        #new-div {
            background: #f1c40f;
        }
    </style>
</head>
<body>
    <!-- 属性操作容器 -->
    <div id="demo2" class="demo box"></div>

    <script>
        // ========== 属性操作 ==========
        // 创建新元素
        const newElement = document.createElement("div");
        newElement.setAttribute("id", "new-div");
        newElement.setAttribute("class", "box");
        newElement.innerHTML = "新建的DIV元素";

        // 元素插入操作
        const container = document.getElementById("demo2");
        container.appendChild(newElement);

        // 修改现有元素属性
        container.setAttribute("title", "属性操作演示容器");
    </script>
</body>
</html>

2、双击【2-2.JavaScript操作HTML-改变HTML属性.html】

image-20250520085356853

三、改变HTML样式

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为2-3.JavaScript操作HTML-改变HTML样式.html

<!DOCTYPE html>
<html>
<body>
    <p id="text">点击按钮改变样式</p>
    <button onclick="changeStyle()">改变样式</button>

    <script>
    function changeStyle() {
        const text = document.getElementById("text");
        text.style.color = "#ff0000";
        text.style.fontSize = "24px";
        text.style.backgroundColor = "#ffeebb";
    }
    </script>
</body>
</html>

2、双击【2-3.JavaScript操作HTML-改变HTML样式.html】，点击【改变样式】

image-20250520085533446

四、实现元素的显示和隐藏

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为2-4.JavaScript操作HTML-元素的显示和隐藏.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>元素显示隐藏演示</title>
    <style>
        /* 样式设置 */
        #toggleBox {
            width: 200px;
            height: 100px;
            background: #3498db;
            margin: 20px;
            display: block;
            transition: opacity 0.3s;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background: #2ecc71;
            border: none;
            color: white;
            border-radius: 4px;
        }
        .status-text {
            margin-left: 10px;
            color: #666;
        }
    </style>
</head>
<body>
    <!-- 操作按钮 -->
    <button onclick="toggleElement()">切换显示状态</button>
    <span class="status-text" id="status">当前状态：显示</span>

    <!-- 目标元素 -->
    <div id="toggleBox"></div>

    <script>
        // 获取元素引用
        const targetElement = document.getElementById("toggleBox");
        const statusElement = document.getElementById("status");

        // 切换显示状态函数
        function toggleElement() {
            if (targetElement.style.display === "none") {
                // 显示元素
                targetElement.style.display = "block";
                statusElement.textContent = "当前状态：显示";
            } else {
                // 隐藏元素
                targetElement.style.display = "none";
                statusElement.textContent = "当前状态：隐藏";
            }
        }
    </script>
</body>
</html>

2、双击【2-4.JavaScript操作HTML-元素的显示和隐藏.html】，点击【切换显示状态】

显示状态

image-20250520090438987

隐藏状态

image-20250520090535412