清晰易懂的JavaScript进阶部分——DOM操作 (节点获取,节点属性修改,节点创建与插入,CSS样式的修改)

DOM操作(Document Object Model 文档对象模型)指的是通过JavaScript来操作网页的结构和内容。DOM提供了一种以文档树形式表示HTML或XML文档的方式,可以使用JavaScript来访问和修改网页的元素、属性和文本内容,且提供了一系列的函数和对象来实现增、删、改、

一、节点

DOM节点是HTML文档中的各个元素和文本的表示。在DOM树中,每个元素、文本和注释都被表示为一个节点对象。DOM节点是一个对象,它有属性和方法用于操作和控制该节点。

DOM节点可以分为以下几种类型:

  1. 元素节点(Element Node):表示HTML文档中的HTML元素,如<div>、<p>等。元素节点可以有子节点和属性。通过标签名来访问元素节点。

  2. 文本节点(Text Node):表示HTML文档中的文本内容,如文本节点内的文字、空格等。文本节点是元素节点的子节点,通过textContent属性来访问文本节点的内容。

  3. 属性节点(Attribute Node):表示HTML元素的属性,如class、id、src等。属性节点是元素节点的属性,通过getAttribute()和setAttribute()方法来获取和设置属性的值。

  4. 文档节点(Document Node):表示整个HTML文档,即根节点。文档节点是最顶层的节点,可以通过document对象来访问。

现在知道了解了节点,接下来可以通过操作DOM节点,可以实现对HTML文档的增删改查等操作,灵活控制页面的内容和样式。 

二、节点的获取

  在JavaScript中,可以使用各种方法来获取DOM节点。以下通过例子来展示一些常见的方法:

在htm页面l<body>标签下创建三个p标签 ,接下来通过操作JS来展示方法:

    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>

1. getElementsByTagName(tagName):通过元素的标签名获取节点。该方法返回一个节点列表,表示所有具有指定标签名的元素(若有多个相同标签,返回含有多个节点的类数组对象)

 例如:

        const p1 = document.getElementsByTagName("p");  
        console.log(p1);
        console.log(p1[0]);
        console.log(p1[1]);

运行结果:

 

2. getElementsByClassName(className):通过元素的类名获取节点。该方法返回一个节点列表,表示所有具有指定类名的元素(若有多个相同class,返回含有多个节点的类数组对象)

  例如:

        const p2 = document.getElementsByClassName("pp");
        console.log(p2);
        console.log(p2[0]);
        console.log(p2[1]);
        console.log(p2[2]);

运行结果:

3. getElementById(id):通过元素的id属性获取节点。该方法返回一个节点对象,该对象表示具有指定id的元素。

  例如:

        const p3 = document.getElementById("p3");
        console.log(p3);

运行结果:

4. querySelector(selector):通过CSS选择器获取单个节点。该方法返回一个节点对象,表示匹配指定CSS选择器的第一个元素(返回第一个匹配上的节点)。

  例如:

        const p5 = document.querySelector(".pp");
        console.log(p5);

运行结果:

5. querySelectorAll(selector):通过CSS选择器获取多个节点。该方法返回一个节点列表(NodeList对象),表示匹配指定CSS选择器的所有元素(包含所有匹配给定选择器的节点)。

  例如:

        const p4 = document.querySelectorAll(".pp");
        console.log(p4);
        console.log(p4[0]);
        console.log(p4[1]);
        console.log(p4[2]);

运行结果:

​​​​​​​6. parentNode:通过节点的parentNode属性获取其父节点。(补充)

  例如:

        var childNode = document.getElementById("p3");
        var parentNode = childNode.parentNode;
        console.log(parentNode); // 输出父节点对象

        // 修改父节点的样式
        parentNode.style.backgroundColor = "red";

运行结果:

 <body>标签背景样式也变成了红色

​​​​​​​7. childNodes:通过节点的childNodes属性获取其子节点列表。(补充)

  例如:

        var parentNode = document.getElementById("p3");
        var childNodes = parentNode.childNodes;
        console.log(childNodes); // 输出子节点的集合

运行结果:

三、 节点的属性修改

 要修改节点的属性,可以通过以下几种方式,下面通过实例来展示:

实验一、 查看属性和修改属性

 首先在htm页面l<body>标签下创建节点以供操作

 <p class="pp" id="p3">我是段落3</p>

 1.根据id获取节点

        const p = document.getElementById("p3");
        console.log(p);

 

通过getElementById方法获取了一个id为"p3"的节点对象,由控制台输出

  2.查看标签节点的属性

        console.log(p.id);
        console.log(p.className);

 

由控制台输出节点对象的id属性(id)和class属性(className

3.修改节点的id属性

3.1  直接通过节点对象的属性来进行修改

        p.id = "_p_3";
        console.log(p.id);

 

3.2  使用setAttribute方法来修改节点的属性。这个方法接受两个参数,第一个参数是要修改的属性名,第二个参数是要修改的属性值 

        p.setAttribute("id", "newId");
        console.log(p.id);

 

 4.修改节点的class属性

        p.className = "pp jj yy xx";
        console.log(p.className);

 

实验二、 classList对象的操作 

  首先在htm页面l<body>标签下创建节点以供操作

<p class="pp jj yy xx" id="p4">我是段落4</p>

 1.根据id获取节点

通过getElementById方法获取了一个id为"p4"的节点对象

        const p4 = document.getElementById("p4");
        console.log(p4.classList);
        console.log(p4.classList[0]);

 2.为classList添加一个新的class名 

        p4.classList.add("zz");
        console.log(p4.classList);

 

 3.为classList移除一个class名

        p4.classList.remove("xx");
        console.log(p4.classList);

 

4. 检查classList中是否存在某个class名,返回布尔值。

        console.log(p4.classList.contains("jj"));
        console.log(p4.classList.contains("xx"));

 

 实验三.、 其他属性的查看与修改(以<img>标签为例)

 首先在htm页面l<body>标签下创建节点以供操作

    <img src="./img_src/logo.png" alt="图片加载失败" id="img1">

通过getElementById方法获取了一个id为"img1"的节点对象,

然后使用 i.src = "./img_src/logo1.png"修改

        const i = document.getElementById("img1");  
        i.src = "./img_src/logo1.png";    // 修改src属性

 

四、节点的创建与插入

创建节点 

1. createElement(tagName): 创建一个具有指定标签名的元素节点。

示例:

        //创建一个<p>标签节点
        var p4 = document.createElement("p");

 2. createTextNode(text): 创建一个包含指定文本内容的文本节点。

示例: 

        //创建一个文本节点
        var t4 = document.createTextNode("我是段落5");

 3. createAttribute(attribute):用于创建一个属性节点。

示例: 

        var a4 = document.createAttribute("class"); // 创建属性节点
        a4.value = "fruit";  // 为属性节点赋值

插入节点 

1. appendChild(node): 将一个节点插入到另一个节点的子节点列表的末尾。

示例:

        //将文本节点作为子节点,加入新建的<p>标签节点下面
        p4.appendChild(t4); 

2. setAttributeNode(node):将一个属性节点添加到元素节点中。

示例:

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

通过getElementsByTagName方法获取了一个标签为"body"的节点对象,将已经配置号的<p>标签节点,作为子节点,插入body节点中


        const body_node = document.getElementsByTagName("body")[0];
        body_node.appendChild(p4);

这样一个节点就创建好啦! 

 

五、CSS样式的修改

 要修改元素的CSS样式,可以使用元素的style属性。style属性是一个对象,可以通过其属性来修改元素的CSS样式。

示例: 

首先创建节点及其属性以供操作

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

首先通过document.getElementById方法获取到id为"div1"的元素。然后,通过元素的style属性来修改元素的背景颜色、文字颜色和字体大小。可以直接给style属性的属性赋值,将其值设置为对应的CSS样式值。

        var e = document.getElementById("div1");
        e.style.backgroundColor = "red";
        e.style.color = "white";
        e.style.fontSize = "30px";

运行结果:

 还有另一种方法也可以修改CSS样式:直接修改该节点的CSS代码

利用反引号来解决过长字符串的换行问题,以提高阅读性(反引号:英文输入法下,按左上角那个键)

        var e = document.getElementById("div1");
        e.style.cssText = 
        `
            background-color: gray; 
            color:green;
            font-size: 50px;
        `;

运行结果:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/906838.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

服务器虚拟化

前言 服务器虚拟化是一种技术&#xff0c;它通过将一台物理服务器的软件环境分割成多个独立分区&#xff0c;使每个分区都能模拟出一台完整的虚拟服务器。这种技术利用虚拟化技术充分发挥服务器的硬件性能&#xff0c;提高运营效率&#xff0c;节约能源并降低经济成本。 通过…

如何在Linux下部署自己的ZFile开源网盘

ZFile 项目介绍 ZFile是一个功能强大、灵活的开源网盘系统&#xff0c;为用户提供安全便捷的文件存储和共享方案。 项目概述 ZFile由ZFile, Inc.开发和维护&#xff0c;基于Docusaurus构建。其用户友好的界面支持多种文件存储和共享功能&#xff0c;并具备高度的可定制性和扩…

StandardThreadExecutor源码解读与使用(tomcat的线程池实现类)

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java源码解读-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 目录 目录 1.前言 2.线程池基础知识回顾 2.1.线程池的组成 2.2.工作流程 2…

VBA字典与数组第二十讲:如何在代码运行时创建数组

《VBA数组与字典方案》教程&#xff08;10144533&#xff09;是我推出的第三套教程&#xff0c;目前已经是第二版修订了。这套教程定位于中级&#xff0c;字典是VBA的精华&#xff0c;我要求学员必学。7.1.3.9教程和手册掌握后&#xff0c;可以解决大多数工作中遇到的实际问题。…

J2:ResNet50v2算法实战与解析

J2周&#xff1a;ResNet50V2算法实战与解析 论文解读1、ResNetV2结构与ResNet结构对比☕2、关于残差结构的不同尝试☕3、关于激活的尝试☕ Pytorch实现ResNet50V2算法1、导入库并设置GPU2、导入和检查数据3、划分数据集4、搭建ResNet-50V2模型Residual BlockStack&#xff08;堆…

MFC图形函数学习04——画矩形函数

MFC中绘制矩形函数是MFC的基本绘图函数&#xff0c;它的大小和位置由左上角和右下角的坐标决定&#xff1b;若想绘制的矩形边框线型、线宽、颜色以及填充颜色都还需要其它函数的配合。 一、绘制矩形函数 原型&#xff1a;BOOL Rectangle(int x1,int y1,int x2,int y2); …

新手BUG:在声明了返回值的函数中不写返回值

本文对两个分别以int和string为返回值类型的函数进行分析&#xff0c;说明了在有返回值的函数中不写返回值会产生的问题。然后给出在编译阶段检查出这样的问题的办法。 一、背景 在软件测试环节发现&#xff0c;函数会在返回之前coredump。经过排查发现&#xff0c;在这个会…

机器人技术革新:人工智能的强力驱动

内容概要 在当今世界&#xff0c;机器人技术与人工智能的结合正如星星与大海&#xff0c;彼此辉映。随着科技的不断进步&#xff0c;人工智能不仅仅是为机器人赋予了“聪明的大脑”&#xff0c;更是推动了整个行业的快速发展。回顾机器人技术的发展历程&#xff0c;我们会发现…

外网访问 Immich 照片管理软件

Immich 是一个自托管的照片和视频备份的平台&#xff0c;它允许用户在私有服务器上存储、管理和分享他们的照片&#xff0c;视频等媒体文件。 第一步&#xff0c;本地部署安装 Immich 1&#xff0c;检查 Docker 服务状态&#xff0c;确保 Docker 正常运行。 systemctl statu…

电脑软件:推荐一款免费且实用的电脑开关机小工具

目录 一、软件简介 二、软件功能 三、软件特点 四、使用说明 五、软件下载 今天给大家推荐一款免费且实用的电脑开关机小工具KShutdown&#xff0c;有需要的朋友可以下载试一下&#xff01; 一、软件简介 KShutdown是一款精巧且实用的定时自动关机小工具&#xff0c;对于…

Manus在虚拟现实仿真模拟中的应用案例分享

Manus虚拟现实手套作为一种高精度的人机交互设备&#xff0c;在仿真模拟领域展现出了巨大的应用潜力。通过提供实时、准确的手指动作捕捉数据&#xff0c;Manus手套为多个行业带来了前所未有的仿真体验&#xff0c;推动了技术发展和应用创新。 技术特点 1. 高精度手指跟踪 Ma…

ensp中acl的使用

拓扑图及其要求如下 基础配置 检查此上R2配置错误&#xff0c;undo重新写 检查手写配置无误 按要求写配置 要求1完成 因为一个接口的入或者出方向上 只能调用一张acl表格&#xff0c;所以要求二照样在R1上面写 要求3

5. STM32之TIM实验--输出比较(PWM输出,电机,四轴飞行器,智能车,机器人)--(实验5:PWM驱动直流电机)

作者:Whappy,日期:2024.10.29,决战STM32 直流电机的控制就比较简单了,只有数据线和地线,正接正转,反接反转,为了方便,本实验采用H桥电路来控制电机的正反转,H桥电路也很简单,就是4个MOS管构成的2路推挽输出电路. 注:基本上大功率器件,单片机基本上是无法驱动的,都是要靠一部分…

Python基础知识汇总(建议收藏再观看)!

1.执行脚本的两种方式 Python a.py 直接调用Python解释器执行文件 chomd x a.py ./a.py #修改a.py文件的属性&#xff0c;为可执行&#xff0c;在用 ./ 执行a.py 文件 2、简述位、字节的关系 1bytes8bit ,2**8256,可以代表256中变化&#xff0c; 3、简述 ascii、unicode、…

Java中IO的高级操作

目录 缓冲流 缓冲字节输入流&#xff1a; 缓冲字节输出流&#xff1a; 缓冲字符输入流&#xff1a; 缓冲字符输出流&#xff1a; 转换流 转换流字符输入&#xff1a; 转换流字符输出&#xff1a; 练习案例&#xff1a; 打印流 字节打印流&#xff1a; 字符打印流&a…

Matlab高光谱遥感

原文链接&#xff1a;Matlab高光谱遥感https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247623643&idx5&sne4557ed43728f851140b100f42286988&chksmfa8da23ccdfa2b2a4d795bf4087f672faaa7082d1f52e046616ab7bf196a6eef89ea553d06b1&token1392391660&…

ssm+jsp663数学课程评价系统的设计与开发

博主介绍&#xff1a;专注于Java&#xff08;springboot ssm 等开发框架&#xff09; vue .net php phython node.js uniapp 微信小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作 ☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不…

openssl-ec-chn命令手册

openssl-ec命令处理EC&#xff08;Elliptic Curve&#xff0c;椭圆曲线&#xff09;密钥。使密钥可以在各种形式之间转换&#xff0c;并打印出其组件。注意&#xff1a;OpenSSL使用“SEC 1:椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;”中指定的私钥格…

(JVM)深入JAVA底层 JVM(Java 虚拟机)!带你认识JVM、程序计数器、JVM栈和方法栈还有堆内存!看看JAVA针对这些内存空间都做了什么吧!

1. 什么是JVM java 二进制字节码的运行环境&#xff0c;简称&#xff1a;java 虚拟机&#xff08;Java Virtual Machine&#xff09; 2. 好处是什么 一次编写&#xff0c;到处运行自动内存管理&#xff0c;GC垃圾回收功能数组下标越界检查多态… 3. jdk、jre、jvm 4. 学习J…

OLAP平台架构演化历程

OLAP平台架构演化历程 0 导读 随着大数据的持续发展及数字化转型的兴起&#xff0c;大数据OLAP分析需求越来越迫切&#xff0c;不论是大型互联网企业&#xff0c;还是中小型传统企业&#xff0c;都在积极探索及实践OLAP引擎选型及平台架构建设&#xff0c;大数据技术的蓬勃发展…