queryselector怎么读（querySelector和getElementById通过id获取元素的区别）

本文目录

• querySelector和getElementById通过id获取元素的区别
• getElementById和querySelector方法的区别
• document.querySelector这个是什么函数
• queryselector怎么读
• javascript中querySelectorAll和getElementsByClassName的问题
• queryselector怎么获取多个
• JavaScript里的document.querySelectorAll()是什么意思
• Javascript里面的querySelector选择的内容是什么

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

这是sina同事xiaoniu发现的，如下

代码如下:

《!DOCTYPE html》
《html》

《head》
《meta charset=“utf-8“/》
《/head》

《body》
《div
id=“02E503E2A1C011CFC85B7B701A0677EC0900000000000001“》《/div》

《script》
var str =
’02E503E2A1C011CFC85B7B701A0677EC0900000000000001’;
function bySelector(id)
{
return document.querySelector(’#’+id);
}
function byId(id) {

return document.getElementById(id);
}

alert(bySelector(str));

alert(byId(str));
《/script》
《/body》
《/html》

两个函数bySelector，byId分别通过querySelector和getElementById获取元素.

页面上有id为“02E503E2A1C011CFC85B7B701A0677EC0900000000000001”的元素。

结果：所有支持querySelector的浏览器中通过bySelector均获取不到（报错），但通过getElementById却可以获取。

开始怀疑是id的字符串太长的原因导致querySelector获取不到。真正原因却是querySelector按css规范实现，即css标识符也不能以数字开头。

W3 写道
In CSS, identifiers (including element names, classes, and IDs
in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646
characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they
cannot start with a digit, two hyphens, or a hyphen followed by a digit.
Identifiers can also contain escaped characters and any ISO 10646 character as a
numeric code (see next item). For instance, the identifier “B&W?“ may be
written as “B\&W\?“ or “B\26 W\3F“.

getElementById和querySelector方法的区别

getXXXByXXX 获取的是动态集合，querySelector获取的是静态集合。
简单的说就是，动态就是选出的元素会随文档改变，静态的不会，取出来之后就和文档的改变无关了。
querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

document.querySelector这个是什么函数

getElementsByClassName()是HTML5新增的DOMAPI。IE8以下不支持。对于现代浏览器开发，还可以使用querySelector()和querySelectorAll()。他们的功能更加强大。=======================附注=========================解释：getElementsByClassName()是HTML5的DOMAPI。举个栗子：document.getElementsByClassName(“wrapper“);//取得DOM中所有class=“wrapper“的元素解释：querySelector()和querySelectorAll()是新标准的SelectorsAPI(选择符API)。IE8+、FF3.5+、Safari3.1+、Chrome、Opera10+支持querySelector()接受一个css选择器作为参数,然后返回DOM中匹配的第一个元素querySelectorAll()接受一个css选择器作为参数,然后返回DOM中匹配的元素的集合数组举个栗子：document.querySelector(“#wrapper“)//取得DOM中第一个id=“wrapper”的元素举个栗子：document.querySelector(“.wrapper“)//取得DOM中第一个class=“wrapper”的元素举个栗子：document.querySelector(“p“)//取得DOM中第一个元素举个栗子：document.querySelectorAll(“p“)//取得DOM中所有的元素类比于querySelector()P.S.原生的方法，便是getElementById()和getElementsByTagName()。这两个不会有兼容问题以上内容请参考《Javascript高级程序设计(第三版)》

queryselector怎么读

英文原文：
query selector
英式音标：
[ˈkwɪərɪ] [sɪˈlektə]
美式音标：
[ˈkwɪri] [səˈlɛktɚ]

javascript中querySelectorAll和getElementsByClassName的问题

你两张图实现的过程其实是有差别的，在图2中，oDiv后面的值是带的，也就是说oDiv是getElementsByClassName(“div1“)的子对象，而这个子对象已经是个静态对象了，改变它的class并不会使它消失。如果你把去掉，再把下面的代码改为 oDiv.className = ... ，你马上就能看到和图1一样的结果了！

queryselector怎么获取多个

两个方法使用差不多的语法，都是接收一个字符串参数，这个参数需要是合法的CSS选择语法。
element = document.querySelector(’selectors’);
elementList = document.querySelectorAll(’selectors’);

其中参数selectors 可以包含多个CSS选择器，用逗号隔开。
element = document.querySelector(’selector1,selector2,...’);
elementList = document.querySelectorAll(’selector1,selector2,...’);

使用这两个方法无法查找带伪类状态的元素，比如querySelector(’:hover’

JavaScript里的document.querySelectorAll()是什么意思

　　querySelectorAll()的作用是：按文档顺序返回指定元素节点的子树中匹配选择器的元素集合，如果没有匹配返回空集合。
相关延伸：

　　在传统的 JavaScript 开发中，查找 DOM 往往是开发人员遇到的第一个头疼的问题，原生的 JavaScript 所提供的 DOM 选择方法并不多，仅仅局限于通过 tag, name, id 等方式来查找，这显然是远远不够的，如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式，或者使用某个库。
　　事实上，现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持，甚至就连微软也派出了 IE 8 作为支持这一特性的代表，querySelector 和 querySelectorAll 作为查找 DOM 的又一途径，极大地方便了开发者，使用它们，你可以像使用 CSS 选择器一样快速地查找到你需要的节点。

用法：
document.querySelectorAll(“#test“);
document.querySelectorAll(“div.test》p:first-child“);
document.querySelectorAll( ’.test span’ );

浏览器兼容性：
　　虽然有些问题，但瑕不掩瑜，这么好用的两个方法咋没火呢？浏览器兼容性。。。其实比起一些HTML5和CSS3的特性来说这两个方法还没那么让人绝望，因为IE8都已经支持了，其它各个主力主流浏览器自然是实现了。
IE8+
Firefox
Chrome
Safari
Opera
Android
所以如果你是针对Mobile web优化，不要引用jQuery了，直接使用这两个方法就可以。

Javascript里面的querySelector选择的内容是什么

选择的是CSS选择器，例如id就是“#”，class就是“.”