37、Dom查询

最新推荐文章于 2022-10-11 17:28:58 发布

五仁卤鸡翅

最新推荐文章于 2022-10-11 17:28:58 发布

阅读量123

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/MoonNight608/article/details/106855277

版权

JS 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

文章目录

介绍
获取子节点
获取父节点及兄弟节点

介绍

本文是在学习JS所做的学习笔记，所有笔记内容请看：JS学习笔记

获取子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <ul id="city">
      <li id="bj">北京</li>
      <li >东京/li>
      <li >首尔</li>
  </ul>    
   <script>

   1、通过documnent调用查询，是在整个页面查询；通过元素调用查询，是在元素节点后代中查询
       var city=document.getElementById("city");
      // 在city下查找子节点
      city.getElementsByTagName("li")
   
   2、childNodes 
          -属性，表示当前节点的所有子节点
           根据DOM标签间的空白也会当成文本节点
           在IE8及一下的浏览器中，不会将空白文本当成子节点

   3、firstChild
        -属性，表示当前节点的第一个节点
         包括空白节点
         
   4、lastChild
        -属性，表示当前节点的最后一个子节点  
        
   5、children
        -属性，可以获取当前元素的所有子元素  
         不会包括空白文档，推荐使用  
         
  6、firstElementChild
       获取当前元素的第一个子元素，不包括空白  
       但该方法不支持IE8一下的浏览器，如果需要兼容，尽量不要使用
  
  
    
    /*
     返回city下的子节点
    */
    var city=document.getElementById("city");
    // 如下包括所有节点，包括元素节点 文本节点在内的所有节点
    // 包括换行
    var cns=city.childNodes 
    
    /* 
      children 属性可以获取当前元素的所有子元素
      即标签，不会包括空白文档
    */
    var cns2=city.children;
    
   
   </script>
</body>
</html>

获取父节点及兄弟节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <ul id="inner">
      <li id="bj">北京</li>
      <li >东京/li>
      <li >首尔</li>
  </ul>    
   <script>

   通过具体的节点调用
    1.parentNode
       -属性，表示当前节点的父节点
    2.previousSibling
       -属性，表示当前节点的前一个兄弟节点
       也会获取空白文本
       previousElementSibling
        - 获取前一个兄弟元素
    3.nextSibling
      -属性，表示当前节点的后一个兄弟节点   

   4、innerText
      -该属性获取元素内部文本内容
      -它和innerHTML类型，不同的是它会自动将html去除
 
    
 
  
 定义一个函数，专门用来为指定元素绑定单击相应函数
      参数：
         idstr: 要绑定的单击相应函数的对象的id的属性值
          fun  事件回调函数，当单击元素时，该函数将会被触发

  function myclick(idstr,fun){
      var btn=document.getElementById(idstr);
      btn.onclick=fun
  }
  myclick("btn07",function(){
      // 获取id为bj的节点
      var bj=document.getElementById("bj");
      // 返回#bj的父节点
      var pn=bj.parentNode
  })

  
  // 获取前一个兄弟节点
   myclick("btn08",function(){
      // 获取id为bj的节点
      var um=document.getElementById("user");
      alert(um.value)
      // 返回#bj的父节点
      var pn=bj.preiousSibling
  })
       
   </script>
</body>
</html>

五仁卤鸡翅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
37、Dom查询

文章目录介绍DOM查询介绍本文是在学习JS所做的学习笔记，所有笔记内容请看：JS学习笔记DOM查询<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <ul id="inner"> <li id="bj"&gt
复制链接

扫一扫

专栏目录