JS获取HTML DOM元素的几种方法

Posted 2021-03-02 zhouyuchen-827

目前我只知道下面这几种获取DOM元素的方法

• 根据ID获取元素     getElementById
  
  
• 根据标签名获取元素     getElementsByTagName
  
  
• 根据className获取标签列表     getElementsByClassName
  
  
• 根据选择器获取到第一个找到的元素     document.querySelector
  
  
• 根据选择器获取到所有的元素     document.querySelectorAll
  
  
• 　　还有两个特殊的获取标签方式：
  • • 获取html的方法　　document.documentElement
      　　（上面这个，单独用来获取html标签的）
      
    • 获取body的方法　　document.body
      　　（上面这个是单独用来获取body标签的）
      
      

　　第一种，根据ID获取元素

　　　　　　document.getElementById("id")

　　　　　　里面的id，就是你想要获取的那个标签的id名，只能是字符类型的。
　　　　　　如果没有找到，返回的就是null

　　第二种，根据标签名获取元素

　　　　　　div = document.getElementsByTagName("div")

　　　　　　括号里面只能填写标签名，前面的div是自己定义的名字，你甚至可以叫zhongyiwjw，一样的。
　　　　　　getElementsByTagName这个方法除了可以使用document以外，还可以使用元素调用
　　　　　　如果使用元素调用，就是指当前这个元素的子元素中的标签名是div的

　　第三种，根据className获取标签列表

　　　　　　var div0=diva.getElementsByClassName("div0");

　　　　　　可以根据元素获取子元素中class是div0的所有元素

　　第四种，根据选择器获取到第一个找到的元素

　　　　　　var div0=document.querySelector("div")

　　　　　　根据选择器获取到第一个div元素，只能找到第一个噢。它甚至可以这样写

　　　　　　　　　　var div0=document.querySelector("#diva>.div0")

　　　　　　　　　　找到的是id名为diva的下面的class名为div0的第一个元素
　　　　

　　第五种，根据选择器获取到所有的元素

　　　　　var div0=document.querySelectorAll("div")

　　　　　　　　根据选择器，选择到所有的div