JavaScript的DOM操作

GiveHub

已于 2024-03-08 11:15:18 修改

阅读量896

点赞数 24

分类专栏： JavaScript基础整理文章标签： javascript 开发语言 ecmascript 前端

于 2024-03-08 11:00:00 首次发布

本文链接：https://blog.csdn.net/m0_61841474/article/details/136548155

版权

JavaScript基础整理专栏收录该内容

27 篇文章 0 订阅

订阅专栏

HTML文档对象模型（Document Object Model，简称DOM）是HTML和XML文档的编程接口，它将整个文档表示为一个树结构，每个节点都是文档中的一部分。通过DOM，开发者可以使用脚本语言（比如JavaScript）来操作文档的任何部分。

DOM树中的每个元素节点代表文档中的一个元素（比如<p>、<div>等），每个文本节点代表元素中的文本内容，而每个属性节点代表一个元素的属性（比如id、class等）。DOM还包括其他类型的节点，比如注释节点、文档节点等。

开发者可以通过DOM来访问、修改、添加或删除文档的任何部分。通过JavaScript可以轻松地找到特定元素、修改元素的样式、内容或属性、添加新元素等操作。在网页开发中，DOM是非常重要的一部分，它使得开发者可以通过JavaScript动态地改变页面，从而实现互动性和用户体验。

当处理DOM元素时，通常需要在HTML中包含相应的元素以便JavaScript进行操作。

下面提供一个HTML代码示例，展示如何配合使用JavaScript获取DOM元素并对其进行操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript DOM操作示例</title>
    <style>
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }
    </style>
</head>
<body>
    <h1 id="heading">这是一个标题</h1>
    <button id="changeColorBtn">点击修改标题颜色</button>

    <script>
        // 获取元素并添加事件监听
        var heading = document.getElementById("heading");
        var changeColorBtn = document.getElementById("changeColorBtn");

        changeColorBtn.addEventListener("click", function() {
            if (heading.classList.contains("red")) {
                // 如果标题为红色，则改为蓝色
                heading.classList.remove("red");
                heading.classList.add("blue");
            } else {
                // 否则改为红色
                heading.classList.remove("blue");
                heading.classList.add("red");
            }
        });
    </script>
</body>
</html>

在上面的HTML代码中，有一个包含一个标题和一个按钮的简单页面。JavaScript部分获取了标题元素和按钮元素，然后为按钮添加了点击事件监听器。当点击按钮时，切换标题元素的类名，从而改变标题的颜色。

JavaScript中获取DOM的方式有以下几种

getElementById()：

通过元素ID获取DOM元素。

var element = document.getElementById("elementId");

getElementsByClassName()：

通过类名获取DOM元素。

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

getElementsByTagName()：

通过标签名获取DOM元素。

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

querySelector()：

通过选择器获取DOM元素（返回匹配的第一个元素）。

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

querySelectorAll()：

通过选择器获取DOM元素（返回所有匹配的元素）。

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

parentNode：

用于获取父节点。

var parentElement = element.parentNode;

childNodes：

用于获取子节点列表。

var childNodesList = element.childNodes;

nextSibling：

用于获取下一个兄弟节点。

var nextSiblingElement = element.nextSibling;

previousSibling：

用于获取上一个兄弟节点。

var previousSiblingElement = element.previousSibling;

JavaScript中可以通过DOM来改变元素的style样式。可以使用元素的style属性来访问和修改元素的CSS样式。

直接修改style属性的值：

可以直接修改元素的style属性来改变其样式。
例如，下面的代码将元素的背景颜色改为红色：

var element = document.getElementById("elementId");
element.style.backgroundColor = "red";

使用setAttribute()方法：

可以使用setAttribute()方法来设置元素的样式属性。
例如，下面的代码将元素的宽度改为200px：

var element = document.getElementById("elementId");
element.setAttribute("style", "width: 200px;");

添加或移除CSS类：

可以通过添加或移除CSS类来改变元素的样式。可以使用classList属性中的方法来操作CSS类。
例如，下面的代码给元素添加一个名为"active"的CSS类：

var element = document.getElementById("elementId");
element.classList.add("active");

设置style.cssText属性：

可以使用style.cssText属性来设置元素的样式。这个属性可以接受包含多个CSS属性和值的字符串。
例如，下面的代码将元素的颜色和字体大小同时改变：

var element = document.getElementById("elementId");
element.style.cssText = "color: blue; font-size: 16px;";

需要注意的是，使用JavaScript修改元素样式时，要确保对元素的有效性进行检查，以避免出现错误。

JavaScript中可以通过DOM来对元素的class类名进行增删改查。可以使用元素的classList属性和相关方法来操作元素的类名。

添加类名：

可以使用classList.add()方法向元素添加一个或多个类名。
例如，下面的代码将名为newClass的类名添加到元素上：

var element = document.getElementById("elementId");
element.classList.add("newClass");

移除类名：

可以使用classList.remove()方法从元素中移除一个指定的类名。
例如，下面的代码将名为oldClass的类名从元素中移除：

var element = document.getElementById("elementId");
element.classList.remove("oldClass");

切换类名：

可以使用classList.toggle()方法在类名存在时移除它，不存在时添加它。这样可以实现类名的切换效果。
例如，下面的代码切换元素是否具有名为active的类名：

var element = document.getElementById("elementId");
element.classList.toggle("active");

检查是否包含某个类名：

可以使用classList.contains()方法来检查元素是否包含特定的类名。该方法返回一个布尔值。
例如，下面的代码检查元素是否含有名为checkClass的类名：

var element = document.getElementById("elementId");
if(element.classList.contains("checkClass")) {
    // 如果包含该类名
}