当前位置： 首页 > news >正文

JavaScript-----DOM元素

news 2025/12/28 2:29:40

 目录

前言：

1. DOM介绍

2. 获取节点

3. 操作HTML内容

4. 监听事件

案例

5. 操作节点的标签属性

6. 操作样式

7. 创建、添加、删除节点

前言：

        在此之前我们要想去操作网页元素一般是去通过CSS选择器实现的，今天我们就学习JavaScript里面的DOM元素，通过DOM元素我们可以去选中并且对网页页面元素进行操作，这是一个很重要的内容，下面我会去详细讲解，一起来学习吧。

1. DOM介绍

DOM全称为 “Document Object Model”，文档对象模型，提供操作HTML文档的方法。（注：每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。）

当网页加载时，浏览器就会自动创建当前页面的文档对象模型（DOM）。在DOM中，文档的所有部分（例如元素、属性、文本等）都会被组织成一个树结构（类似于族谱），树中每一个分支的终点称为一个节点，每个节点都是一个对象。

2. 获取节点

DOM为我们提供了一个全局内置对象document，要操作HTML标签，我们可以调用document对象中的各种方法来获取页面中的标签（在js中我们可以称之为 元素 或者 节点）：

根据CSS选择器来获取DOM元素

// 选择匹配的第一个元素
// 返回值：CSS选择器匹配的第一个元素。如果没有匹配到，则返回null。
document.querySelector('css选择器')
// 选择匹配的多个元素
// 返回值：CSS选择器匹配的NodeList对象集合  是一个伪数组
document.querySelectorAll('css选择器')

通过ID获取：document.getElementById()

通过class名获取：document.getElementsByClassName()

通过标签名获取：document.getElementsByTagName()  

注意： document.getElementById()这个获取到的是一个DOM元素，也就是标签元素，而document.getElementsByClassName()和document.getElementsByTagName()  获取到的是一个HTMLCollection对象（是一个存放DOM元素的列表），如果要想获取到DOM元素，那么就可以从HTMLCollection列表拿出里面的DOM元素即可

看代码示例：

<body><div class="fine"><div class="he">123</div><div id="good" class="he">486</div></div><script>console.log(document.getElementById('good')); //获取id为good的标签元素console.log(document.getElementsByClassName('he')); console.log(document.getElementsByClassName('he')[0]);console.log(document.getElementsByTagName('div'));console.log(document.querySelector('.fine .he'));//获取到第一个console.log(document.querySelectorAll('.fine .he')); //获取到满足条件CSS选择器的全部</script>
</body>

结果如下：

3. 操作HTML内容

节点.innerHTML : 读取或设置元素文本内容,可识别标签语法

节点.innerText : 读取或设置元素文本内容,不能识别标签语法

注意：当使用innerHTML和innerText 对内容进行修改的时候要小心，修改了之后会把原来的全部内容给覆盖掉，包括标签文本等等……都会被覆盖

示例：

<body><div class="fine">只因你太美 baby<div class="he">123</div><div id="good" class="he">486</div></div><script>//获取数据console.log(document.getElementsByClassName('fine')[0].innerHTML);//(html)获取到里面的全部数据console.log(document.getElementsByClassName('fine')[0].innerText);//(text) 获取到里面的文本数据//修改数据document.getElementsByClassName('fine')[0].innerHTML='我家哥哥是最棒的！';console.log(document.getElementsByClassName('fine')[0].innerHTML);//重新获取里面的数据内容</script>
</body>

4. 监听事件

事件是达到某个事先设定的条件，自动触发的动作。例如点击了某个按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。我们可以使用 JavaScript中的监听事件来检测事件是否发生并执行某些特定的程序。

事件种类

事件描述
onclick点击鼠标左键时触发此事件
onmouseover当鼠标移动到某个元素上方时触发此事件
onmouseout当鼠标离开某个元素范围时触发此事件
onblur当前元素失去焦点时触发此事件
onfocus当某个元素获得焦点时触发此事件
onscroll当滚动浏览器的滚动条时触发此事件

执行方式

1. 直接在元素本身调用属性=函数

2. 在js代码里面获取到元素然后附加一个事件=执行函数

注意：这两张方式this的指向性不同，第一种this指向为window，第二种this指向是当前元素 

代码书写步骤

  • 获取事件源：document.getElementById(“box”);

  • 绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };

 代码示例（以鼠标点击为例）：

<body><div class="kun"><p onclick="fun()"><span>迎面走来的你让我如此蠢蠢欲动</span></p><p><span>这种感觉是我从未got the crash on you who you</span></p></div><script>//第一种function fun(){console.log(this);console.log('坤坤点击了我');}//第二种document.getElementsByTagName('p')[1].onclick=function(){console.log(this);console.log('坤坤又点击了我');}</script>
</body>

案例

我们去浏览网页的时候，当如果滚轮向下滚动到一定距离的时候就会出现一个回到顶部的按键，按下我们就可以回到顶部，下面代码通过JavaScript去实现这个功能。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.back{border: 2px solid red;width: 100px;height: 100px;position: fixed;right: 0;text-align: center;bottom: 100px;line-height: 100px;display: none; /* 默认不显示 */}</style>
</head>
<body><!-- 创建一个锚点 --><div id="top">这里是顶部</div><!-- 这个是一个滚动的页面标签 --><div style="height: 2000px;"></div><div class="back"><a href="#top">回到顶部</a></div><script>// 执行的this指向对象是windowwindow.onscroll=function(){let movey=document.documentElement.scrollTop; //获取到页面向下滚动的距离console.log(movey);  //打印移动的距离if (movey>=500){ //判断，如果向下滚动超过了500像素，就让锚点出现document.getElementsByClassName('back')[0].style.display='block';}else{document.getElementsByClassName('back')[0].style.display='none';}}</script>
</body>
</html>

 效果如下：

5. 操作节点的标签属性

直接使用 节点.属性 的方式。eg：console.log(节点.id); 节点.title = "新的title"。class名字不能 .class ，而是使用 .className 代替。

6. 操作样式

访问元素节点的style属性，获取样式对象；样式对象中包含CSS属性，使用点语法操作。

p.style.color = "white";
p.style.width = "300px";
p.style.fontSize = "20px";

如果css属性名包含连接符，使用JS访问时，一律去掉连接符,改为驼峰， font-size -> fontSize

使用 .className 可以来操作标签的类名，但是需要新加一个类名，或者去掉某个类名时，使用.className较为麻烦。所以推荐使用.classList` 来操作类名。

添加：节点.classList.add("类名")

移除：节点.classList.remove("类名")

切换（有则删，无则加）：节点.classList.toggle("类名")

7. 创建、添加、删除节点

  • 创建节点：createElement 创建一个元素节点；

  • 添加节点：

    • appendChild(node) 元素最后添加一个子节点；

    • insertBefore(node,Enode) 在元素某个子节点之前添加新子节点，第一个参数为新节点，第二个参数为已存在的子节点。

  • 替换节点：replaceChild(node,Enode) 用新节点替换某个子节点，第一个参数为新节点，第二个参数为已存在的某个子节点。

  • 删除节点：removeChild(node) 删除元素的某个子节点。

看代码示例：

<body><div class="amgin"><p><span> 马格南</span></p></div><script>//创建元素节点let p=document.createElement('button');let q=document.createElement('button');let x=document.createElement('div');//插入节点:元素最后添加一个子节点document.getElementsByClassName('amgin')[0].appendChild(p);//插入节点：在元素某个子节点之前添加新子节点document.getElementsByClassName('amgin')[0].insertBefore(q,document.querySelector('.amgin p'));//替换节点document.getElementsByClassName('amgin')[0].replaceChild(x,document.querySelector('.amgin p'));//删除节点document.getElementsByClassName('amgin')[0].removeChild(q);</script>
</body>

结果：

 好了，以上就是今天的全部内容了，我们下一期再见！

分享一张壁纸：

相关文章：

JavaScript-----DOM元素

目录 前言&#xff1a; 1. DOM介绍 2. 获取节点 3. 操作HTML内容 4. 监听事件 案例 5. 操作节点的标签属性 6. 操作样式 7. 创建、添加、删除节点 前言&#xff1a; 在此之前我们要想去操作网页元素一般是去通过CSS选择器实现的&#xff0c;今天我们就学习JavaScript里…...

编程日记 2023/9/8 19:40:20

激光切割机在船舶行业的的应用有哪些

我国享有世界工厂的美誉&#xff0c;是全球制造业的主力。然而&#xff0c;在船舶制造的关键技术领域&#xff0c;我国的研发投入不足&#xff0c;技术进步仍滞后&#xff0c;我国高端船舶制造的实力仍显不足。 在我国制造业全面复苏的当前背景下&#xff0c;“精准制作”正构成…...

编程日记 2023/9/8 19:39:19

AFL++模糊测试

一、AFL 这里我们主要使用AFL Fuzzing 测试IOT的二进制文件&#xff0c;当我们解压提取一个固件时&#xff0c;能够获得大量的IOT二进制应用 &#xff0c;如果要进行漏洞挖掘则需要将二进制文件进行逆向分析&#xff0c;然后查找危险函数以及输入接口&#xff0c;对于一个大型的…...

编程日记 2023/9/8 19:38:17

C# 使用ListBox及Picturebox显示所选的任意路径文件夹下的图像

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System...

编程日记 2023/9/8 19:36:14

数据库: 存储过程

sql server begin end用法: SQL Server中的BEGIN END用法是用于定义一个代码块&#xff0c;这个代码块可以包含多个SQL语句&#xff0c;BEGIN END通常用于控制流程语句&#xff0c;例如IF语句、WHILE语句、TRY CATCH语句等。在BEGIN END代码块中&#xff0c;可以使用变量、函数…...

编程日记 2023/9/8 19:35:14

【juc】ReentrantReadWriteLock之缓存（仅当学习）

目录 一、说明二、代码示例2.1 pom依赖2.2 示例代码2.3 实体类 三、示例截图 一、说明 1.针对于读多写少的情况 2.先查缓存&#xff0c;没有再去查库 二、代码示例 2.1 pom依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"h…...

编程日记 2023/9/8 19:34:13

FLUX查询InfluxDB -- InfluxDB笔记三

1. 入门 from(bucket: "example_query") // 没有筛选条件直接查询会报错|> range(start: -1h) // |>是管道符&#xff0c;后跟筛选条件 2. 序列、表和表流 序列是InfluxDB的概念&#xff0c;一个序列是由measurement、标签集、一个字段名称 表流是FLUX为了…...

编程日记 2023/9/8 19:33:12

pico学习进程记录已经开发项目

Pico pin脚定义 Pico 运行准备 下载uf2文件 https://pico.org.cn/ &#xff08;注意运行micropython的文件和运行c/c的不一样&#xff09; 装载uf2文件&#xff1a;按住pico的按键&#xff0c;然后通过micro usb连接电脑&#xff08;注意&#xff1a;如果用的线材&#xff0c…...

编程日记 2023/9/8 19:32:11

C++（20）：多重继承与虚继承

多重继承 是指从多个直接基类中产生派生类的能力。多重继承的派生类继承了所有父类的属性。 多重继承 在派生类的派生列表中可以包含多个基类&#xff1a; class Bear : public zooAnimal { class Panda : public Bear, public Endangered{/* ...*/};每个基类包含一个可选的…...

编程日记 2023/9/8 19:31:08

Vue + Element UI 前端篇（一）：搭建开发环境

Vue Element UI 实现权限管理系统 前端篇&#xff08;一&#xff09;&#xff1a;搭建开发环境 技术基础 开发之前&#xff0c;请先熟悉下面的4个文档 vue.js2.0中文, 优秀的JS框架vue-router, vue.js 配套路由vuex&#xff0c;vue.js 应用状态管理库Element&#xff0c;饿…...

编程日记 2023/9/8 19:30:07

系统错误码指示确立+日志模块手动配置

1&#xff0c;系统错误码指示确立 对于前后端分离的系统设计中&#xff0c;后端建立错误码指示对于前端非常重要可以指示错误存在地方&#xff1b;以用户注册为例&#xff1b; public interface SystemCode{int SYSTEM_USER_ERROR_ADD_FAIL 10000;int SYSTEM_USER_INFO_ADD …...

编程日记 2023/9/8 19:29:06

Java入门第三季

一、异常与异常处理 1. 异常简介 在Java中&#xff0c;**异常是程序在执行过程中出现的问题或意外情况&#xff0c;导致程序无法按照预期的流程进行。**异常处理是Java中用于处理程序中出现的异常的一种机制。 Java中的异常可以分为两大类&#xff1a;受检查的异常&#xff…...

编程日记 2023/9/8 19:28:05

【linux命令讲解大全】056.updatedb命令：创建或更新slocate数据库文件

文章目录 updatedb补充说明语法选项实例 从零学 python updatedb 创建或更新slocate命令所必需的数据库文件 补充说明 updatedb命令用来创建或更新slocate命令所必需的数据库文件。updatedb命令的执行过程较长&#xff0c;因为在执行时它会遍历整个系统的目录树&#xff0c;…...

编程日记 2023/9/8 19:27:04

查看视频文件关键帧间隔

一、Elecard StreamEye Tools拖放视频文件查看。 红的是I帧&#xff1b;蓝的是P帧&#xff1b;绿的是B帧。 二、ffprobe -show_streams统计。 1、统计视频关键帧、非关键帧 ffprobe.exe -i 1.mp4 -show_streams v -show_packets -print_format json > d:\1.json 再统计1.j…...

编程日记 2023/9/8 19:26:02

如何在mac上安装多版本python并配置PATH

摘要 mac 默认安装的python是 python3&#xff0c;但是如果我们需要其他python版本时&#xff0c;该怎么办呢&#xff1f; 例如&#xff1a;需要python2 版本&#xff0c;如果使用homebrew安装会提示没有python2。同时使用python --version 会发现commond not found。 所以本…...

编程日记 2023/9/8 19:25:01

GPT-人工智能如何改变我们的编码方式

在本文中&#xff0c;您将找到我对人工智能和工作的最新研究的总结&#xff08;探索人工智能对生产力的影响&#xff0c;同时开启对长期影响的讨论&#xff09;&#xff0c;一个准实验方法的示例&#xff08;通过 ChatGPT 和 Stack Overflow 进行说明&#xff0c;了解如何使用简…...

编程日记 2023/9/8 19:24:00

混淆技术研究-混淆技术简介(1)

背景 在实际的移动安全分析过程中，遇到的混淆防护技术越来越多，因此分析难度逐渐增大，本系列技术研究主要通过对目前已有的混淆技术进行详细的技术分析，包括原理分析、反混淆技术等。本文是此系列的第一篇，主要是介绍目前市场上存在的混淆技术及其简单原理概述。 混淆技…...

编程日记 2023/9/8 19:22:59

HTML5+CSS3+JS小实例：科技感满满的鼠标移动推开粒子特效

实例：科技感满满的鼠标移动推开粒子特效 技术栈：HTML+CSS+JS 效果： 源码： 【html】 <!DOCTYPE html> <html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="viewport&qu…...

编程日记 2023/9/8 19:21:57

某物联网数智化园区行业基于 KubeSphere 的云原生实践

公司简介 作为物联网 数智化园区一体化解决方案提供商&#xff0c;我们致力于为大中型园区、停车场提供软硬件平台&#xff0c;帮助园区运营者实现数字化、智能化运营。 在使用 K8s 之前我们使用传统的方式部署上线&#xff0c;使用 spug&#xff08;一款轻量级无 Agent 的自…...

编程日记 2023/9/8 19:20:56

MySQL查询数据库所有表名及其注释

1 查询 数据库 所有表 select table_name from information_schema.tables where table_schemasdam 2 查询数据库所有表 和表的 注释 SELECT TABLE_NAME, TABLE_COMMENT from information_schema.tables WHERE TABLE_SCHEMA dam ORDER BY TABLE_NAME; 3 查询数据库 单…...

编程日记 2023/9/8 19:19:55

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2025/12/24 2:45:54

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/12/21 16:13:46

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/12/16 18:24:06

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2025/12/21 22:08:53

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/10/1 6:09:21

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

编程新知 2025/12/22 11:06:20

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/15 0:25:46

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2025/12/25 23:00:30

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07