document.queryselector获取元素失败

2026-09-03

document.querySelector获取不到html标签对象实例的原因

官方给出的HTML中的ID的命名规范: 1.必须以字母 A-Z 或 a-z 开头2.其后的字符:字母(A-Za-z).数字(0-9).连字符("-").下划线("_").冒号(":") 以及点号(".")3.值对大小写敏感但是个人建议不要使用冒号(":"),因为冒号在使用的时候在使用JQuery时,需要被转义,有时候浏览器不会进行转义,就会导致出错.一般使用字母加上下划线就够用了. html标签的ID命名

关于document.getElement获取元素返回值的问题

获取网页元素有很多种方法,如下: document.all[];返回HTMLElement对象 document.all.tags[];返回NodeList对象,类似数组 document.getElementById(); 返回HTMLElement对象 document.getElementsByTagName();返回NodeList对象,数组 document.getElementByClassName();返回NodeList对象,类似数组 document.getElementByN

原生js，通过document.getElementByClassName获取元素的索引值

let itemList = document.getElementsByClassName('sky-item') // 一行所有元素 let index = 0 for(let i = 0; i<itemList.length; i++){ // 寻找当前元素 if("sky-item focused" == itemList.item(i).className) index = i }

JavaScript身份证正则表达式,querySelector通过name获取元素,php正则表达式

var preg_sfz1 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/; var preg_sfz2 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$/; var id_card = document.querySelector("input[name=

JQ的offset().top与JS的getBoundingClientRect区别详解，JS获取元素距离视窗顶部可变距离

壹 ❀ 引我在 JQ的offset().top与js的offsetTop区别详解这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset().top = offsetTop - scrollTop的结论,不过此结论只适用于监听元素滚动条,而window的滚动条并不满足.那么在滚动window滚动条时如何获取元素距离视窗顶部的距离呢,这就不得说说本文的主角getBoundingClientRect方法. 贰 ❁ 关于getBoundi

各浏览器对使用 document.id 和 document.name 获取对象的支持存在差异

标准参考无. 问题描述各浏览器使用 document.id 和 document.name 方法获取对象引用的支持存在差异. 造成的影响某些浏览器中通过 document.id 和 document.name 可能无法获取元素,导致脚本异常,功能不可用. 受影响的浏览器所有浏览器问题分析参考 W3C 规范中 HTML5 草案:3.1.1 Documents in the DOM 参考 W3C 规范中 HTML5 草案:3.1.4 DOM tree accessors 1. DOM

详细解析 JavaScript 获取元素的坐标

引言最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题思考了一下.首先第一个问题是浏览器没有相关的 API 方法可以检测某个元素是否在可视区域,那么就只能我们人工计算,所以这里就涉及到了元素长宽,滚动条位置的知识.本文涉及的到的知识有元素长宽 clientWidth/offsetWidth/scrollWidth 的区别.以及 clientTop/of

跟随标准与Webkit源码探究DOM -- 获取元素之querySelector，querySelectorAll

使用CSS选择器获取元素 -- querySelector,querySelectorAll(HTML5) 标准 W3C Selector API Level 1为Document,DocumentFragment和Element追加了querySelector和querySelctorAll,原型为Element? querySelector(DOMString selectors)和 NodeList querySelectorAll(DOMString selectors),说明了匹配的算

javascript querySelector和getElementById通过id获取元素的区别

querySelector和getElementById通过id获取元素的区别 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="02E503E2A1C011CFC85B7B701A0677EC0900000000000001"></div> <script&g

document.getElementById 和 document.getElementsByClassName获取DOM元素的区别

想必小伙伴们对于 JS 获取DOM的几种方法早已烂熟于心,了然于胸, 尤其是 document.getElementById 和 document.getElementsByClassName, 看看下面截图,用上面2种方法获取到元素并添加点击事件后,控制台会打印出什么呢? 可能有小伙伴晃眼一看,这么简单,不就是 1和2 吗,真的是这样吗?下面看看控制台的打印截图结果是只打出了1,为什么没有打印出2呢? 现在我们把2种获取DOM的方法打印出来,如下截图, console.log(

JavaScript通过元素id和name直接获取元素的方法

概览: 偶然的机会,我在JavaScript中直接用HTML元素的id属性来获取该元素,并设置该元素的其他属性值,竟然能够正确解析不报错!于是我去查阅相关资料,也有其他同行这么用. 虽然说这种用法不是标准用法,推荐使用 document.getElementById(id);document.getElementByName(name); ,但也是一种新发现,先记录下来,以备后用. 本文讲述了JavaScript通过元素id和name直接获取元素的方法,以及自己在实践过程中总结的注意事项. 具体

常用数组、字符串方法总结&获取元素、DOM操作

字符串的方法.返回值.是否改变原字符串:1 charAt() 方法可返回指定位置的字符. 不改变原始字符串 JavaScript并没有一种有别于字符串类型的字符数据类型,返回的字符是长度为 1 的字符串: 注释:字符串中第一个字符的下标是 0.如果参数 index 不在 0 与 string.length 之间,该方法将返回一个空字符串. 2 concat() 方法用于连接两个或多个字符串并返回连接后的字符串不改变原始字符串语法:stringObject.concat(stringX,str

【Chrome控制台】获取元素上绑定的事件信息以及监控事件

需求场景在前端开发中,偶尔需要验证下某个元素上到底绑定了哪些事件,以及监控某个元素上的事件触发情况. 解决方案普通操作之前面对这种情况,一般采取的措施就是在各个事件里写console.info,然后进行点击等操作触发事件,或者在控制台trigger元素上的事件,或者dispatchEvent. 这种方法比较繁琐,而且假如触发这个事件之前需要做大量操作,触发时间后需要重新来过,真的是浪费时间啊. 神级操作今天偶然发现借助Chrome控制台的命令行,可以简单快捷地解决这个问题. 获取事件信息

js if for 详解获取元素方式及一些js 基础知识

##获取元素的新方法## --document.querySelector('Css Selector{css选择器}') 接收一个css选择器(通配,群组,类,包含,id....等) 若这个选择器对应的是一组元素,就找第0个,注意js从0开始计数.CSS计数从一开始. ##判断## 当同一种操作有两种不同结果时要用if if(判断条件){ 条件成立执行内容 }else{ 条件不成立执行内容} if括号中真正接收的是布尔值即true 或 false if(最终接收内容为true或false){

getBoundingClientRect方法获取元素在页面中的相对位置

获取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,offset获取位置会形成"回溯".而 getBoundingClientRect 方法则兼容性较好,基本所有的浏览器都支持了,且使用起来更容易和简单. 1.使用语法: element.getBoundingClientRect(); 方法中没有任何参数,返回值为对象类型. 2.在IE8及以下的浏览器中,返回值对象包含的属性值有: top::元素上边缘距离文档

JavaScript中的获取元素的方法

通过id获取元素 document.getElementById(id名字) 通过标签获取元素 document/元素.getElementsByTagName(标签名) 通过css选择器获取元素 document/元素.querySelector(css选择器) document/元素.querySelectorAll(css选择器) 知识点通过getElementsByTagName获取的元素,是一个类数组通过length,得到集合长度取集合中某一个元素,使用下标下标从0开始,依次增

js获取元素属性值为空的原因和解决办法

问题描述:js获取某元素的属性值为空代码:  <style> #box{ width: 100px; height: 100px; background:#333; } </style>  <body> <input type="button" value="变色" id="btn"> <div

Javascript入门(二)变量、获取元素、操作元素

一.变量 Javascript 有五种基本数据类型 number.String.boolean.undefined.null 一种复合类型:object 二.使用getElementById方法获取元素方式一: 这里的元素,指html里的标签,通过内置docuement的 'getElementById' 方法获取页面上设置了 id 属性的元素, 获取一个html对象,并为其赋值, 先不赋值看个例子: <!DOCTYPE html> <html lang="en"&

原生JavaScript支持6种方式获取元素

一.原生JavaScript支持6种方式获取元素 document.getElementById('id'); document.getElementsByName('name'); document.getElementsByTagName('tag'); document.getElementsByClassName('className'); document.querySelector("#id"); document.querySelector(".classNam

DOM获取元素的方法

DOM:document object module 文档对象模型 DOM就是描述整个html页面中节点关系的图谱,如下图. 1,通过ID,获取页面中元素的方法:(上下文必须是document) document.getElementById('元素的ID'); 2,通过name属性获取一组元素:(上下文必须是document) <body> <input name = 'cniao' type='radio' value='菜'> <input name = 'cniao'

document.queryselector获取元素失败

热门专题