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

JavaScript-----DOM元素

news 2026/2/7 19:18:31

 目录

前言：

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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2026/2/6 12:05:53

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2026/1/2 23:01:24

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/10/22 11:16:20

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2026/2/5 21:53:01

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2026/2/5 4:39:34

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2026/2/5 4:33:24

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2026/2/5 4:25:15

[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

编程新知 2026/1/28 8:34:48

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/10/13 2:26:14

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

编程新知 2026/1/24 20:09:04