HTML5 JS教程之新的API选择器

在过去我们使用js获得DOM节点的时候有以下几种方式:

  1. document.getElementById("#elementId"); 
  2. document.getElementsByName("elementName"); 
  3. document.getElementsByTagName("tagName"); 

我们虽然可以使用上面的几种方式方便获得元素,但也有不便的地方,比如根据Class来获取元素,如果有需要,我们还必须自己写一个getElementsByClassName();方法,要么使用其他的JS类库;现在终于可以摆脱这折磨人的时代啦~

新的选择器

  1. document.querySelector("selector"); 

selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回null;

支持: Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+

  1. document.querySelectorAll("selector"); 

selector:根据CSS选择器返回所有匹配到的元素数组,如果没有匹配到,则返回空数组;

支持: Chrome 4.0+, FireFox 3.5+, Safari 3.2+, Opera 10.1+, IE 8+

  1. document.getElementsByClassName("selector"); 

selector:根据类选择器返回所有匹配到的元素数组,如果没有匹配到,则返回空数组;

支持: Chrome 4.0+, FireFox 3.0+, Safari 3.2+, Opera 10.1+, IE 8+

案例如下:

HTML结构如下

  1. <p class="content"> 
  2.   <ul> 
  3.     <li>代码家园(daimajiayuan.com)!</li> 
  4.     <li class="sitejs">代码家园(daimajiayuan.com)!</li> 
  5.     <li class="sitejs">代码家园(daimajiayuan.com)!</li> 
  6.     <li class="sitejs">代码家园(daimajiayuan.com)!</li> 
  7.     <li>代码家园(daimajiayuan.com)!</li> 
  8.   </ul> 
  9. </p> 

1、如果想要获得第一个li元素,我们只需要:

  1. document.querySelector(".content ul li"); 

2、如果想要获得所有li元素,我们只需要:

  1. document.querySelectorAll(".content ul li"); 

3、如果想要获得所有class为sitejs的li元素,我们只需要:

  1. document.getElementsByClassName("sitejs"); 

转载请注明:代码家园 » HTML5 JS教程之新的API选择器

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)