queryselector用法 queryselect用法

1、document.querySelector():

queryselector用法 queryselect用法

-- 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对像， 如#box div 表示id为box的元素中的div

-- 使用该方法总会返回唯一的一个元素，如果满足的元素有多个，那么它只会返回第一个

2、document.querySelectorAll()用法与querySelector()相似，不同的是它会将符合条件的元素封装到一个数组中返回。

querySelector：

return the first matching Element

node within the node's subtrees. If there is no such node, the method must

return null.（返回指定元素节点的子树中匹配selector的集合中的第一个，如果没有匹配，返回null）

querySelectorAll：

return a NodeList containing

all of the matching Element nodes within the node's subtrees, in document order.

If there are no such nodes, the method must return an empty NodeList.

（返回指定元素节点的子树中匹配selector的节点集合，采用的是深度优先预查找；如果没有匹配的，这个方法返回空集合）

使用方法：

复制代码

代码如下:

var element =

baseElement.querySelector(selectors);

var elementList =

baseElement.querySelectorAll(selectors);

这在BaseElement

为document的时候，没有什么问题，各浏览器的实现基本一致；但是，当BaseElement 为一个普通的dom Node的时候（支持这两个方法的dom

Node），浏览器的实现就有点奇怪了，举个例子：

复制代码

代码如下:

按照W3C的来理解，这个例子应该返回：element：null；elementList：[];因为作为baseElement的

testElement里面根本没有符合selectors的匹配子节点；但浏览器却好像无视了baseElement，只在乎selectors，也就是说此时baseElement近乎document；这和我们的预期结果不合，也许随着浏览器的不断升级，这个问题会得到统一口径！

人的智慧总是无穷的，Andrew

Dupont发明了一种方法暂时修正了这个怪问题，就是在selectors前面指定baseElement的id，限制匹配的范围；这个方法被广泛的应用在各大流行框架中；

Jquery的实现：

复制代码

代码如下:

var oldContext = context,

old =

context.getAttribute( "id" ),
nid = old || id,

try {

if (

!relativeHierarchySelector || hasParent ) {

return makeArray(

context.querySelectorAll( "[id='" + nid + "'] " + query ), extra );

}}

catch(pseudoError) {}
finally {

if ( !old )

{oldContext.removeAttribute( "id" );}

}先不看这点代码中其他的地方，只看他如何实现这个方法的；这点代码是JQuery1.6的片段；当baseElement没有ID的时候，给他设置一个id

= "__sizzle__”，然后再使用的时候加在selectors的前面，做到范围限制；context.querySelectorAll( "[id='" +

nid + "'] " + query

；最后，因为这个ID本身不是baseElement应该有的，所以，还需要移除：oldContext.removeAttribute( "id" );

，Mootools的实现：

复制代码

代码如下:

var currentId =

_context.getAttribute('id'), slickid = 'slickid__';

_context.setAttribute('id', slickid);

_expression = '#' + slickid + ' '

+ _expression;

context = _context.parentNode;

Mootools和Jquery类似：只不过slickid = 'slickid__'；其实意义是一样的；

方法兼容性：FF3.5+/IE8+/Chrome 1+/opera 10+/Safari 3.2+;

IE 8

：不支持baseElement为object；

1、在MyEclipse菜单栏window —>preferences —>myeclipse —>validation —>javascript validator for Js files 把Bulid 复选框的勾去掉 就可以了

2、在所建立的工程项目上右键单击，找到myeclipse–>Exclude Form Validation单击一下，打上√号，js的错误就没了！

一般常用的原生选择器有：

id选择器:document.getElementById("test");

name选择器:document.getElementsByName("test");

节点选择器:document.getElementsByTagName("p");

class选择器:document.getElementsByClassName("test");

这次要详细说的是 document.querySelector() ， 开挂般的存在， jQuery的完美替代版本。

接收一个字符串参数， 返回返文档中与指定选择器或选择器组匹配的第一个 HTMLElement 对象。 如果找不到匹配项，则返回 null 。

3.返回带有foo或者bar样式类的首个元素

4.返回id为‘my-element’的 p 元素

6.其他选择方式可自行排列组合

document.querySelector() 的用法虽然与jQuery里的$()选择器类似,但有些细微区别:

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高级程序设计(第三版)》