Dom选择器，节点类型

最新推荐文章于 2022-09-01 16:24:54 发布
最新推荐文章于 2022-09-01 16:24:54 发布
阅读量117 收藏
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54581080/article/details/118085269
版权
本文介绍了DOM选择器和节点类型的相关概念。通过`getElementById`、`getElementsByTagName`、`getElementsByClassName`等方法进行选择，同时提到了`querySelector`和`querySelectorAll`的区别。在节点关系中，涉及到了`parentNode`、`childNodes`、`firstChild`等属性，以及不同类型的节点如元素节点、属性节点、文本节点和注释节点。此外，还涵盖了遍历元素节点树的方法和节点属性如`nodeName`、`nodeValue`、`nodeType`等。
摘要由CSDN通过智能技术生成

 

学Dom开始,一切系统给生成的成组的方式，基本上全是类数组

//document代表整个文档，html只是一个文档的根标签

document.getElementById 通过Id选出来(除了这个，其他的选择器选择都是一组)

document.getElementsByTagName 通过标签来选择(兼容型强，最主流用法),

也可以选择name来调用

document.getElementsByclassName 通过Class选择

 

下面这两个选出来的不是实时的，等于个镜像，副本，选出来就不改变

document.querySelector css选择器   选出来单个的

document.queryselectorAll css选择器 选出来的是一组

 

      节点

           关系型选择  节点树(都兼容)

           parentNode,父节点(最顶端的ParentNode是#document)

           childNodes 子节点们

           firstChild 第一个子节点

           lastChild 最后一个子节点

           nextSibling后一个兄第节点(注意不是元素节点)

           previousSibling 前一个兄弟节点(注意不是元素节点)

 

           基于元素节点树的遍历(除了children，其他的IE9以下不兼容)

           parentElement 返回当前元素的夫父元素节点(最顶端就是Html了ÿ

最低0.47元/天 解锁文章
一身风骨擎天破
关注
DOM - 节点选择器和属性选择器
Jared864的博客
05-12 1434
Day21 一、DOM 介绍 概念：DOM（document of module）、 DOM不属于BOM window对象身上有提供document对象 DOM主要控制页面（html文件），所有的页面操作都需要通过DOM DOM的结构，html结构：属性结构，包含结构，家族结构（父子级，兄弟级） html根元素：head，body DOM树形结构的每个组成部分，都叫节点。所有节点，都是对象 选择器 元素节点选择器（只有元素节点） 直接选择器 id选择器：document.getELe
js：DOM的概念、选择器、节点属性、属性操作、内容操作 - 第十天
qdcxy_lj的博客
03-21 879
js：DOM的概念、选择器、节点属性、属性操作、内容操作 - 第十天
HTML DOM节点选择器
JayYuen的博客
09-16 1262
一，id获得元素 <body> <div id="div"> id获得元素 </div> </body> <script> let dom = document.getElementById("div"); console.log(dom); </script> 二，标签名获...
JavaScript-dom选择器||节点
wust_cyl的博客
04-15 650
dom选择器。我们知道document表示文档，我们就是通过document里面的方法选择标签。1：document.getElementById();通过选择Id选择器，来选择标签。 &lt;div id="demo"&gt;123 &lt;/div&gt; &lt;div &gt; 456&lt;/div&gt; &lt;script type='...
dom选择器，节点类型
weixin_60732933的博客
09-01 103
前端js，仅个人学习备份使用，有错误欢迎指出~
DOM选择器
顺其自然~专栏
01-06 532
元素节点选择器包括id,class,name,tagname,高级,关系。 1.1 id选择器 id:返回的是单个对象 相关标签代码 <body> <div id="box">1</div> <div id="box">2</div> <div id="box">3</div> <div class="msg"> <div class="sbox
JavaScript实现DOM对象选择器
10-21
如果数组长度大于1，则表明是组合选择器，需要根据选择器的类型分别获取DOM对象；如果数组长度等于1，则需要判断是哪一种单项选择器。 第二步，根据选择器进行筛选并返回第一个符合要求的DOM对象。针对不同的选择器...
JS实现访问DOM对象指定节点的方法示例
10-18
此外，JavaScript还提供了其他选择器，如`getElementsByTagName()`、`getElementsByClassName()`等，以及更强大的`querySelector()`和`querySelectorAll()`，它们共同构成了JavaScript操作DOM的强大工具集。...
JavaScript HTML DOM元素 节点操作汇总
10-16
节点具有关键属性，如`nodeName`（节点名称）、`nodeValue`（节点值）和`nodeType`（节点类型）。例如，元素节点的`nodeType`通常为1，文本节点为3，注释节点为8，而整个文档的根节点为9。 **添加节点** 添加节点...
详谈DOM简介及节点、属性、查找节点的方法
08-28
节点类型在DOM中有明确的分类。主要有以下几种类型： 1. 元素节点（element）：代表了文档中的所有元素。 2. 属性节点（attribute）：代表了元素节点的属性。 3. 文本节点（text）：代表了元素或属性中的文本。 4. ...
DOM节点类型
weixin_30527323的博客
11-22 171
节点类型 我们页面里面的节点类型很多，比如元素节点、文本节点、注释节点、属性节点等等。 我们可以通过nodeType属性来查看这个节点的类型是什么。而nodeType返回的是一些数字，下面介绍几个基础的类型和数字的对应关系： 元素节点——1属性节点——2文本节点——3注释节点——8document——9DocumentFragment——11 节点的...
DOM的节点访问以及操作
CoderHenryLee的博客
11-18 635
1.DOM的节点访问DOM节点的关系如下图： 其中兄弟节点和子节点有个浏览器兼容的问题，以nextSibling为例，nextSibling在ie678才有效，而nextElementSibling在正常浏览器才有效。兼容的写法如下：var div = one.nextElementSibling || one.nextSibling; div.style.backgroundColor =
DOM-判断元素节点类型
weixin_30628077的博客
08-01 342
http://stackoverflow.com/questions/384286/javascript-isdom-how-do-you-check-if-a-javascript-object-is-a-dom-object/27112297#27112297 判断节点类型： <body> <div id="test">aaa</...
jQuery筛选器--子元素选择器
前端
01-12 712
筛选规则 对父元素下的子元素进行筛选 子元素选择器   说明         筛选的均是子元素
js学习之dom选择器
domino~~的博客
01-25 264
                                                                                   js学习之dom选择器 关于dom选择器，其是对于html和XHTMl的选择，好对其进行一系列的操作。在这里要明白html和XHTML的最主要的区别是什么，那就是XHTML可以自己定义，而html不行。 所以对于dom来说我们首先...
js--DOM--1.常用的节点类型
王欢的博客
04-05 865
1.什么是DOMDOM(文档对象模型),是针对HTML和XML文档的一个API。描述了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。2.Node2.1节点类型只写几个此博文提到的： 节点类型 nodeType nodeName nodeValue ELEMENT_NODE 1 元素标签名 null ATTRIBUTE_NODE 2 属性名
DOM节点类型及属性
BReezeFK的博客
08-04 1685
DOM操作之——DOM节点类型及属性 虽然现在我们在开发中已经用不到自己操作DOM了，之前有JQ，现在更是有VUE、REACT两大框架供我们使用，但是我们也有必要了解下，关于原生JS中的DOM操作问题。 这次我们介绍一下DOM节点类型及获取节点的方法 我们认为在页面中所有呈现的内容，都是DOM文档中的一个节点（node），例如：元素标签是元素节点、注释的内容是注释节点、文本内容是文本节点、document是文档节点… 一、节点类型 1、文档节点 document 重点记忆属性： nodeType
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值