html5新增选择器

html5中新增选择器主要有querySelector、querySelectorAll和getElementsByClassName，以下我们将通过例子具体解释它们：

例一：

<div  class="box" id="div1" name="tt">div1</div>
<div  class="box2" id="div2" name="dd">div2</div>
<div  class="box" id="div3" name="tt">div3</div>

（一）想要获取到上述例子中class为box的div，我们可以使用getElementsByClassName();

window.onload=function (){
    var aDiv=document.getElementsByClassName("box");//获取到class名为box的div，得到的是一个元素集合
    for(var i=0;i<aDiv.length;i++){  //遍历一下每个class名为box的div
        aDiv[i].style.color="red";  //为每一个符合条件的div的颜色设为红色
    }
}

得到的结果为：

在上述例子中getElementsByClassName("box")获取到的是第一个和第三个div；由此可以得出：

* getElementsByClassName()方法 返回文档中所有指定类名的元素集合，作为 NodeList 对象

* NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
* 用法：document.getElementsByClassName("className");

（二）如果我们想要获取到id值为div1和div3的元素，可以使用getElementById()方法：

window.onload=function (){
    var oDiv1=document.getElementById("div1"); //获取id为div1的div
    var oDiv2=document.getElementById("div3");  //获取id为div3的div
    oDiv1.style.color="red";  //为id为div1的元素设置颜色为红色
    oDiv2.style.color="yellow";  //为id为div2的元素设置颜色黄色
}

可以得出：

* getElementById()返回带有指定id的元素;
* 用法：document.getElementById("id名");

（3）如果我们想要获取到name值为tt的元素，可以通过getElementsByName();

window.onload=function (){
    var aDiv=document.getElementsByName("tt");//获取页面中name值为tt的元素
    for(var i=0;i<aDiv.length;i++){
        aDiv[i].style.background="red";
    }
}

可以得出：

* getElementsByName()方法可返回带有指定名称的对象的集合
* 用法：document.getElementsByName("name值");
* 该方法与 getElementById() 方法相似，但是它查询元素的是 name 属性，而不是 id 属性。
* 另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），
* 所以 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

（四）如果我们想要获取到页面中所有div元素，可以通过getElementsByTagName();

window.onload=function (){
    var aDiv=document.getElementsByTagName("div");//获取到页面中所有div元素
    for(var i=0;i<aDiv.length;i++){
        aDiv[i].style.color="blue";
    }
}

可以得出：

* getElementsByTagName() 方法可返回带有指定标签名的对象的集合
* 用法：document.getElementsByTagName("标签名");
* getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。
* 如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。
* 注释：传递给 getElementsByTagName() 方法的字符串可以不区分大小写
* 可以用 getElementsByTagName() 方法获取任何类型的 HTML 元素的列表
* 也可以使用 getElementsByTagName() 方法获取文档中的一个特定的元素，例如下列例子中我想要获得第二个div可以使用：
* var oDiv=document.getElementsByTagName("div")[1];不过我觉得如果需要操作一个特定的元素使用getElementById()更有效，
* 即var oDiv=document.getElementById("div2");

getElementById()和getElementsByTagName()的区别：

实例：

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

获得li元素：

var oUl=document.getElementById("list");
var aLi=oUl.getElementsByTagName("li");

//也可以直接：
var aUl=document.getElementsByTagName("ul")[0];  //获取到页面中第一个ul
var aLi=document.getElementsByTagName("li");

getElementById()和getElementsByTagName()的区别：

1）、getElementById()前面只能跟document，即document.getElementById()；而getElementsByTagName()前面除了跟document（document.getElementsByTagName()）之外还可以跟其他元素如上述例子中oUl.getElementsByTagName()

2）、getElementById()获得的是一个元素，而getElementsByTagName()获得的是一个元素的集合，用getElementsByTagName()对元素操作的时候必须加上[]，如上述例子中var aUl=document.getElementsByTagName("ul")[0]; //获取到页面中第一个ul

3）、用getElementById()如果页面中没有元素带有对应id，那么就找不到那个元素；而getElementsByTagName()是可以的，比如：

//可以直接使用document.title="";给title设置内容
//但是对body操作的时候不能直接使用document.body给body设置内容，需要使用document.body.innerHTML给body设置内容
//document.title=123;
//document.body.innerHTML="abc";
var aBtn=document.getElementsByTagName("input");
document.body.innerHTML="<input type='button' value='按钮' /><input type='button' value='按钮' /><input type='button' value='按钮' />";
alert(aBtn.length);
aBtn[0].onclick=function (){alert(1);}
aBtn[1].onclick=function (){alert(2);}
aBtn[2].onclick=function (){alert(3);}

 

回到问题（一）中，如果我们想要获取到class为box的元素，还有其他方法吗，请看下面：

使用querySelector()和querySelectorAll()，我们来看看它们的区别和各自的用法：

A、querySelector();

window.onload=function (){
    var oDiv=document.querySelector(".box");  
    oDiv.style.background="red";
}

我们可以看到只有第一个div的背景颜色变为红色了，而第三个div的背景颜色并没有改变，并且我们注意到在box前面有一个“.”；这是因为它是类似于css选择器的；querySelector()它只匹配符合条件的一个元素，并且是第一个元素。

 * querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
 * 注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
 * 用法：document.querySelector("css选择器");

B、querySelectorAll();

window.onload=function (){
    var aDiv=document.querySelectorAll(".box");
    for(var i=0;i<aDiv.length;i++){
        aDiv[i].style.background="red";
    }
}

可以看出：querySelectorAll()返回文档中匹配指定css选择器的所有元素，返回的是数组，这是它和querySelector()的最大区别

注意：在使用querySelector()和querySelectorAll()的时候一定记得带上选择器的符号，如果是class则带(".")；如果是id则带（"#"）;它们还可以匹配属性，例如例子中我们需要匹配name值为tt的元素，我们可以使用querySelectorAll("[name=tt]");

其实要匹配符合条件的元素我们也可以使用jquery方法，比如获取id为div1的元素：$("#div1");获取class为box的元素$(".box");获取页面中所有div元素$("div");在这里就不多说了