5、获取元素

来源：互联网发布：淘宝天弘基金找不到了编辑：程序博客网时间：2024/06/05 06:39

1、获取一组元素

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>获取元素</title><script>window.onload = 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>window.onload = 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>window.onload = 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>window.onload = 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>

阅读全文

0 0