【图解】获取DOM节点的常用方法

最新推荐文章于 2024-06-22 01:19:26 发布
最新推荐文章于 2024-06-22 01:19:26 发布
阅读量351 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： dom JavaScript js 文章标签： javascript html5 es6 html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Cml_l/article/details/111033586

总结了一下dom节点的常用方法，基本涵盖了平时会用到的节点获取方法。（因为还有很多方法，为了图解清晰暂且例举这些）

希望对大家有帮助！

 

 

Javascript ES6获取DOM
桃李不言下自成蹊
05-20 30万+
Javascript ES6获取DOM <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt
【Vue源码】图解 diff算法 与 虚拟DOM-snabbdom-最小量更新原理解析-手写源码-updateChildren
YK菌的博客
04-15 9242
文章目录0. 文章结构预览0.1 虚拟DOM如何被渲染函数（h函数）产生0.2 diff算法的原理0.3 虚拟DOM如何通过diff变成真正的DOM1. 介绍1.1 diff算法1.2 虚拟DOM1.3 关系——diff是发生在虚拟Dom上的2. snabbdom 简介 及 准备工作2.1 简介2.2 搭建初始环境1. 安装snabbdom2. 安装webpack5并配置3. 复制官方demo Example3. h函数的介绍与使用3.1 介绍3.2 使用h函数 创建虚拟节点3.3 使用patch函数 将虚
获取DOM节点的几种方式
此去经年的博客
05-29 661
DOM 是一个树形结构，操作一个DOM节点，实际上就是这几个操作：更新、删除、添加、遍历 在操作DOM节点之前，需要通过各种方式先拿到这个DOM节点，常用的方法有： 一、通过元素类型的方法来操作： document.getElementById();//id名，在实际开发中较少使用，选择器中多用class id一般只用在顶级层存在 不能太过依赖id document.getEleme...
获取dom节点的五种方式
m0_57091576的博客
04-28 1694
获取dom节点的五种方式: 1. document.getElementById("标签的id名") 返回获取到的标签节点对象 此种方式没有兼容问题 2.document.getElementsByTagName("标签名") 根据标签的名字获取多个 节点对象 返回伪数组(伪数组 不能直接进行dom操作 必须取出其中元素才可以操作) 注意!!!!!!!! 无论根据标签获取的是单个元素 还是一堆元素 都返回的是伪数组对象 不能直接dom操作 这个
JS原生 兄弟节点-前一个-后一个-任意一个-所有兄弟节点
热门推荐
MagicWing的博客
10-17 1万+
IE678 和 火狐与谷歌 的兼容问题 获取下一个兄弟节点 获取上一个兄弟节点 获取任意一个兄弟节点 获取所有兄弟节点
JS获取DOM节点的六种方式
qq_45829293的博客
03-05 4593
JS获取DOM节点1、getElementById() --- id选中元素2、getElementByClassName() --- 类名选中元素3、getElementByTagName() --- 标签名选中元素4、querySelector和queryselectorAll4-1 querySelector() --- 精准的获取某个元素4-2 queryselectorAll() --- 获取符合类名或者标签名等条件的的所有元素5、getElementByName --- 通过name属性获取元素
【Vue源码解析】Vue虚拟dom和diff算法
m0_61016904的博客
02-22 1500
关系diff是发生在虚拟DOM上的新虚拟DOM和旧虚拟DOM进行diff(精细化比较)，算出应该如何最小量更新，最后反映到真正的DOM上diff算法diff算法是虚拟DOM技术的产物，vue里面实际叫做patch，它的核心实现来自于snabbdom；通过新旧虚拟DOM作对比（即patch），将变化的地方转换为DOM操作。
DOM事件流，冒泡 | 捕获 | 委托 ，详解
01-08
目录（一）DOM事件流① 定义② 图解③ 历史（二）冒泡（三）捕获（四）在不同的阶段执行事件（五）提高内存和性能 — 事件委托① 实例② 优点 （一）DOM事件流 ① 定义 DOM事件流包括三个阶段： 捕获阶段 目标阶段 ...
获取DOM节点的方式
qq_42502673的博客
06-05 3050
获取DOM节点的方式： 1. 通过ID获取节点 【返回具体某个节点】 document.getElementById(ID名) 2.通过标签名获取节点 【返回节点数组，即使只有一个】 document.getElementsByTagName(标签名) 3.通过标签的name值获取节点 【返回节点数组】 document.getElementsByName(Name名) 4.通过c
获取和操作 DOM 节点
最新发布
2401_82968855的博客
06-22 2167
获取和操作 DOM 节点DOM 节点也会被称为 DOM 元素。想要操作 DOM 节点，就必须先获取到 DOM 节点。1. 获取 DOM 节点获取 DOM 节点的方式有很多，这里例举几个常用的，所有的 DOM 元素都具有以下方法：返回对拥有指定 id 的第一个对象的引用。element.getElementById 是指去 element 节点下根据 id 查找子节点。通常在程序开始前，没有主动去获取过节点，这个时候会使用根节点 document 来进行查找。实例演示预览复制。
DOM的一些获取元素节点的方法
weixin_51509116的博客
02-25 697
<body> <div id='id1' class='class1' name='name1'>1</div> <div id='id2' class='class1' name='name1'>2</div> <div id='id3' class='class1' name='name1'>3</div> <script> //旧方法 .
获取Dom元素的几种方式的详细解读
weixin_52580981的博客
01-21 3921
JS获取DOM元素的8种方法 通过ID获取（getElementById） 通过name属性（getElementsByName） 通过标签名（getElementsByTagName） 通过类名（getElementsByClassName） 获取html的方法（document.documentElement） 获取body的方法（document.body） 通过选择器获取一个元素（querySelector）（开发常用） 通过选择器获取一组元素（querySelectorAll）（开发常用） 获
DOM 获取节点
wjs2024的博客
06-21 452
文档对象模型（DOM，Document Object Model）是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构、样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。DOM 节点包括元素节点、属性节点、文本节点等。在 JavaScript 中，我们可以通过不同的方法来获取 DOM 节点。
DOM判断节点类型分分钟搞定
weixin_46370867的博客
11-29 1719
小编和你一起解锁DOM判断节点类型的秘密 Let’s GO ! ! ! Node对象中的nodeName获取指定节点的节点名称 Node对象中的nodeType获取指定节点的节点类型 nodeType 属性返回以数字值返回指定节点的节点类型 如果节点是元素节点，则 nodeType 属性将返回 1 如果节点是属性节点，则 nodeType 属性将返回 2 如果节点是文本节点，则 nodeType 属性将返回 3 Node对象中的nodeValue获取指定节点的值 在DOM树结构中，文本节点是元
js 原生获取一个 dom元素的 样式属性
业余前端的职业经历
02-07 498
就是 如果让你原生js的方式获取下 一个dom元素的 文本颜色值的话 乍一听可能还不好说出来 但感觉 还是很熟悉对吧 方法就是 getComputedStyle 举个例子 看看吧 #app { height: 200px; } <div id="app"></div> 我给一个div 设置了 高度200px 然后 我就去获取下 那个高度的 值 console.log( window.getCompu...
获取DOM节点的一些常用的Document对象方法
LPLIFE的博客
08-20 1481
取得DOM节点的一些Document对象方法： querySelector() querySelectorAll() getElementById() getElementsByClassName() getElementsByTagName() querySelector：接收一个CSS选择符，返回与盖模式匹配的第一个元素，如果没有找到匹配的元素，返回null。 //取得body元素 v...
JavaScript学习笔记——DOM元素节点的获取
403 Forbidden
09-07 462
ES5之前的节点获取 var div1 = document.getElementById("box1"); //方式一：通过 id 获取 一个 元素节点（为什么是一个呢？因为 id 是唯一的） ​ var arr1 = document.getElementsByTagName("div"); //方式二：通过 标签名 获取 元素节点数组，所以有s ​ var arr2 = document.getElementsByClassName("box2"); //方式三：通过 类名 获取 元素节点数组，所以有
dom元素属性操作---属性获取或属性设置
赵佳敏的博客
12-01 3457
一、dom属性操作 属性获取或属性设置 1. 操作类名称 属性的获取 输出当前对象的类名称 <button class="btn list" name="but" id="data">按钮</button> <script> var btn = document.getElementsByClassName("btn")[0]; console.log(btn.className); </script> <button class="b
掌握dom4j解析XML：源码和jar包全面解析
常用的dom4j API - `SAXReader`：用来读取XML文件，并将其转化为dom4j的Document对象。 - `Document`：代表整个XML文档的根节点。 - `Element`：代表XML文档中的单个元素。 - `Node`：代表文档树中的任何一个节点。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

圈点Studio

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值