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容器實戰(六) - 容器的隔離與限制
-
每一个你不满意的现在，都有一个你没有努力的曾经。