获取元素
2016-06-04 本文已影响0人
行动改变一切
html代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>查找元素</title>
</head>
<body>
<ol id="list">
<li class="book">蜜蜂书店</li>
<li class="book">模范书局</li>
<li class="book2">物外书店</li>
<li class="book2">库布里克</li>
</ol>
<p>三联韬奋</p>
<p>字里行间</p>
<p class="page">言几又</p>
<input type="button" value="按钮1" name="btn" />
<input type="button" value="按钮2" name="btn" />
<input type="button" value="按钮3" class="btn" />
</body>
</html>
javascript获取元素
- 通过id获取元素
var list = document.getElementById("list");
- 通过TagName获取元素
var pages = document.getElementsByTagName("p");
- 通过ClassName获取元素 //IE9以下不支持
var books1 = document.getElementsByClassName("book");
4.通过Name获取元素 //IE下不是所有标签都支持此获取方法
var btn1 = document.getElementsByName("btn");
5.通过querySelector获取元素 //IE9以下不支持
var btn2 = document.querySelector(".btn");
6.通过querySelectorAll获取元素 IE9以下不支持
var books2 = document.querySelectorAll("#list .book2");
//返回元素数组,需通过下标操作单独元素,通过循环遍历每一个元素,
7.自调用函数
(function (a,b) {
console.log(a,b);
})(10,20);