html5 class选择器
html5的确给咱们带来惊喜， 新增的dom api-类选择器javascript
那么怎样使用呢？看下面的代码吧.....css
JavaScript
var els = document.getElementsByClassName('myinput');
els[0].focus();
多有意思的一个api，提供了丰富的用户体验！html
看下面的小例子吧html5
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)java
JavaScript
var els = document.querySelectorAll("ul li:nth-child(odd)");
var els = document.querySelectorAll("table.test > tr > td");
api
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>
其余的例子dom
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> ui
- 1. CSS Class 选择器
- 2. HTML5选择器、history
- 3. HTML连载18-id选择器与class区别&class选择器使用思路&后代选择器
- 4. HTML5中CSS3的相邻选择器、兄弟选择器以及not选择器
- 5. CSS中ID选择器和类（class）选择器的区别
- 6. class选择器与id选择器的区别
- 7. 个人笔记012--id选择器和class选择器
- 8. html5--6-10 CSS选择器7--伪类选择器
- 9. css选择器——[class*="col-"]，[attr~=val]等
- 10. Day22-HTML5的标签选择器
- 更多相关文章...
- • XQuery 选择 和 过滤 - XQuery 教程
- • MySQL选择数据库（MySQL USE语句） - MySQL教程
- • Docker容器实战(七) - 容器眼光下的文件系统
- • Docker容器实战(六) - 容器的隔离与限制
-
每一个你不满意的现在，都有一个你没有努力的曾经。