JavaScript-DOM编程（节点获取，节点属性修改，节点创建与插入，CSS样式的修改）【新手小白入！！！】

白菜头332024-11-03 17:52

DOM是document object model（文档对象模型的缩写）。DOM提供了一种结构化的方式来访问和更新网页内容，可以动态地添加、删除或修改网页中的元素和属性。使用JavaScript进行DOM编程，可以实现各种交互效果，比如响应用户的点击事件、更新内容、动画效果等。

一、Dom节点获取

在DOM编程中，获取节点可以通过多种方法实现，如 getElementsByTagName、getElementById、getElementsByClassName、querySelector、querySelectorAll等。

  • getElementsByTagName 通过标签名来获取节点 （若有多个相同标签，返回含有多个节点的类数组对象）。例如：先创建3个<p>标签，通过getElementsByTagName获取节点。
html 复制代码 
    <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
<script>
        const p1 = document.getElementsByTagName("p");  
        console.log(p1);        // p1有多个相同标签，故返回含有多个节点的类数组对象
        console.log(p1[0]);     // 通过下标获取相对应的节点
        console.log(p1[1]);
</script>

结果显示：

  • getElementsByClassName通过class名来获取节点（若有多个相同class，返回含有多个节点的类数组对象）。例如：先创建3个<p>标签，再添加class属性去获取节点。
html 复制代码 
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>
<script>
    // getElementsByClassName 通过class名来获取节点（若有多个相同class，返回含有多个节点的类数组对象）
        const p2 = document.getElementsByClassName("pp");
        console.log(p2);
        console.log(p2[0]);
        console.log(p2[1]);
        console.log(p2[2]);
</script>

结果显示：

  • getElementById通过id名来获取节点（直接返回可操控的节点）。需设置id属性。
html 复制代码 
    <p>我是段落1</p>
    <p>我是段落2</p>
    <p id="p3">我是段落3</p>
<script>
        // getElementById 通过id名来获取节点（直接返回可操控的节点）
        const p3 = document.getElementById("p3");
        console.log(p3);
</script>

结果显示：

  • querySelectorAll 通过CSS选择器获取节点，返回NodeList对象（包含所有匹配给定选择器的节点）。
html 复制代码 
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp">我是段落3</p>
<script>
    // querySelectorAll 通过CSS选择器获取节点，返回NodeList对象（包含所有匹配给定选择器的节点）
        const p4 = document.querySelectorAll(".pp");    // .pp:class 属性
        console.log(p4);
        console.log(p4[0]);
        console.log(p4[1]);
        console.log(p4[2]);
</script>

结果显示：

  • querySelector通过CSS选择器获取节点，返回第一个匹配上的节点。
html 复制代码 
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>
<script>
        // querySelector 通过CSS选择器获取节点，返回第一个匹配上的节点
        // 只返回第一个节点
        const p5 = document.querySelector(".pp");
        console.log(p5);
</script>

结果显示：

二、Dom节点的属性修改

1、查看属性和修改属性

html 复制代码 
<p class="pp" id="p3">我是段落3</p>
<script>
        // 1.根据id获取节点 
        const p = document.getElementById("p3");
        console.log(p);
        // 2.查看标签节点的属性
        console.log(p.id);
        console.log(p.className);
        // 3.修改节点的id属性
        p.id = "_p_3";
        console.log(p.id);
        // 4.修改节点的class属性
        p.className = "pp jj yy xx";
        console.log(p.className);
</script>

结果显示：

2、classList对象的操作

classList属性用于返回一个元素的className集合。

1）根据id获取节点
html 复制代码 
<p class="pp jj yy xx" id="p4">我是段落4</p>
<script>
        // 根据id获取节点
        const p4 = document.getElementById("p4");
        console.log(p4.classList);
        console.log(p4.classList[0]);
</script>

结果显示：

2）为classList添加一个新的class名
html 复制代码 
    <p class="pp jj yy xx" id="p4">我是段落4</p>
    <script>
        // 为classList添加一个新的class名
        p4.classList.add("zz");
        console.log(p4.classList);
    </script>

结果显示：

3）为classList移除一个class名
html 复制代码 
    <p class="pp jj yy xx" id="p4">我是段落4</p>
    <script>
        // 为classList移除一个class名
        p4.classList.remove("xx");
        console.log(p4.classList);
    </script>

结果显示：

4）检查classList中是否存在某个class名，返回布尔值
html 复制代码 
    <p class="pp jj yy xx" id="p4">我是段落4</p>
    <script>
        // 检查classList中是否存在某个class名，返回布尔值。
        console.log(p4.classList.contains("jj"));
        console.log(p4.classList.contains("zz"));
    </script>

结果显示：

三、Dom节点创建与插入

1、创建节点

  • **createElement:**创建标签节点

代码显示：

html 复制代码 
    <p class="pp jj yy xx" id="p4">我是段落4</p>
<script>
        var p4 = document.createElement("p");
        console.log(p4);
</script>
  • **createTextNode:**创建文本节点

代码显示：

html 复制代码 
    <script>
        var t4 = document.createTextNode("我是文本节点");
        console.log(t4);
</script>
  • **createAttribute:**创建一个属性节点并为其赋值

代码显示：

html 复制代码 
<script>
    //创建一个属性节点并为其赋值
        var a4 = document.createAttribute("class"); // 创建属性节点
        a4.value = "fruit";  // 为属性节点赋值
        console.log(a4);    
</script>

2、插入节点

在DOM（文档对象模型）中插入节点可以通过JavaScript来实现。appendChild 和 setAttributeNode 是两个不同的 DOM 操作方法，分别用于不同的目的。

  • appendChild方法用于将一个节点添加到指定父节点的子节点列表的末尾。
html 复制代码 
 <p class="pp" id="p3">我是段落3</p> 
    <script>
        // 创建一个<p>标签节点
        var p4 = document.createElement("p");
        // 创建一个文本节点
        var t4 = document.createTextNode("我是文本节点");
        // 将文本节点作为子节点，加入新建的<p>标签节点下面
        p4.appendChild(t4);    
        console.log(p4);
    </script>

结果显示：

  • setAttributeNode方法则是用于设置一个元素的属性。
html 复制代码 
    <p>我是段落3</p>
    <script>
        //创建一个<p>标签节点
        var p4 = document.createElement("p");
        var a4 = document.createAttribute("class"); // 创建属性节点
        a4.value = "fruit";  // 为属性节点赋值

        // 将属性节点插入新建的<p>标签节点
        p4.setAttributeNode(a4);
        console.log(p4);
    </script>

结果显示：

四、CSS样式的修改

通过 JavaScript 修改 CSS 样式可以非常灵活地控制网页的外观。可以直接访问元素的 style 属性来更改样式，或者通过 修改该节点的CSS 代码来改变样式。

先创建一个div盒子，为其设置class和id属性，并为盒子设置样式。原代码显示：

html 复制代码 
<style>
        .box{
            width: 50%;
            height: 200px;
            color:blue;
            background-color: aliceblue;
            
        }
    </style>
<body>
    <div class="box"  id="div1">利用js修改CSS样式</div>
</body>

结果显示：

方式1:直接访问元素的 style 属性来更改样式

html 复制代码 
<style>
        .box{
            width: 50%;
            height: 200px;
            color:blue;
            background-color: aliceblue;
            
        }
    </style>
<div class="box"  id="div1">利用js修改CSS样式</div>
    <script>
        var e = document.getElementById("div1");

        // 方式1:  我自己更常用，觉得更清晰
        e.style.backgroundColor = "red";
        e.style.color = "white";
        e.style.fontSize = "30px";
</script>

结果显示：

方式2:直接修改该节点的CSS代码

html 复制代码 
<style>
        .box{
            width: 50%;
            height: 200px;
            color:blue;
            background-color: aliceblue;
            
        }
    </style>
<body>
    <div class="box"  id="div1">利用js修改CSS样式</div>
    <script>
        var e = document.getElementById("div1");
        // 方式2:  直接修改该节点的CSS代码
        // 利用反引号来解决过长字符串的换行问题，以提高阅读性
        // 如何在键盘中输入反引号：英文输入法下，按左上角那个键
        e.style.cssText = 
        `
            background-color: gray; 
            color:green;
            font-size: 50px;
        `;

    </script>
</body>

结果显示：

相关推荐
晴天1622 分钟前
前端 postMessage 使用场景
前端·javascript·网络
zhanghaha13141 小时前
HTML系列教程：14_HTML 表单与输入框 ＜form＞、＜input＞ 零基础详解
java·前端·javascript
傻啦嘿哟7 小时前
某招聘平台爬虫：爬取招聘岗位数据，分析各城市薪资水平
开发语言·爬虫·python
2501_933670797 小时前
2026秋招量化分析岗技能栈：Python、SQL、统计建模、回测项目怎么准备
开发语言·python·sql
李少兄7 小时前
JavaScript 数据类型完全指南
开发语言·javascript·ecmascript
Seoyoneh8 小时前
Agentic Workflow编排架构：云客服从“被动响应”迈向“主动执行”的技术实现
java·开发语言·架构
Tangyuewei8 小时前
Java 写 Agent：模型只是组件
java·开发语言
小玮看世界9 小时前
[Python]从合并区间到传感器融合区：合并区间在传感器区域融合的实际落地
开发语言·python
繁星蓝雨10 小时前
C++的设计与演进大纲（如何从C语言一步步成长为C++）
c语言·开发语言·c++·c++历史·c++演进
Evand J10 小时前
【MATLAB例程，图像降噪滤波9】自适应维纳滑动窗口滤波（Wiener）图像降噪、方法对比，有中文注释
开发语言·图像处理·计算机视觉·matlab·滑动窗口·滤波·降噪
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接03如何新建文件夹？ 电脑新建文件夹的4种方法04GitHub 镜像站点05历年考研数学一、数学二、数学三真题试卷及答案PDF06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新072026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？08【一等奖版】2026 国赛 A题 药材的烘干问题09ZCode 周末送额度活动开启：3 亿 Token 免费领取10Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费