开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

querySelector会导致错误，而getElementById不会

querySelector和getElementById都是用于在HTML文档中查找元素的方法，但它们有一些不同之处。

querySelector是一个强大的方法，它使用CSS选择器来查找匹配的元素。它可以根据元素的标签名、类名、ID、属性等进行查找。例如，可以使用querySelector("#myElement")来查找ID为"myElement"的元素。然而，由于querySelector使用了CSS选择器，它的性能可能会比较低，尤其是在查找复杂选择器时。

相比之下，getElementById是一个更简单、更直接的方法。它只能通过元素的ID来查找元素。由于它不需要解析CSS选择器，所以它的性能通常比querySelector要好。

在使用这两个方法时，需要注意以下几点：

返回值：querySelector返回匹配的第一个元素，如果没有匹配的元素，则返回null。而getElementById只返回匹配的第一个元素，如果没有匹配的元素，则返回null。
兼容性：querySelector在现代浏览器中得到了广泛支持，包括Chrome、Firefox、Safari和IE8+。而getElementById是DOM标准的一部分，几乎所有的浏览器都支持。

综上所述，如果只需要通过元素的ID来查找元素，推荐使用getElementById，因为它更简单、更高效。如果需要使用更复杂的选择器来查找元素，可以使用querySelector，但需要注意性能方面的考虑。

腾讯云相关产品和产品介绍链接地址：

腾讯云主页：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
移动应用开发平台（MPS）：https://cloud.tencent.com/product/mps
云存储（COS）：https://cloud.tencent.com/product/cos
区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe

相关搜索:.toFixed()会导致错误的计算吗？sdp错误是否会导致流损坏？strsep()会导致段错误-为什么？为什么@MockBean ConversionService会导致错误为什么堆栈溢出会导致总线错误10而不是分段错误从API加载文件会因为解析为JSON而导致错误使用cc会导致错误修改Ruby on Rails路由会导致错误如何从jni crate导入JavaVM而不会导致编译错误？如何根据值对列表进行分组，而不会导致属性错误

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JavaScript与Node.js一起打造一款聊天App

聊天是我们人与人交流最直接的方式，互联网的加入使我们交流更加便捷。我们手机上的微信、QQ是我们手机必不可少的应用软件。那么，我们是否可以做一款聊天应用呢？

01

前端拾零01—checkbox&radio&select总结

前端拾零收录日常开发中一些很常见很基础的前端操作，省去每次google甚至答案错误的烦恼

前端拾零01—checkbox&radio&select总结【原创】

前端拾零收录日常开发中一些很常见很基础的前端操作，省去每次google甚至答案错误的烦恼

03

JavaScript与Node.js一起打造一款聊天App

聊天是我们人与人交流最直接的方式，互联网的加入使我们交流更加便捷。我们手机上的微信、QQ是我们手机必不可少的应用软件。那么，我们是否可以做一款聊天应用呢？

04

事件基础及操作元素

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

02

Safari 中简书登录框屏蔽

在借助腾讯混元助手屏蔽简书登录框中已经实现了Chrome 中屏蔽简书登陆框、右侧热门、左侧点赞、以及底部推荐。然后我用Userscripts 在 Safari 中使用了一下，发现登陆框并不能屏蔽掉，所以这里再补充下，如果在 Safari 中移除简书登陆框。

02

querySelector与querySelectorAll

HTML5学堂：JS获取节点的方法很多，但真正常用的或许就是通过id和标签获取节点，用传统的几种方法想要快速的查找到某个标签，就意味着需要更多的id，命名多了自然就烦了，接下来给大家介绍的方法就能简化很多操作。常用的获取节点的方法 JS中经常需要获取节点,下面四种是较为常见的。 1、通过id获取节点：document.getElementById("test") 2、通过标签获取节点：document.getElementsByTagName("div") 3、通过类名获取节点：document.getE

07

[OHIF-Viewers]医疗数字阅片-医学影像-es6-Element.querySelector()

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/querySelector

02

❤️创意网页：有趣的文字冒险游戏（可以无限拓展）

文字冒险游戏是一种经典而有趣的游戏形式，它通过简单的文字和按钮，带领玩家进入一个充满想象力和挑战的冒险世界。在本篇博客中，我将向大家介绍如何使用HTML和JavaScript来创建自己的文字冒险游戏。通过简洁明了的代码和丰富多样的情节选择，你可以打造一个独一无二的游戏体验。

01

getElementBy系列和querySelector系列的区别

querySelector和querySelectorAll的用法和getElementBy大致一样，获取的时候带上符号，getElementBy获取的是元素的动态集合，querySelector获取的是元素的静态集合。

01

React 从入门到入土（一）-- 基础知识以及 jsx语法

7. 如果小写字母开头，就将标签转化为 html 同名元素，如果 html 中无该标签对应的元素，就报错；如果是大写字母开头，react 就去渲染对应的组件，如果没有就报错

03

元素中必知重要属性和方法

上一篇文章我们学习了 Angular 中自定义 Video 操作，如果读者留意的话，会发现在这篇文章中就开始操作元素的属性 scrollLeft，这是很常用的一样属性。那么还有什么属性和方法比较重要呢？其又代表什么意思呢？下面我们进入主题。

02

JavaScript——DOM基础

文档对象模型（Document Object Model），简称DOM，是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准接口。

02

js添加元素的三种方法

提前说下结论：善用innerHTML属性，但是不能过于依赖，否则会造成改动过大，不利于程序稳定性。首先，结构部分为：

01

DOM扩展

尽管DOM作为API已经非常完善了，但是为了实现更多的功能，仍然会有一些标准或专有的扩展。对DOM的两个主要扩展是Selectors API（选择符API）和HTML5。

03

原生js获得八种方式,事件操作

08.17自我总结关于js 一.原生js获得八种方式通过ID获取（getElementById）通过name属性（getElementsByName）通过标签名（getElementsByTagName）通过类名（getElementsByClassName）通过选择器获取一个元素（querySelector）通过选择器获取一组元素（querySelectorAll）获取html的方法（document.documentElement） document.documentElement是专门

01

使用 Web Animations API 实现一个精确计时的时钟

在 JavaScript 中，当事情准时发生时，很自然地会想到使用计时器函数。但是，当某件事由于其他事情依赖于它而在准确的时刻发生时，你很快就会发现计时器会存在一个不准时的问题。而本文所要介绍的 Web Animations API 可以在某些情况下替代计时器函数，同时保持精确。

05

回到基础：理解 JavaScript DOM[每日前端夜话0x45]

原文：https://medium.freecodecamp.org/an-introduction-to-the-javascript-dom-512463dd62ec

03

前端成神之路-WebAPIs01

API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。

01

「Web编程API」- 01

请注意，本文编写于 2096 天前，最后修改于 174 天前，其中某些信息可能已经过时。

05

【JS】1891- 悄无声息间，你的 DOM 被劫持了？

文档对象模型（DOM）充当着 HTML 和 JavaScript 之间的接口，搭建起静态内容与动态交互之间的桥梁，对现代 Web 开发而言，DOM 的作用不可或缺。

01

$.ajax not function(已解决:jQuery库冲突解决办法)

参考:https://www.cnblogs.com/buwan/p/5346096.html

02

【实战】使用 Web Animations API 实现一个精确计时的时钟

在 JavaScript 中，当事情准时发生时，很自然地会想到使用计时器函数。但是，当某件事由于其他事情依赖于它而在准确的时刻发生时，你很快就会发现计时器会存在一个不准时的问题。而本文所要介绍的 Web Animations API 可以在某些情况下替代计时器函数，同时保持精确。

01

Javascript DOM(一)

预解析：js 引擎会把 js 里面所有的 var 和 function 提升到当前作用域的最前面

03

JavaScript(十一)

这一篇，我们讲讲 DOM 扩展。对 DOM 的两个主要的扩展是 Selectors API(选择符 API)和 HTML5。此外，还有一个不那么引人瞩目的 Element Traversal(元素遍历)规范，为 DOM 添加了一些属性。

01

js逐步教实现表单系统

注意一下；第一：取消系统默认的事件，最重要的一点在于是否每一个都填了．所以：

03

【JS】328- 8个你不知道的DOM功能

最近一直在关注工具，从 React 和 npm-install-everything 中休息一下，看看一些原生的 DOM 和 Web API 的功能，他们可以在没有任何依赖库的浏览器中直接运行。

01

对接声网SDK问题解决

问题错误 agora_node_ext.node is not a valid Win32 application 解决办法先删除node_moudle package.json 增加： "agora_electron": { "electron_version": "7.1.2", "prebuilt": true, "platform": "win32" }, 安装32位的electron npm install -save-dev el

03

Web API - DOM 第二节（操作元素）

JavaScript的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。（注意：这些操作都是通过元素对象的属性实现的）

01

关于HTML5的各种选择器

简介 ---- HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。用法 ---- 两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。 element = document.querySelector('selectors'); elementList =

01

一篇文章带你了解JavaScript错误处理

执行JavaScript代码时，可能会发生意想不到的错误。错误可以是程序员编写的编码错误，由于输入错误引起的错误以及其他不可预见的事情。

03

JavaScript 学习-27.查找HTML DOM节点(元素)

前言如何查找和访问 HTML 页面中的节点元素？也就是我们经常说的定位元素的一些方法。查询 HTML 节点(元素)一些方法查找 html 页面上的元素，可以用以下方法方法节点类型 getElementById() 通过 id 查找 HTML 元素 getElementsByClassName() 通过标 class 属性查找 HTML 元素 getElementsByName() 通过标 name 属性查找 HTML 元素 getElementsByTagName() 通过标 tag 标签查找 H

02

【JS】327- javascript 的 api 设计原则

本篇博文来自一次公司内部的前端分享，从多个方面讨论了在设计接口时遵循的原则，总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章，相关地址会在后面贴出来。很难做到详尽充实，如果有好的建议或者不对的地方，还望不吝赐教斧正。

02

Web API - DOM 第一节（获取元素）

节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示

04

HTML5中类jQuery选择器querySelector的使用

简介 HTML5向Web API新引入了document.querySelector以及document.querySelectorAll两个方法用来更方便地从DOM选取元素，功能类似于jQuery的选择器。这使得在编写原生JavaScript代码时方便了许多。用法两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。 element = document.querySelector('selectors');elementList = document.querySel

07

js api 之 fetch、querySelector、form、atob及btoa

转载请注明出处: https://www.cnblogs.com/funnyzpc/p/11095862.html

03

Javascript 常用语法 Web前端基础

Javascript 和 HTML、CSS一样，是Web前端开发所必须的三个模块。另外，JavaScript也是Vue、Ext、jQuery等框架的基础语言，所以JavaScript的学习是至关重要的。其实，学了C++语言，学了Java，感觉JavaScript的基础语法整理上比较类似于Java，所以那些输入输出选择循环语句的基础语法，就不记下来了，毕竟代码天天在写，也不会忘。

04

JavaScript 学习-28.元素与节点(HTMLCollection 和 NodeList)

前言我们平常说的查找元素和节点到底有什么区别？为什么有时候返回HTMLCollection ，有时候返回NodeList？ HTMLCollection 和 NodeList 的区别又是什么？带着这些问题进入本篇的学习。节点与元素根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：整个文档是一个文档节点每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点每个 HTML 属性是属性节点注释是注释节点以下示例

02

用HTML5-Canvas 写一个桌球游戏！

这只是一个简单的DEMO。游戏性、游戏规则没怎么考虑，如果有兴趣细化的朋友可以细化一下，比如细化一下规则，游戏开关，加个声音，细化一下进球检测，更严谨甚至可以去查下击球力度、桌面真实摩擦力等来把游戏弄的更像游戏。我只是给个编程思路，做一个DEMO而已，玩起来估计还是会很爽快的~~

03

大一下学期JavaScript(JS)课后作业整理

这学期学的JavaScript, 把老师留过的课后作业都整理一下发上来, 初学者可以根据案例要求自己制作. 不敢保证我这里发布的代码就是最优解, 不足的地方, 可以指出. (没有排过顺序, 难度等级低)

03

只使用JS怎么给静态网页添加站内全局搜索功能？

静态页面通常由HTML、CSS 和 JavaScript 等静态文件组成，这些文件在服务器上不会动态生成或修改，所以加载速度通常比较快。也利于搜索引擎的抓取，适合用于展示固定内容的网站，如企业官方网站、产品介绍页、博客文章等。

00

Typecho 主题开启 Ajax 加载更多文章

无意间想到给日记页加一个 Ajax 来请求更多日记，网上搜了一圈基本都是在 index.php 文件头加入判断实现的，问题是这个主题 index.php 不进行文章输出，所以是不可行的。我需要在 page-note.php 进行操作。

02

DOM&BOM

dom.insertBefore(d1,d2 ); 在dom的子节点d2前，增加d1。

02

form表单添加验证码并当验证通过后再提交表单

意思就是，form表单中添加一个验证码验证，然后当点击提交时先核验验证码是否正确，如果正确再提交数据，否则不提交。

01

使用Java进行网页抓取

用于网页抓取的流行语言有Python、JavaScript和Node.js、PHP、Java、C#等。因为有很多选择，想要确定哪种语言最合适并不容易。每种语言都有其优点和缺点。在本文中，我们将使用Java进行网页抓取并使用 Java创建一个网页抓取工具。

00

从零开始学 Web 之 HTML5（二）表单，多媒体新增内容，新增获取操作元素，自定义属性

high：被界定为高的值的范围。 low：被界定为低的值的范围。 max：规定范围的最大值。 min：规定范围的最小值。 optimum：规定度量的最优值。 value：规定度量的当前值。

03

Web开发tutorial

HTML语句由标签组成，基本格式为<标签名属性attribute=值value> 显示的字</标签名>

01

详析获取标签

在前几期的文章当中，我们学习了JS的基础语法，它是我们学习其它知识点的重要前提。小编也与大家分享了JS逻辑与DOM的相结合，并带着大家去实现了一些简单的页面交互效果，涉及了获取标签—>绑定事件—>操作标签样式。而今天的文章主要带着大家来分析其它获取标签的方法，这样才能更灵活的去获取网页中的标签。本文内容概要： 1 回顾通过ID名获取标签的方法 2 获取标签的其它方法 3 课程小结 4 课后作业 1 回顾通过ID名获取标签的方法 ID名获取标签需要给标签起一个ID名，然后通过getElementById()

09

HTML节点操作

HTML节点的基本操作，添加节点，替换节点，删除节点，绑定事件，访问子节点，访问父节点，访问兄弟节点。文档对象模型Document Object Model，简称DOM，是W3C组织推荐的处理可扩展标记语言XML的标准编程接口，是一种与平台和语言无关的应用程序接口API。根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点：整个文档是一个文档节点，每个HTML元素是元素节点，HTML元素内的文本是文本节点，每个HTML属性是属性节点，注释是注释节点。HTML DOM将HTML文档视作树结构。这种结构被称为节点树：HTML DOM Tree实例。

04

iscroll实现移动端下拉刷新，上拉加载更多

js菜鸡-------自我记录 html页面： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <meta name="format-detection" content="telephone=no"> <me

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭