1、获取一组元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素</title>
<script>function(){
/*
获取一组元素
类似于
var aEle = document.getElementsByClassName('.red');
*/
var aEle = document.querySelectorAll("#div1 ol .red");
for (var i = 0; i < aEle.length; i++) {
aEle[i].style.background = "red";
}
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li class="box"></li>
<li class="red"></li>
<li></li>
</ul>
<div class="red">div red</div>
<ol>
<li class="box"></li>
<li class="red"></li>
<li></li>
</ol>
</div>
</body>
</html>
2、获取一个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>function(){
var oDiv = document.getElementById("div1");
//一个 可以从某个父级获取元素
var oEle = oDiv.querySelector(".red");
oEle.style.background = "red";
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li class="box"></li>
<li class="red"></li>
<li></li>
</ul>
<div id="red">div red</div>
<ol>
<li class="box"></li>
<li class="red"></li>
<li></li>
</ol>
</div>
</body>
</html>
3、获取元素 CSS选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>/*#div1 ul li:first-child{ background:yellow;}*/</style>
<script src="jquery-1.7.2.js"></script>
<script>function(){
// $("#div1 ul li:first").css({background : "red"});
// $("#div1 ul li:last").css({background:"green"});
//一组 css选择器
//没有 first/last/eq/....
var aEle = document.querySelectorAll('#div1 ul li:first-child');
for (var i = 0; i < aEle.length; i++) {
aEle[i].style.background = "red";
}
};
</script>
</head>
<body>
<div id="div1">
<ul>
<li id="li1" class="box"></li>
<li id="li1" class="red"></li>
<li></li>
</ul>
<div class="red">div red</div>
<ol>
<li id="li1" class="box"></li>
<li class="red"></li>
<li></li>
</ol>
</div>
</body>
</html>
4、获取元素 CSS选择器2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>#li1{ background:red;}</style>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script>function(){
//$("#li1").css({background : "red"});//一个
//$("li#li1").css({background : "red"});//一组
var aEle = document.querySelectorAll('#li1');
for (var i = 0; i < aEle.length; i++) {
aEle[i].style.background = "red";
}
}
</script>
</head>
<body>
<div id="div">
<ul>
<li id="li1" class="box"></li>
<li id="li1" class="red"></li>
<li></li>
</ul>
<div class="red">div red</div>
<ol>
<li id="li1" class="box"></li>
<li class="red"></li>
<li></li>
</ol>
</div>
</body>
</html>
