02-JS中父节点

JS中父节点

父节点
1）parentNode
隐藏 li 节点

2) offsetParent
absolute 定位 ：绝对定位
它是相对于它最近的已定位的父元素，如果元素没有已经定位的父元素，它会一级一级向上找，直到找html
找到html后会相对于html进行绝对定位

offsetParent:找决定它直接定位的父元素

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <ul>
 9             <li>asdfasf <a href="#">隐藏</a> </li>
10             <li>收发室 <a href="#">隐藏</a> </li>
11             <li>填写 <a href="#">隐藏</a> </li>
12             <li>木材 <a href="#">隐藏</a> </li>
13             <li style="display: none;">苷阿斯蒂芬基本功 <a href="#">隐藏</a> </li>
14         </ul>
15     </body>
16     <script type="text/javascript">
17         window.onload=function(){
18             //获得所有的  a  标签
19             var aTag = document.getElementsByTagName('a');
20             //console.log(aTag.length);
21             
22             for (var i=0;i<aTag.length;i++) {
23                 // 给 a 添加单击事件
24                 aTag[i].onclick = function(){
25                     this.parentNode.style.display = "none";    
26                 }
27             }
28         }
29     </script>
30 </html>

 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             #div1{
 8                 width: 200px;
 9                 height: 200px;
10                 background: #ccc;
11                 
12                 margin: 100px;
13                 position:relative;
14             }
15             #div2{
16                 width: 100px;
17                 height: 100px;
18                 background: red;
19                 position: absolute;
20                 left: 50px;
21                 top: 50px;
22             }
23         </style>
24     </head>
25     <body>
26         <div id="div1">
27             <div id="div2">    
28             </div>
29         </div>
30     </body>
31     <script type="text/javascript">
32         window.onload=function(){
33             var div2 = document.getElementById("div2");
34             console.log(div2.offsetParent);
35         }
36     </script>
37 </html>

 

posted @ 2017-11-08 19:36  刘选航  阅读(232)  评论(0)  编辑  收藏  举报