DOM 获取元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript">
   window.onload=function(){
//    为id为btn01的按钮绑定一个单击响应函数
    var btn01=document.getElementById('btn01');
    btn01.onclick=function(){
     //查找#bj节点
     var bj=document.getElementById('bj');
     //打印北京
     //innerHTML 通过这个属性可以获取到元素内部的html
     alert(bj.innerHTML);
    }


//    为id为btn02的按钮绑定一个单击响应函数
    var btn02 =document.getElementById('btn02');
    btn02.onclick=function(){
     //查找所有的li元素
//     getElementsByTagName(); 通过标签名来获取一组元素的节点
//     这个方法可以给我们返回一个类数组对象所有查询到的元素都会封装到对象中
//     即使查找到一个元素,也会封装到数组中返回
     var lis =document.getElementsByTagName('li');
//     打印lis
//     alert(lis.length);
//     遍历lis中的内容
     for(var i=0;i<lis.length;i++){
//      查看li标签当中的内容
      alert(lis[i].innerHTML);
     }

    }
//    为id为btn02的按钮绑定一个单击响应函数
    var btn03 =document.getElementById('btn03');
//    点查找name等于gender所有的节点
    btn03.onclick=function(){
     var inputs =document.getElementsByName('gender');
//     alert(inputs.length);
      for(var i=0;i<inputs.length;i++){
       /*
//        * innerHTML用于获取元素内部的HTML代码的
        对于自结束标签，这个属性没有意义
        alert(inputs[i].innerHTML);
        */
      /*
       * 如果需要读取元素节点属性，直接使用元素.属性名
       * 例子：元素 .id 元素.name 元素.value
       * 注意：class属性不能采用这种方式
       *   读取class属性时需要使用元素.className
       */
      alert(inputs[i].value);
      alert(inputs[i].className);

     }

    }
   }
  </script>
</head>
<body>
  <ul id="cy">
   <li id="bj">北京</li>
   <li>东京</li>
   <li>首尔</li>
  </ul>

  <ul id="city">
   <li id="bj">北京</li>
   <li>东京</li>
   <li>首尔</li>
  </ul>

  <input class="hello" name="gender" type="text" value="文本框"/>
  <input name="gender" type="checkbox" value="复选框"/>
  <input name="gender" type="password" value="密码"/>

  <button id="btn01">点击</button>
  <button id="btn02">点查找所有的li节点</button>
  <button id="btn03">点查找name等于gender所有的节点</button>
</body>
</html>

猜你喜欢