Author: 刘老师(Aaron Lau) 武汉长乐教育，武汉PHP培训课程，版权所有，转载请注明！

HTML5的Selectors API简化选取操作

本课摘要

1. 过去获取DOM对象
2. 使用Selectors API获取DOM对象
3. 使用jQuery获取DOM对象

1. 过去获取DOM对象

<div id="foo"></div>

<script>
var foo = document.getElementById("foo");
</script>

<input type="text" name="foo" />

<script>
var foo = document.getElementsByName("foo");
</script>

<input type="text" />
<script>
var input = document.getElementsByTagName("input");
</script>

2. 使用Selectors API获取DOM对象

querySelector和querySelectorAll用于获得DOM对象，可以接受三种类型的参数：id(#)，class(.)，标签.

querySelector和querySelectorAll的区别是,querySelector 返回找到的第一个节点, 而querySelectorAll 返回的是多个, 是一个节点集合.

//返回body节点
document.querySelector("body");

//返回id为k的节点
document.querySelector("#k");

;//返回id为k的节点下的第一个span节点
document.querySelector("#k span")

//返回id为k的节点下的第一个span节点
document.querySelector("#k").querySelector("span");

//返回所用tagName为li的节点集合（NodeList）
document.querySelectorAll("li");

//返回class为li的div
document.querySelectorAll("div .li");

3. 使用jQuery获取DOM对象

var $cr = $("#cr");        //jQuery对象
var cr = $cr[0];        //DOM对象
var cr2 = $cr.get(0);   //DOM对象