JS 获取元素

获取元素

<style type="text/css">
*{
    /*padding:0px;
    margin:0px;*/
    list-style:none;
    text-decoration:none;
    font-family:microsoft yahei;
}
#all{
    padding:10px;
    width:800px;
    height:auto;
    border:solid 1px #333;
    margin:0 auto;

}
#menu a{font-size:14px;}
#header{width:97%;height:80px;border:solid 1px #444;margin:10px;}
#section{width:97%;height:auto;border:solid 1px #444;margin:10px;}

#footer{width:97%;height:50px;border:solid 1px #444;margin:10px;}
#header ul{height:auto;overflow:hidden;padding-left:100px;}
#header ul li{width:60px;height:30px;float:left;border:solid 1px #456;text-align:center;line-height:30px;}

#logo{width:200px;height:auto;float:left;position:relative;}
#logo img{margin-top:-40px;}
#section ul{height:auto;overflow:hidden;padding:20px;}
#section li{width:200px;height:150px;float:left;border:solid 2px pink;padding:10px;margin-right:21px;margin-bottom:21px;}
#img{width:100px;float:left;}
#copy{height:auto;overflow:hidden;padding-left:100px;}
#move{width:80px;height:40px;background:pink;position:fixed;right:0px;top:100px;cursor:pointer;font-family:courier;line-height:40px;}
#allmove{width:80px;height:40px;background:pink;position:fixed;right:0px;top:200px;cursor:pointer;font-family:courier;line-height:40px;}
#recovery{width:80px;height:40px;background:pink;position:fixed;right:0px;top:300px;cursor:pointer;font-family:courier;line-height:40px;}
</style>
<script type="text/javascript">
    window.onload = function(){
        var lis = images.getElementsByTagName('li');//获取所有的li
        for(var i=0;i<lis.length;i++){       
            lis[i].style.transform = 'rotate('+(Math.ceil(Math.random()*90)-45)+'deg)';
        }

        move.onclick = function(){
            for(var i=0;i<lis.length;i++){      
                lis[i].style.transform = 'rotate('+(Math.ceil(Math.random()*90)-45)+'deg)';
            }
            return false;
        }
        allmove.onclick = function(){
            var d = 0;
            var inte = setInterval(function(){
                document.body.style.transform = 'rotate('+d+'deg)';
                d+=10;
                if(d > 360){
                    clearInterval(inte);
                }
            },10)
        }
        recovery.onclick = function(){
            for(var i=0;i<lis.length;i++){      
                lis[i].style.transform = 'rotate(0deg)';
            }
            return false;
        }
    }
</script>
<!-- 内容 start -->
<div id="all">
    <!-- 头部 start -->
    <div id="header">
        <div id="logo"><img src="./sunli/logo.png" alt="" width="100%"></div>
        <ul id="menu">
            <li><a href="国内">国内</a></li>
            <li><a href="国外">国外</a></li>
            <li><a href="科技">科技</a></li>
            <li><a href="生活">生活</a></li>
        </ul>
    </div>
    <!-- 头部 end -->
    <div>123678<span>iloveyou</span></div>
    <!-- 内容 start -->
    <div id="section">
        <ul id="images">
            <li class="w"><a href=""><img src="./sunli/1.jpg" alt="" width="100%"></a></li>
            <li class="w"><a href=""><img src="./sunli/2.jpg" alt="" width="100%"></a></li>
            <li class="w"><a href=""><img src="./sunli/3.jpg" alt="" width="100%"></a></li>
            <li><a href=""><img src="./sunli/4.jpg" alt="" width="100%"></a></li>
            <li id="five"><a href=""><img src="./sunli/5.jpg" alt="" width="100%"></a></li>
            <li><a href=""><img src="./sunli/6.jpg" alt="" width="100%"></a></li>
            <li name="y"><a href=""><img src="./sunli/7.jpg" alt="" width="100%"></a></li>
            <li name="y"><a href=""><img src="./sunli/8.jpg" alt="" width="100%"></a></li>
            <li name="y"><a href=""><img src="./sunli/9.jpg" alt="" width="100%"></a></li>
        </ul>
    </div>
    <!-- 内容 end -->

    <!-- 底部 start -->
    <div id="footer">
        <div id="img"><img src="./sunli/logo.png" alt="" width="100%"></div>
        <div id="copy">© Copyright 2014. All Rights Reserved.</div>
    </div>
    <!-- 底部 end -->

</div>
<!-- 内容 end -->
<div id="move">Image</div>
<div id="allmove">Body</div>
<div id="recovery">Recovery</div>

通过id来获取元素

var logo = document.getElementById('logo');

通过标签名来获取元素 在文档中获取所有的li元素

var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
    lis[i].style.background = 'red';
}

通过类名来获取元素

var ws = document.getElementsByClassName('w');
for(var i=0;i<ws.length;i++) {
    ws[i].style.background = 'pink';
}

通过name的值;来获取元素

var ns = document.getElementsByName('y');
for(var i=0;i<ns.length;i++) {
    ns[i].style.background = 'red';
}

父子关系来获取元素

获取ul元素
var ul = document.getElementById('images');
var cs = ul.childNodes;
获取元素中的所有的标签子元素
var css = ul.children; // 小孩子的复数
for(var i=0;i<css.length;i++) {
    css[i].style.border  = "solid 2px black";
}

获取第一个子节点

var f = ul.firstChild;

获取第一个标签子节点

var first = ul.firstElementChild;

获取最后一个子节点

var l = ul.lastChild;

获取最后一个标签子节点

var last = ul.lastElementChild;

获取元素的上一个同辈元素

var five = document.getElementById('five');
var prev = five.previousSibling;

获取元素的上一个同辈标签元素

var prev = five.previousElementSibling;

获取元素的下一个同辈元素

var n = five.nextSibling;

获取下一个同辈的标签元素

var next = five.nextElementSibling;
next.style.background = 'black';

five.nextElementSibling.nextElementSibling.nextElementSibling.style.background = 'red';

获取父级节点

var p = five.parentNode;
var pare = five.parentElement;
pare.parentNode.parentNode.parentNode.style.background = 'grey';
console.log(pare);