1获取元素

游鹄君2025年5月1日大约 3 分钟
示例代码

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>获取元素</title>
  <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;line-height:50px;}
    #move{width:120px;height:40px;background:pink;position:fixed;right:0px;top:100px;cursor:pointer;font-family:courier;line-height:40px;text-align:center;}
    #allmove{width:120px;height:40px;background:pink;position:fixed;right:0px;top:200px;cursor:pointer;font-family:courier;line-height:40px;text-align:center;}
    #recovery{width:120px;height:40px;background:pink;position:fixed;right:0px;top:300px;cursor:pointer;font-family:courier;line-height:40px;text-align:center;}
  </style>
  <script type="text/javascript">
  window.onload = function(){
    var lis = images.getElementsByTagName('li');//获取所有的li
  
    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>
</head>
<body>
  <!-- 内容 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 -->
    
    <!-- 内容 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 id='one'><a href=""><img src="./sunli/4.jpg" alt="" width="100%"></a></li>
       <li><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%" height='50px'></div>
     <div id="copy">© Copyright 2014. All Rights Reserved.Beijing</div>
    </div>
    <!-- 底部 end -->
  
  </div>
  <!-- 内容 end -->
  <div id="move">Image</div>
  <div id="allmove">Body</div>
  <div id="recovery">Recovery</div>
 
  <script type="text/javascript">
  var images = document.getElementById('images'); 
 
 
  //通过类名的方式
  var ws = document.getElementsByClassName('w');
 
  /*for (var i = 0; i < ws.length; i++) {
    
    ws[i].style.background = 'blue';
  };
*/
  //通过属性name的值
  var ys = document.getElementsByName('y');
  /*for (var i = 0; i < ys.length; i++) {
     ys[i].onclick = function()
     {
       alert('12345');
     }
  };
*/
  
  //获取父级里面所有的子节点
  // var childs = images.childNodes;
 
  //获取父级里面所有的子元素节点
  // var childs = images.children;
 
  //获取父级里面的第一个子节点
  // var firsts = images.firstChild;
 
  //获取父级里面第一个子元素节点
  // var firs = images.firstElementChild;
 
  //获取最后一个节点
  //var lasts = images.lastChild;
  //获取最后一个元素节点
 
  //var las = images.lastElementChild;
 
  //设置一个id
  var one = document.getElementById('one');
 
  //获取上一个节点
  var prev = one.previousSibling;
 
  //获取上一个元素节点
  var prevs = one.previousElementSibling;
 
  //获取下一个节点
  var nexts = one.nextSibling;
 
  //获取下一个元素节点  
  var net = one.nextElementSibling;
 
  //获取父级的节点
  var parents = one.parentNode;
 
  var pars = one.parentElement;
 
  //获取下一个节点的下一个节点
  var lis = one.nextElementSibling.nextElementSibling;
 
 
  // console.log(parents);
  // console.log(lis);
 
 
 
  //特殊节点的获取
  // var docs = document.doctype;
 
  //获取html
  // var hs = document.documentElement;
 
  //head
  // var heads = document.head;
 
  //title
  // var titles = document.title;
 
  //body
  var bodys = document.body;
 
  // console.log(bodys);
  // bodys.style.background = 'blue';
 
  </script>
  
  
</body>
</html>