html5的确给我们带来惊喜， 新增的dom api-类选择器
那么怎样使用呢？看下面的代码吧.....
JavaScript
var els = document.getElementsByClassName('myinput');
els[0].focus();
多有意思的一个api，提供了丰富的用户体验！
看下面的小例子吧
XML/HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>html5-DOM API</title>
</head>
<body>
<textarea class="section"></textarea>
<script type="text/javascript">
var els = document.getElementsByClassName('section');
els[0].focus();
</script>
</body>
</html>
通过类似 css 选择器的语法定位元素 (Selectors API)
JavaScript
var els = document.querySelectorAll("ul li:nth-child(odd)");
var els = document.querySelectorAll("table.test > tr > td");
XML/HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>html5-querySelectorAll</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script type="text/javascript">
var els = document.querySelectorAll("ul li:nth-child(odd)");
for(var i =0; i<els.length; i++)
els.item(i).style.color="#f00";
</script>
</body>
</html>
其他的例子
XML/HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>table</title>
</head>
<body>
<table width="200" border="1">
<tr>
<td>s</td>
<td>s</td>
<td>s</td>
<td>s</td>
</tr>
<tr>
<td>s</td>
<td>s</td>
<td>s</td>
<td>s</td>
</tr>
<tr>
<td>s</td>
<td>s</td>
<td>s</td>
<td>s</td>
</tr>
<tr>
<td>s</td>
<td>s</td>
<td>s</td>
<td>s</td>
</tr>
</table>
<script type="text/javascript">
var els = document.querySelectorAll("table tr td");
alert(els.length);
for(var i = 0; i<els.length; i++)
els.item(i).style.color="#f00";
</script>
</body>
</html>