原生获取DOM节点

目录

一、通过document顶层方法获取

1、获取html标签

 2、获取head标签

 3、获取body标签

 二、getElementBy系列获取

1、ID获取

 2、类名获取

 3、name属性获取

4、标签名获取

三、query系列获取 

1、通过query选择器获取一个元素

2、通过querry选择器获取一组元素

四、通过节点的属性获取

1、获取父节点

 2、获取子节点

3.获取首个子节点

4、lastChild获取最后一个子节点

 5、获取兄弟节点

一、通过document顶层方法获取

1、获取html标签

获取html标签有一个专门的方法：document.documentElement

console.log(document.documentElement)图示

 2、获取head标签

获取head标签也有一个专用方法：document.head

console.log(document.body)图示

 3、获取body标签

获取body标签同样有一个专门的方法：document.body

console.log(document.body)图示

 二、getElementBy系列获取

1、ID获取

语法：document.getElementById('标签上的ID')

打印：document.getElementById('father')：

console.log(document.getElementById(“father”))图示

注意：如果两个标签一样的ID,它会获取第一个标签

添加一个id名为father的div

 再次打印console.log(document.getElementById(“father”))

 2、类名获取

语法： getElementsByClassName('标签上的类名')

打印document.getElementsByClassName('box'):

console.log(document.getElementsByClassName(“box”))图示

 获取到的是一个数组、因为多个标签名中的class名一样，所以获取的是一个数组

返回一个数组 ， document.getElementsByClassName('box')[0]来获取到class为box的标签组里的第一个标签元素。

console.log(document.getElementsByClassName("box")[0])图示

 3、name属性获取

语法： getElementsByName('标签上的name属性值')

通过在控制台打印console.log(document.getElementsByName('fatherBox'))就可以在控制台看见返回的是一个NodeList（NodeList这个概念和前面通过class类名获取里面提到的HTMLCollection概念相似但是又有不同，因为本小白也说不明白，所以具体的还请看官大佬们自行百度）数组，

4、标签名获取

语法：documentsByTagName('标签名')

打印document.getElementsByTagName('div')可以看到返回了一个HTMLCollection数组，数组里面包含了我们HTML中的所有div

console.log(document.getElementsByTagName(“div“))图示

三、query系列获取 

当我们只有父元素有设置id、class、name值，然后HTML内容又偏多时，这个时候用上面的那四种选择器都不太方便，所有在HTML5中添加了query选择器来帮助我们更方便的获取到元素。

1、通过query选择器获取一个元素

语法：querySelector('根据选择器规则选择元素')

注意要根据css选择器的匹配规则去获取。当选择器选择的内容为多个时，会只选择匹配到的第一个元素返回，但是这里的第一个和前面ById选择器的选择第一个返回不太一样，比如你还是不小心给两个元素写了一样的Id，都是father，然后第一个father里面没有div，第二个father里面有多个div，这个时候querySelector会先匹配到第一个father然后往里面匹配，发现没有可以匹配到的div来返回，他就会进入到第二个father里面进行匹配，将匹配到的第一个div进行返回处理；但是，如果第一个father里面有了可以返回的div，那么它就不会匹配第二个father。可能说的不够直观，我们直接上图：

（1）两个father，第一个father里面没有div

两个father，第一个father里面没有div

 在控制台打印document.querySelector('#father>div')

返回第二个father的第一个div

 （2）两个father，第一个father里面有div

两个father，第一个father里面有div

 在控制台打印document.querySelector('#father>div')

返回第一个father里匹配到的div

2、通过querry选择器获取一组元素

语法：querySelectorAll('根据css选择器规则获取元素')

在控制台打印document.querySelectorAll('#father>div')可以看到返回了一个NodeList数组，里面包含着我们通过匹配规则匹配到的所有div元素。

console.log(document.querySelectorAll("#father>div"))图示

 可能有看官大佬就好奇了，这时候要是多写了个重复id的元素会出现啥情况呀，别急，我给您打印出来了，还是上面那个两个father，第一个father里面有一个div，第二个father里面有三个div的结构，再打印一遍document.querySelectorAll('#father>div')：

 再打印一遍document.querySelectorAll("#father>div")

 我们可以看到他把两个重复id的父级元素里面的子div全都获取进数组了。

四、通过节点的属性获取

每个DOM元素其实都可以看作是一个对象，在这个DOM元素对象里面有着用于获取各类节点的属性，我们可在通过第一节介绍的方法获取到一个节点，然后通过操作这个节点上的属性获取到想要的元素节点。

1、获取父节点

语法： 子节点.parentNode获取父节点

通过parentNode属性获取到元素的父节点，比如在控制台打印document.getElementsByClassName('box2')[0].parentNode就可以获取到类名为box2的元素数组中第一个元素的父节点了，打印结果为：

parentNode父节点属性

 2、获取子节点

方式一(不推荐)：childNodes获取所有子节点

语法：父节点.childNodes

通过childNodes属性获取到元素的父节点，比如在控制台打印document.getElementById('father').childNodes就可以获取到ID为father的元素底下的所有子节点了，通过观察控制台我们可以看见返回了一个NodeList数组：

childNodes获取所有子节点图1

 我们可以看到数组里面出现了一些奇怪的东西–text，这个其实是我们在编辑器里面打代码时为了代码结构清晰一些，打的空格。每一个子元素的头尾但凡有空格的地方都会解析成text并加入到数组里面。我们要操作这样的数组就很难受了，所以不推荐使用这个办法。

方式二(推荐)：chilNodes获取所有子节点

语法： 父节点.children

通过children来获取所有的子节点，这个属性和childNodes一样都会返回一个数组，只不过返回的是一个HTMLCollection数组。在控制台打印document.getElementById('father').children结果如下：

children获取所有子节点1

 可以看到，我们获取到的数组和用childNodes获取到的子节点数组不太一样，它没有奇奇怪怪的东西–text，这种情况下，我们可以更好的进行需求操作，所以如果你要用节点的属性来获取全部子节点时，推荐使用children而不是childNodes。

3.获取首个子节点

语法：父节点.firstChild

当我们要获取一个元素的首个子节点时，我们就可以使用firstChild属性啦。同样的在控制台打印一下看看返回结果console.log(document.getElementById('father').firstChild)：

firstChild获取首个子节点图1

 我们发现打印出来了一个似曾相识的东西，前面childNodes返回的数组里面出现过的text，那这应该也是空格的问题吧，将第一个子节点前面的空格给删了再看看

删除第一个子节点前面的空格图

 firstChild获取首个子节点图2

 可以看到他完美的返回了我们想要的东西。
因为他不会过滤换行空格之类的所以可以将它变相的认为是childNodes[0]。

4、lastChild获取最后一个子节点

获取一个元素的最后一个子节点时，我们就可以使用lastChild属性啦。同样的在控制台打印一下看看返回结果console.log(document.getElementById('father').lastChild)：

lastChild获取最后一个子节点图1

 可以发现依旧是换行、空格的问题，和firstChild解决方法略有不同的是，firstChild去除的是第一个子节点前面的间隙，而lastChild要去除的是最后一个子节点后面的间隙：

去除子节点后面的间隙图

 这个时候再打印就会得到我们需要的最后一个子节点元素了：

lastChild获取最后一个子节点图2

 5、获取兄弟节点

(1)、获取前一个兄弟元素

语法：兄弟节点.previousSibling

使用previousSibling获取前一个兄弟元素，通过控制台打印document.getElementsByClassName('box2')[0].previousSibling来获取box2前面的兄弟元素：

获取后一个兄弟元素图

 (1)、获取后一个兄弟元素

语法： 兄弟节点.nextSibling

使用nextSibling获取后一个兄弟元素，通过控制台打印document.getElementsByClassName('box2')[0].nextSibling来获取box2后面的兄弟元素：

获取后一个兄弟元素图

 

小结： 

会打印出text的几个方法（childNodes获取所有子节点、firstChild获取首个子节点、firstChild获取首个子节点、lastChild获取最后一个子节点、previousSibling获取前一个兄弟元素、nextSibling获取后一个兄弟元素），个人不建议使用，现在编辑器都是格式化美化代码，一不留神就换行了，那真的就是到处都是text了。

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

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

相关文章

特斯拉的操作系统是用什么语言编写的？

特斯拉的操作系统是用什么语言编写的？

总目录链接>> AutoSAR入门和实战系列总目录 文章目录特斯拉车辆操作系统特斯拉GitHub中使用的语言Ruby和GoPythonSwift 和 Objective CQt我们知道操作系统至少需要一些非常低级的代码，这些代码在系统首次启动时运行，必须使用接近硬件的语言编写。…
阅读更多...
如何使用python删除一个文件？好用到上头.....

如何使用python删除一个文件？好用到上头.....

人生苦短，我用python 若想利用python删除windows里的文件， 这里需要使用os模块 那接下来就看看利用os模块是如何删除文件的吧~ 具体实现方法如下！ 更多学习资料:点击此处跳转文末名片获取 os.remove(path) 删除文件 path. 如果path是一…
阅读更多...
硬件语言Verilog HDL牛客刷题day02 组合逻辑部分

硬件语言Verilog HDL牛客刷题day02 组合逻辑部分

1.VL11 4位数值比较器电路 1.题目： 某4位数值比较器的功能表如下。请用Verilog语言采用门级描述方式，实现此4位数值比较器。 2.解题代码： timescale 1ns/1nsmodule comparator_4(input [3:0] A ,input [3:0] B ,output …
阅读更多...
Cortex-A7常用汇编指令

Cortex-A7常用汇编指令

Cortex-A7常用汇编指令 本节我们将介绍一些常用的 Cortex-A7汇编指令，如果想系统的了解 Cortex-A7的所有汇 编指令请参考《 ARM ArchitectureReference Manual ARMv7-A and ARMv7-R edition.pdf》的 A4章节。 处理器内部数据传输指令 使用处理器做的最多事情就是…
阅读更多...
黑马点评笔记（自用）

黑马点评笔记（自用）

1.优惠卷秒杀 （1）全局唯一ID 订单如果用自增，容易被猜到交易量，且数据量大的话分成多个表，都是自增，容易出现重复。所以用全局ID生成器，Redis独立自增不会重复，但安全性不保证&#…
阅读更多...
Vue Nginx 配置跨域

Vue Nginx 配置跨域

1、方案1：Nginx配置跨域，Vue不用配置vite代理 1.nginx 配置SSL证书 listen *:443;server_name gitlab.xxxxxx.com;server_tokens off; ## Dont show the nginx version number, a security best practicessl on;ssl_certificate /etc/gitlab/xxxxxx.c…
阅读更多...
俺的面试qwq

俺的面试qwq

1.JavaScript的基本数据类型都有什么? 布尔型、数值型、字符串、数组、null、undefined、object、symbol 2.数组方法pop()push() unshift() shift()的作用? pop()删除最后一个元素、push()在数组最后增加元素、unshift()在数组最前面增加元素、shift()删除第一个元素 3.box-s…
阅读更多...
【ChatGPTAIGC研讨社】“iPhone时刻”：未来已来

【ChatGPTAIGC研讨社】“iPhone时刻”：未来已来

文章目录前言一、ChaGPT&AIGC研讨社简介二、ChatGPT&AIGC研讨社的优势1.丰富充实的资料库Github开源：[ChatGPT_Project](https://github.com/shawshany/ChatGPT_Project)飞书资料库2.重量级嘉宾3.工作机会4.投资资源总结前言 去年年末，ChatGPT以…
阅读更多...
Linux编译器-gcc/g++ 使用

Linux编译器-gcc/g++ 使用

在介绍gcc/g的使用前我们先了解一下两者的不同 gcc时主要编译c语言，而g主要编译c的，但是两者的选项是相同的，因此我们以gcc和c语言为例来讲解。背景知识 gcc和g都是编译器其核心作用将文本类文件翻译成二进制可执行 那么其过程是怎样的&…
阅读更多...
dolphinscheduler 2.0.6 资源中心改造方案二：通过NFS挂载共享目录

dolphinscheduler 2.0.6 资源中心改造方案二：通过NFS挂载共享目录

目录调度资源中心存储概要安装NFS服务器客户端调度验证关闭SFTP开关（可忽略）重新上传资源文件worker执行任务验证服务器woker客户端worker其它nfs共享目录的配置文件/etc/exports说明调度资源中心存储概要 针对现有的单机存储可以做哪些扩展？…
阅读更多...
免费1年服务器，部署个ChatGPT专属网页版

免费1年服务器，部署个ChatGPT专属网页版

作者：小傅哥 博客：https://bugstack.cn 沉淀、分享、成长，让自己和他人都能有所收获！😄 白皮袄个免费1年服务器，部署个ChatGPT专属网页版！ api.openai.com port 443: Connection timed out 你是…
阅读更多...
【统计学习】25个必须掌握的数据分析基础概念

【统计学习】25个必须掌握的数据分析基础概念

16个必须掌握的数据分析基础概念1. 描述性统计2. 假设性检验2.1 参数检验2.2 非参数检验3. 置信度分析4. 列联表分析5. 相关分析6. 方差分析7. 回归分析8. 聚类分析9. 判别分析10. 主成分分析11. 因子分析12. 时间序列分析13. 生存分析14. 典型相关分析15. ROC分析16. 偏差-方差…
阅读更多...
MATLAB中quiver函数用法

MATLAB中quiver函数用法

目录 语法 说明 示例 创建箭头图 禁用自动缩放 绘制梯度和等高线 指定箭头颜色 指定箭头图的坐标区 在创建后修改箭头图 quiver函数的功能是绘制箭头图或向量图。 语法 quiver(X,Y,U,V) quiver(U,V) quiver(___,scale) quiver(___,LineSpec) quiver(___,LineSpec,fi…
阅读更多...
List和list迭代器的模拟实现

List和list迭代器的模拟实现

list的使用 我们list表示带头双向循环链表。 我们再找我们的list中每个数据的位置&#xff0c;就不可以再用我们的下标[]了。 我们就必须用迭代器。 void test_list1() {list<int> lt;lt.push_back(1);lt.push_back(2);lt.push_back(3);lt.push_back(4);list<int>:…
阅读更多...
MySQL基础-视图

MySQL基础-视图

文章目录MySQL基础-视图一、数据库对象二、视图概念三、视图的使用1、创建视图2、查看视图3、修改视图4、修改/删除视图四、总结MySQL基础-视图 一、数据库对象 对象描述表(TABLE)表是存储数据的逻辑单元&#xff0c;以行和列的形式存在&#xff0c;列就是字段&#xff0c;行…
阅读更多...
STM32输出PWM波控制电机转速，红外循迹避障智能车+L298N的详细使用手册、接线方法及工作原理，有代码

STM32输出PWM波控制电机转速，红外循迹避障智能车+L298N的详细使用手册、接线方法及工作原理，有代码

智能循迹红外避障小车 本设计的完整的系统主要包括STM32单片机最小系统、L298n电机驱动&#xff0c;超声波 &#xff0c;舵机 &#xff0c;红外模块等。寻迹小车相信大家都已经耳熟能祥了。 我们在这里主要讲一下L298N驱动电机和单片机输出PWM控制电机转速。 本设计软件系统采…
阅读更多...
这个时候了，你还不会不知道JavaMail API吧

这个时候了，你还不会不知道JavaMail API吧

一、概述 1.1 简述 JavaMail API 顾名思义&#xff0c;提供给开发者处理电子邮件相关的编程接口&#xff0c;它是Sun发布的用来处理email的API&#xff0c;其提供独立于平台且与协议无关的框架来构建邮件和消息传递应用。JavaMail API 提供了一组抽象类&#xff0c;用于定义组…
阅读更多...
第十四届蓝桥杯三月真题刷题训练——第 24 天

第十四届蓝桥杯三月真题刷题训练——第 24 天

目录 第 1 题&#xff1a;旋转 题目描述 输入描述 输出描述 输入输出样例 运行限制 代码&#xff1a; 思路&#xff1a; 第 2 题&#xff1a;附近最小_单调队列模板 代码&#xff1a; 第 3 题&#xff1a;扫地机器人_二分 题目描述 输入描述 输出描述 输入输出样…
阅读更多...
【蓝桥杯】​蓝桥杯——每日四道编程题（两道真题+两道模拟）​| 第 二 天

【蓝桥杯】​蓝桥杯——每日四道编程题（两道真题+两道模拟）​| 第 二 天

专栏&#xff1a; 蓝桥杯——每日四道编程题&#xff08;两道真题两道模拟&#xff09; “蓝桥杯就要开始了&#xff0c;这些题刷到就是赚到” ₍ᐢ..ᐢ₎♡ 另一个专栏&#xff1a; 蓝桥杯——每日四道填空题&#xff08;两道真题两道模拟题&#xff09; 目录 第一道真题&…
阅读更多...
Kafka 基础整理、 Springboot 简单整合

Kafka 基础整理、 Springboot 简单整合

定义&#xff1a; Kafka 是一个分布式的基于发布/订阅默认的消息队列是一个开源的分布式事件流平台&#xff0c;被常用用于数据管道、流分析、数据集成、关键任务应用 消费模式&#xff1a; 点对点模式 (少用) 消费者主动拉取数据&#xff0c;消息收到后清除消息 发布/订阅模式…
阅读更多...
最新文章

Copyright @ 2022~2023