JavaScript-dom查找返回值练习

编程语言 2023-04-08 15:09:49 阅读次数: 0

文章目录

dom 查找返回练习

1. 任务

1.1 查找 #bj 节点

1.2 查找所有 li 节点

1.3 查找 name=gender 的所有节点

1.4 查找 #city 下所有 li 节点

1.5 返回 #city 的所有子节点

1.6 返回 #phone 的第一个子节点

1.7 返回 #bj 的父节点

1.8 返回 #android 的前一个兄弟节点

1.9 返回 #username 的 value 属性值

1.10 设置 #username 的 value 属性值

1.11 返回 #bj 的文本值

dom 查找返回值练习

2. 思路

定义一个函数，专门用来为元素绑定单机响应函数

  • 参数:
  • idStr 要绑定单机响应函数的对象的 id 的属性值
  • fun 事件的回调函数，当单击函数时，该函数将会被触发
function myClick(idStr, fun) {
    
    
  //为id为btn01的按钮绑定一个单机响应函数
  var btn = document.getElementById(idStr);
  btn.onclick = fun;
}

2.1 查找 #bj 节点

  1. 为 id 为 btn01 的按钮绑定一个单机响应函数
  2. 查找#bj 节点
  3. 打印 bj
  4. innerHTML
    • 通过这个属性可以获取到元素内部的 html 代码
//为id为btn01的按钮绑定一个单机响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
    
    
  //查找#bj节点
  var bj = document.getElementById("bj");
  //打印bj
  //innerHTML  通过这个属性可以获取到元素内部的html代码
  alert(bj.innerHTML);
};

请添加图片描述

2.2 查找所有 li 节点

  1. 为 id 为 btn02 的按钮绑定一个单机响应函数
  2. 查找所有 li 节点
  3. getElementsByTagName()可以根据标签名来获取一组元素节点对象
    • 这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中
    • 即使查询到的元素只有一个，也会封装到数组中返回
  4. 打印 lis
  5. 遍历数组
//为id为btn02的按钮绑定一个单机响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function () {
    
    
  //查找所有li节点
  //getElementsByTagName()可以根据标签名来获取一组元素节点对象
  //这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中
  //即使查询到的元素只有一个，也会封装到数组中返回
  var lis = document.getElementsByTagName("li");

  //打印lis
  //alert(lis.length);

  //遍历数组
  for (var i = 0; i < lis.length; i++) {
    
    
    alert(lis[i].innerHTML);
  }
};

2.3 查找 name=gender 的所有节点

  1. 为 id 为 btn03 的按钮绑定一个单机响应函数
  2. 查找 name=gender 的所有节点
  3. innerHTML 用于获取元素内部的 HTML 代码的
    • 对于自结束标签,这个属性没有意义
  4. 如果需要读取元素节点的属性
    • 直接使用元素.属性名
    • 例子: 元素.id 元素.name 元素.value
    • 注意:class 属性不能采用这种方式
    • 读取 class 属性时需要使用 元素.className
//为id为btn03的按钮绑定一个单机响应函数
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
    
    
   //查找name=gender的所有节点
   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].className);
   }
};

请添加图片描述

2.4 查找 #city 下所有 li 节点

  1. 为 id 为 btn04 的按钮绑定一个单机响应函数
  2. 获取 di 为 city 的节点
  3. 查找#city 下所有 li 节点
//为id为btn04的按钮绑定一个单机响应函数
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
    
    

   //获取di为city的节点
   var city = document.getElementById("city");

   //查找#city下所有li节点
   var lis = city.getElementsByTagName("li");

   for(var i=0; i<lis.length; i++){
    
    
    alert(lis[i].innerHTML);
   }
};

2.5 返回 #city 的所有子节点

  1. 返回 id 为 btn05 的按钮来绑定一个单机响应函数
  2. 获取 id 为 city 的节点
  3. 返回#city 的所有子节点
  4. childNodes 属性会获取包括文本节点在内的所有节点
    • 根据 DOM 标准婊气那种的空白也会当成文本节点
    • 注意: 在 IE8 及以下的浏览器中，不会将空白当成子节点，
    • 所以该属性在 IE8 的长度中会返回 4 个子元素而其他浏览器是 9 个
  5. children 属性可以获取当前元素的所有子元素
//返回id为btn05的按钮来绑定一个单机响应函数
var btn05 = document.getElementById("btn05");
btn05.onclick = function(){
    
    
   //获取id为city的节点
   var city = document.getElementById("city");
   //返回#city的所有子节点
   /*
   * childNodes属性会获取包括文本节点在内的所有节点
   * 根据DOM标准婊气那种的空白也会当成文本节点
   * 注意: 在IE8及以下的浏览器中，不会将空白当成子节点，
   *  所以该属性在IE8的长度中会返回4个子元素而其他浏览器是9个
   */
   var cns = city.childNodes;

   alert(cns.length);

   /* for(var i=0; i<cns.length; i++){
   alert(cns[i]);
   } */

   /*
   * children属性可以获取当前元素的所有子元素
   */
   var cns2 = city.children;
   alert(cns2.length);
};

请添加图片描述

请添加图片描述

2.6 返回 #phone 的第一个子节点

  1. 为 id 为 btn06 的按钮绑定一个单机响应函数
  2. 获取 id 为 phone 的元素
  3. 返回#phone 的第一个子节点
  4. firstChild 可以获取到当前元素的第一个子节点(包括空白文本节点)
  5. firstElementChild 获取当前元素的第一个子元素
    • firstElementChild 不支持 IE8 及以下的浏览器，
    • 如果需要兼容他们尽量不要使用
//为id为btn06的按钮绑定一个单机响应函数
var btn06 = document.getElementById("btn06");
btn06.onclick = function(){
    
    
   //获取id为phone的元素
   var phone = document.getElementById("phone");
   //返回#phone的第一个子节点
   //phone.childNodes[0];
   //firstChild可以获取到当前元素的第一个子节点(包括空白文本节点)
   var fir = phone.firstChild;

   //firstElementChild获取当前元素的第一个子元素
   /*
    * firstElementChild不支持IE8及以下的浏览器，
    *  如果需要兼容他们尽量不要使用
    */
   //fir = phone.firstElementChild;

   alert(fir);
};

请添加图片描述

2.7 返回 #bj 的父节点

  1. 为 id 为 btn07 的按钮绑定一个单击响应函数
  2. 获取 id 为 bj 的节点
  3. 返回#bj 的父节点
  4. innerText该属性可以获取到元素内部的文本内容
    • 它和 innerHTML 类似，不同的格式它会自动将 html 标签去除
//为id为btn07的按钮绑定一个单击响应函数
myClick("btn07",function(){
    
    

//获取id为bj的节点
var bj = document.getElementById("bj");

//返回#bj的父节点
var pn = bj.parentNode;

//alert(pn.innerHTML);

/*
 * innerText
 *  - 该属性可以获取到元素内部的文本内容
 *  - 它和innerHTML类似，不同的格式它会自动将html标签去除
 */
alert(pn.innerText);

});

请添加图片描述

2.8 返回 #android 的前一个兄弟节点

  1. 为 id 为 btn08 的按钮绑定一个单击响应函数
  2. 获取 id 为 android 的元素
  3. 返回#android 的前一个兄弟节点(也可能会获取到空白的文本)
  4. previousElementSibling 获取前一个兄弟元素,IE8 及以下不支持
//为id为btn08的按钮绑定一个单击响应函数
myClick("btn08",function(){
    
    

   //获取id为android的元素
   var and = document.getElementById("android");

   //返回#android的前一个兄弟节点(也可能会获取到空白的文本)
   var ps = and.previousSibling;

   //previousElementSibling获取前一个兄弟元素,IE8及以下不支持
   //var pe = and.previousElementSibling;

   alert(ps);

});

请添加图片描述

2.9 返回 #username 的 value 属性值

  1. 读取#username 的 value 属性值
  2. 获取 id 为 username 的元素
  3. 读取 um 的 value 的属性值
  4. 文本框的 value 属性值，就是文本框中填写的内容
//读取#username的value属性值
myClick("btn09",function(){
    
    
   //获取id为username的元素
   var um = document.getElementById("username");
   //读取um的value的属性值
   //文本框的value属性值，就是文本框中填写的内容
   alert(um.value);

});

请添加图片描述

2.10 设置 #username 的 value 属性值

  1. 设置#username 的 value 属性值
  2. 获取 id 为 username 的元素
//设置#username的value属性值
myClick("btn10",function(){
    
    
   //获取id为username的元素
   var um = document.getElementById("username");

   um.value = "今天天气真不错~~~";
});

请添加图片描述

2.11 返回 #bj 的文本值

  1. 返回#bj 的文本值
  2. 获取 id 为 bj 的元素
  3. 获取 bj 中的文本节点
//返回#bj的文本值
myClick("btn11",function(){
    
    

   //获取id为bj的元素
   var bj = document.getElementById("bj");

   //alert(bj.innerHTML);
   //alert(bj.innerText);

   //获取bj中的文本节点
   /* var fc = bj.firstChild;
   alert(fc.nodeValue); */

   alert(bj.firstChild.nodeValue)

});

请添加图片描述

3. 完整代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="style/css.css" />
    <script type="text/javascript">

      function myClick(idStr, fun) {
      
      
        var btn = document.getElementById(idStr);
        btn.onclick = fun;
      }
      
      window.onload = function () {
      
      

        //1 查找 #bj 节点
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function () {
      
      
          var bj = document.getElementById("bj");
          alert(bj.innerHTML);
        };

        //2 查找所有 li 节点
        var btn02 = document.getElementById("btn02");
        btn02.onclick = function () {
      
      
          var lis = document.getElementsByTagName("li");
          for (var i = 0; i < lis.length; i++) {
      
      
            alert(lis[i].innerHTML);
          }
        };

        //3 查找 name=gender 的所有节点
        var btn03 = document.getElementById("btn03");
        btn03.onclick = function () {
      
      
          var inputs = document.getElementsByName("gender");
          for (var i = 0; i < inputs.length; i++) {
      
      
            alert(inputs[i].className);
          }
        };

        //4 查找 #city 下所有 li 节点
        var btn04 = document.getElementById("btn04");
        btn04.onclick = function () {
      
      
          var city = document.getElementById("city");
          var lis = city.getElementsByTagName("li");
          for (var i = 0; i < lis.length; i++) {
      
      
            alert(lis[i].innerHTML);
          }
        };

        //5 返回 #city 的所有子节点
        var btn05 = document.getElementById("btn05");
        btn05.onclick = function () {
      
      
          var city = document.getElementById("city");
          var cns = city.childNodes;
          alert(cns.length);
          var cns2 = city.children;
          alert(cns2.length);
        };

        //6 返回 #phone 的第一个子节点
        var btn06 = document.getElementById("btn06");
        btn06.onclick = function () {
      
      
          var phone = document.getElementById("phone");
          var fir = phone.firstChild;
          alert(fir);
        };

        //7 返回 #bj 的父节点
        myClick("btn07", function () {
      
      
          var bj = document.getElementById("bj");
          var pn = bj.parentNode;
          alert(pn.innerText);
        });

        //8 返回 #android 的前一个兄弟节点
        myClick("btn08", function () {
      
      
          var and = document.getElementById("android");
          var ps = and.previousSibling;
          alert(ps);
        });

        //9 返回 #username 的 value 属性值
        myClick("btn09", function () {
      
      
          var um = document.getElementById("username");
          alert(um.value);
        });

        //10 设置 #username 的 value 属性值
        myClick("btn10", function () {
      
      
          var um = document.getElementById("username");

          um.value = "今天天气真不错~~~";
        });

        //11 返回 #bj 的文本值
        myClick("btn11", function () {
      
      
          var bj = document.getElementById("bj");
          alert(bj.firstChild.nodeValue);
        });
      };
    </script>
  </head>
  <body>
    <div id="total">
      <div class="inner">
        <p>你喜欢哪个城市?</p>

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

        <br />
        <br />

        <p>你喜欢哪款单机游戏?</p>

        <ul id="game">
          <li id="rl">红警</li>
          <li>实况</li>
          <li>极品飞车</li>
          <li>魔兽</li>
        </ul>

        <br />
        <br />

        <p>你手机的操作系统是?</p>

        <ul id="phone">
          <li>IOS</li>
          <li id="android">Android</li>
          <li>Windows Phone</li>
        </ul>
      </div>

      <div class="inner">
        gender:
        <input class="hello" type="radio" name="gender" value="male" />
        Male
        <input class="hello" type="radio" name="gender" value="female" />
        Female
        <br />
        <br />
        name:
        <input type="text" name="name" id="username" value="abcde" />
      </div>
    </div>
    <div id="btnList">
      <div><button id="btn01">查找#bj节点</button></div>
      <div><button id="btn02">查找所有li节点</button></div>
      <div><button id="btn03">查找name=gender的所有节点</button></div>
      <div><button id="btn04">查找#city下所有li节点</button></div>
      <div><button id="btn05">返回#city的所有子节点</button></div>
      <div><button id="btn06">返回#phone的第一个子节点</button></div>
      <div><button id="btn07">返回#bj的父节点</button></div>
      <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
      <div><button id="btn09">返回#username的value属性值</button></div>
      <div><button id="btn10">设置#username的value属性值</button></div>
      <div><button id="btn11">返回#bj的文本值</button></div>
    </div>
  </body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_64933233/article/details/128563545
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022