选择器详解（1） javascript对象选取详解

选择器详解（1）

javascript对象选取详解

众所周知，找对象是一件很困难的事！！！

前端人员往往面对着一个问题，自己精心设计的事件不能绑定到所需要的元素之上，自己设计的函数不能在创建出来的对象上循环运行而致使所得的结果与自己想要的不一致。因此，小编决定整理一系列详细的选择器用法，分别分为javascript篇，jquery篇以及CSS3篇，希望通过整理帮助自己更好的理解选择器，也帮助各位看官整理思路。

原生的javascript需要我们创建变量来获取对象，我们通过demo一一列举。

---

1.getElementbyID

ID选择器，语法：

var idName=document.getElementbyID(“idName”);

demo:

var div=document.getElementById("div");//创建节点对象div.onclick=function () {    this.style.background="blue";}//对事件添加事件

---

2.getElementsByClass(“className”);

CLASS选择器，语法：

var className=document.getElementsClass("className");

className取到的对象是一个数组，因此产生了两种用法，当选取单个对象时，我们可以直接写为:

var className=document.getElementsClass("className")[index];

当选取多个对象时，我们可以直接写为：

var className=document.getElementsClass("className");

在创建节点绑定相同事件时，如果不使用事件委托的方法，我们可以利用CLASS选择出的是一个数组为节点绑定方法

var li=document.getElementsByClassName("nav_li");for(var i=0;i<li.length;i++){    li[i].onmouseover=function(){        this.style.overflow="visible";    }    li[i].onmouseout=function(){        this.style.overflow="hidden";    }}

然而我们会发现，当我们通过这种方法选取CLASS节点下的结点时，for循环的i变量会由于函数的闭包而使内部的事件选取不到变量值，但我们可以使用如下方式传值，需要特别注意：

var li=document.getElementsByClassName("nav_li");var dl=document.getElementsByClassName("nav_dl");for(var i=0;i<li.length;i++){    li[i].index=i;    li[i].onmouseover=function(){        dl[this.index].style.display = "block";    }    li[i].onmouseout=function() {        dl[this.index].style.display = "none";    }}

---

3.getElementsByTagName

TagName选择器，语法：

var tagName=document.getElementsBytagName("tagName");

TagName选择器与CLASS选择器用法类似，同样选择到的是一个数组，但是，由于tagName是按照节点标签选取对象，因此推荐不使用CLASS选择器的方法二，只使用方法一。

demo:

var div=document.getElementsByTagName("div")[0];div.onclick=function () {    this.style.background="blue";}

---

4.移动端利器，querySelector和document.querySelectorAll

querySelector选择器,语法：

    element = document.querySelector('selectors');

querySelectorAll选择器,语法：

    elementList = document.querySelectorAll('selectors');

尽管这两种方法在PC端存在一定的兼容问题，但其灵活的用法使其成为移动端项目原生选择器的不二法门，当然其参数selectors 可以包含多个CSS选择器，用逗号隔开：

    element = document.querySelector('selector1,selector2,...');    elementList=document.querySelectorAll('selector1,selector2,...');

有一个小弊端，使用这两个方法无法查找带伪类状态的元素，比如querySelector(‘:hover’)不会得到预期结果。在使用的时候需要特别注意。

---

5.特别提醒

我想很多看官已经注意到，所有的元素都在document下查找会选取到许多不必要的节点，实际上，我们选取对象的目录是可以更改的：

<div>    <p></p></div>var div=document.getElementsByTagName("div")[0];var p=div.getElementsByTagName("p")[0];p.onclick=function () {    alert("选择到了对象");}

---

至此，javascript选择器的基本用法已经基本展示完了，但实际上，我们在实际的使用中常常面临一种情况，当我们创建节点的时候，会面临到未来节点无法选取的尴尬境地，在本文结尾，我们引入事件监听机制解决这种情况，

demo:

<ul>    <li></li>    <li></li>    <li></li>    <li></li>    <li></li></ul>document.getElementsByTagName[0].addEventListener("click",function(e){    if(e.target&&e.target.nodeName.toUpperCase=="LI"){        this.style.background="blue";    }})

事件监听的内容有很多很复杂，同时由于兼容性问题，我们需要做很多的处理，在本文中只能一笔带过，笔者将在之后的微博中详细讲解事件监听机制以及兼容问题。

---

想要了解更多内容请关注笔者博客，定期更新，欢迎订阅。