DOM操作中，getElementByXXXX 和 querySelector 的区别

最新推荐文章于 2024-08-26 17:50:05 发布
最新推荐文章于 2024-08-26 17:50:05 发布
阅读量96 收藏
点赞数
原文链接：http://www.cnblogs.com/tincyho/p/6151595.html
版权

1. 返回值:
    getElements返回动态集合:
      优: 首次查找效率高
      缺: 可能造成反复查找DOM树
    querySelector返回非动态集合:
      优: 包含完整属性，无需反复查找DOM树
      缺: 首次查找效率低
2. 易用性:
    querySelector更灵活， 且更简单
    getElements每次只能查找一种结果，无法设置查找条件，更繁琐
总结: 
    如果一次查找就能找到元素时，首选getElements
    如果查找条件复杂时，就用querySelector

转载于:https://www.cnblogs.com/tincyho/p/6151595.html

weixin_30326745
关注
JS-DOM/getElementsByName()方法/getElementsByTagName()方法/区别getElementByID,getElementsByName,getEleme......
Jennyni1122的博客
06-14 1658
DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 image.png 将HTML代码分解为DOM节点层次图: image.png HTML文档可以说由节点构成的集合，三种常见的DOM节点: 元素节...
Document 对象常用方法(getElementById、getElementsByName、getElementsByTagName....)
heitu_的博客
12-28 1万+
document对象常用的六种方法用法及注意点
document对象获取元素，创建元素
最新发布
m0_70325779的博客
08-26 1052
但是，调用这三个方法创建的三个对象是各自独立存在的，当我们需要将它们组合在一起形成一个完整的标签时，就需要调用 appendChild 方法和 setAttributeNode 方法，此方法可以将节点文本对象和属性对象加入到标签之内从而形成一个完整的标签；该方法返回指定Id属性值的元素节点，由于各个Id值唯一，所以该方法返回值也只有一个，即指定的某个标签，而不会是多个，此外，该方法参数区分大小写。此外该方法返回匹配到的单个节点元素，如果匹配到多个，只会返回第一个，如果没有匹配到，则返回null；
document.getElementByclassName（）方法
boat_sea的博客
04-29 24万+
document.getElementByclassName（）方法;使用指定的calss属性值返回相关元素的集合(节点列表)使用getElementByclassName（）方法，使用指定的calss属性值(名称)返回当前文档中所有相关元素的集合(节点列表对象)。节点列表对象代表了收集到的所有相关节点，可以使用序列号(index)访问节点列表，index的值从0开始。注：使用节点列表对象的len...
DOM 基础 ---------- 获取元素
weixin_52212950的博客
02-02 7269
DOM 即文本对象模型，是 W3C 推荐的处理可拓展标记语言的标准编程接口，通过这些接口可以改变网页的内容，结构，样式 文档：一个页面就是一个文档，DOM 中用 document 表示 元素：页面中所有的标签都是元素，DOM 中用 element 表示 节点：网页中所有内容（标签，属性，文本，注释）都叫节点，DOM 中用 node 表示 DOM 获取元素有很多方法，下面一一说明 一：document.getElementById() 此方法用于返回一个匹配特定的 ID 元素，由于元素的 ID
getElementsByName方法、getElementsByTagName方法、document对象三个查询方法的使用注意事项、dom对象查询练习、document对象补充说明
weixin_46065214的博客
08-17 1万+
getElementsByName方法、getElementsByTagName方法、document对象三个查询方法的使用注意事项、dom对象查询练习、document对象补充说明
原生的强大DOM选择器querySelector.pdf
08-16
这两个方法的引入，使得开发者可以如同使用CSS选择器一样方便地定位和操作DOM元素，尤其在处理复杂的DOM结构时，效率提升明显。 **querySelector** `querySelector`方法允许你根据传入的CSS选择器，查找文档或指定...
JS中DOM元素的操作等基础知识笔记
01-08
通过遍历DOM树，JavaScript可以访问和操作任何元素。 【DOM选择器】 DOM选择器是用于定位文档中特定元素的工具。常见的DOM选择器包括： 1. `getElementById`：通过元素的ID获取元素，返回单个元素。 2. `...
了解javascript中的Dom操作
12-03
JavaScript中的DOM操作是Web开发中不可或缺的部分，它允许开发者对HTML文档进行动态更新和交互。DOM，即Document Object Model，是一种标准，它将HTML或XML文档解析为一个可编程的对象模型，每个元素、属性和文本都...
原生的强大DOM选择器querySelector介绍
11-27
事实上，现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持，甚至就连微软也派出了 IE 8 作为支持这一特性的代表，querySelector 和 querySelectorAll 作为查找 DOM 的又一途径，极...
JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支
10-16
在JavaScript（JS）前端开发中，掌握页面加载事件、数组操作、DOM节点操作以及循环和分支结构是非常重要的。下面将详细讲解这些知识点。 1. **页面加载事件**： - `window.onload` 事件是在整个页面包括所有资源...
（4）document：getElementById、getElementByName、getNodeByTagName
FixedStar 的博客
08-06 3326
document对象：该对象将标记型文档进行封装。 该对象的作用：是对可以标记型文档进行操作 最常见的操作是：想要实现动态效果，需要对节点操作，那么要先获取到这个节点操作，那么要先获取到这个节点。 所以document对象最常见的操作就是获取页面中的节点
document.getElementById()方法使用
热门推荐
酣睡的熊㊣的技术博客
02-07 36万+
document.getElementById使用 语法：oElement = document .getElementById ( sID ) 参数：sID――必选项。字符串 (String) 。 返回值：oElemen――对象 (Element) 。 说明：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一
document​.get​Element​ById
速冻的博客
04-15 2622
Document的方法 getElementById()返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。 如果需要查找到那些没有ID 的元素，你可以考虑通过CSS选择器使用 querySelector()。 ...
JavaScript进阶（二十八）：js 判断 document.getElementByid(““) 获得的对象是否存在
IT全栈 华强工作室
11-25 4942
如果通过document.getElementById("") document.getElementByName("") 等方式获得的对象不存在情况下，进行操作时会报错。因此需要首先判断该对象是否存在，以下两种判断方法，推荐使用第一种。 方法一: v==null var v; v = document.getElementByIdx_x( "id "); if(v==null){ //不存在，错误处理 }else{ //存在，正常处理 } 方法二: typeof(obj) == “undefined”
DOM基础：事件、获取元素、操作元素
m0_63669414的博客
08-14 1704
DOM:文档对象模型（Document Object Model），是W3C推荐的处理HTML或XML的标准编程接口。通过这些DOM接口可以改变网页的内容、结构和样式。自定义属性目的：为了保存并使用数据，有些数据可以保存到页面而不用保存到数据库中。...
dom.querySelector和document.getElementById区别
梦殇的博客
08-05 1517
、 document.getElementById 可以查询纯数字的id dom.querySelector document.querySelectorAll(’[id=“111”]’) 在某个dom下寻找相应选择器的元素 背景 产品反馈项目系统模板复制之后，元素无法拖拽。经排查发现元素继承自move组件。而每个元素绑定的id竟然纯数字；复制模板之后由于项目的复杂性无法统一的对复制出...
DOM系列：getElement* 和 querySelector*
W3cplus
05-24 893
在上一节中，我们学习了DOM树和遍历DOM相关的知识。可以通过firstChild（或firstElementChild）、lastChild（或lastElementC...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值