• 获取父节点&&兄弟节点


     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>
  • 相关阅读:
    科技服务队的日子第一次上班
    快速删除word中的表格
    名词探疑:为什么HTML里单选叫radio呢?
    jquery 保存DOM对象并转换
    作业
    第二次作业
    第三次作业
    WPF自定义Window样式(2)
    sql server中的分页数据查询
    WPF自定义Window样式(1)
  • 原文地址:https://www.cnblogs.com/zuiaimiusi/p/11245124.html
Copyright © 2020-2023  润新知