获取父节点&&兄弟节点 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <script type="text/javascript">
 8    /*
 9    定义一个函数，专门用来为指定元素绑定单击响应函数
10    参数
11    idStr 要绑定单击响应函数的对象id属性值
12    */
13    function myClick(str,fun){
14     var a=document.getElementById(str);
15     a.onclick=fun;
16     }
17     window.onload=function(){
18 
19 
20     myClick("01",function(){
21     var shanghai=document.getElementById("shanghai");
22     var a=shanghai.parentNode;
23     alert(a.innerHTML);
24     alert(a.innerText);
25     });
26     myClick("02",function(){
27     //返回Android前一个兄弟节点
28     var a=document.getElementById("Android");
29     var ps=a.previousSibling;
30     alert(ps.innerHTML);
31     });
32     /*
33     innerText 该属性可以获取到元素内容的文本内容
34     它和innerHTML类似，不同的是它会自动将HTML去掉，得到其中的文本内容
35     */
36     myClick("03",function(){
37     var a=document.getElementById("name");
38     //读取a的value属性值，文本框的value属性值，就是文本框中填写的内容
39     alert(a.value);
40     });
41     myClick("04",function(){
42     //获取#shanghai中的文本节点
43     var sh=document.getElementById("shanghai");
44     //alert(sh.innerHTML);
45     //alert(sh.innerText);
46     //var fc=sh.firstChild;
47     //alert(fc.nodeValue);
48     alert(sh.firstChild.nodeValue);
49     });
50     };
51     </script>
52   <style type="text/css">
53       *{
54       margin:0px;
55       padding:0px;
56       }
57      ul{
58       text-docoration:none;
59      }
60   </style>
61 <body>
62 <!--
63 parentNode 表示当前节点的父节点
64 previousSibling 表示当前节点的前一个兄弟节点(可以获取到空白的文本)
65 previousElementSibling 获取前一个兄弟元素 ie8及以下不支持
66 nextSibling 表示当前节点的后一个兄弟节点
67 -->
68  你的名字：
69 <input type="text" id="name"/>
70  <p>你喜欢的城市是什么？</p>
71 <ul id="city">
72     <li id="shanghai">上海</li>
73     <li>北京</li>
74     <li>深圳</li>
75 </ul>
76 <p>你的手机的操作系统？</p>
77 <ul id="phone">
78     <li>IOS</li><li id="Android">Android</li>
79 </ul>
80   <input type="button" value="button1" id="01">
81   <input type="button" value="button2" id="02">
82   <input type="button" value="button3" id="03">
83   <input type="button" value="button4" id="04">
84 </body>
85 </html>

 

posted @ 2019-07-25 16:30  zuiaimiusi  阅读(268)  评论(0)    收藏  举报