原生DOM 操作

归懿

于 2023-08-14 12:31:08 发布

阅读量86

点赞数

分类专栏：原生JS 文章标签： javascript

本文链接：https://blog.csdn.net/m0_73559209/article/details/132273533

版权

原生JS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍了如何通过JavaScript操作DOM，包括选取HTML元素（ID、标签名、类名和选择器）、修改元素内容、样式和属性，以及动态添加和删除元素。通过实例展示了如何实现动态列表的添加和元素高亮效果。

摘要由CSDN通过智能技术生成

DOM 操作

通过操作DOM（文档对象模型）来实现动态网页效果。
DOM是将网页以树状结构组织起来的方式，
JavaScript可以通过DOM API来选择、修改、添加和删除HTML元素。

选取HTML元素

可以使用多种方法来选取HTML元素，下面是一些常用的方法：
通过Id选取元素

let element = document.getElementById("#div");

通过标签名选取元素

let elements = document.getElementsByTagName("tagName");

通过类名选取元素

let elements = document.getElementsByClassName("className");

通过选择器选取元素

let element = document.querySelector("selector");

let elements = document.querySelectorAll("selector");

修改HTML元素

可以使用JavaScript来修改HTML元素的内容、样式以及属性。
修改元素内容

element.innerHTML = "New content";

修改元素样式

element.style.property = "value";

修改元素属性

element.setAttribute("attributeName", "value");

添加/删除CSS类

element.classList.add("className");

element.classList.remove("className");

添加和删除HTML元素

JavaScript可以动态地添加和删除HTML元素。
创建元素

let element = document.createElement("tagName");

添加子元素

parentElement.appendChild(childElement);

删除元素

parentElement.removeChild(childElement);

示例

下面是一个示例，通过JavaScript动态地添加和删除HTML元素：


<!DOCTYPE html>
<html>
<head>
    <title>DOM操作示例</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="container">
        <button id="addButton">添加元素</button>
        <ul id="list">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>

    <script>
        // 选取元素
        let addButton = document.getElementById("addButton");
        let list = document.getElementById("list");

        // 添加元素的事件处理函数
        addButton.addEventListener("click", function() {
            // 创建新的列表项
            let newItem = document.createElement("li");
            newItem.innerText = "New Item";

            // 添加到列表中
            list.appendChild(newItem);
        });

        // 点击列表项时的事件处理函数
        list.addEventListener("click", function(event) {
            let target = event.target;

            // 切换元素的CSS类
            if (target.classList.contains("highlight")) {
                target.classList.remove("highlight");
            } else {
                target.classList.add("highlight");
            }
        });
    </script>
</body>
</html>