码迷,mamicode.com
首页 > Web开发 > 详细

JS获取HTML DOM元素的方法

时间:2020-04-06 20:33:43      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:兄弟节点   elements   style   var   document   lin   sel   nod   child   

在JS中获取元素的方法有很多,可以根据实际需要选择合适的方法

一、JS获取元素的方法

     1)根据id获取标签元素
            var div1=document.getElementById("div1");

        2)根据标签名获取标签列表
               var divs=document.getElementsByTagName("div")
        
        3)根据className获取标签列表
            var div0=document.getElementsByClassName("div0");
        console.log(div0)

        4)获取id必须使用document调用getElementById
            var diva=document.getElementById("diva");
            var div1=diva.getElementById("div1")//错误写法,
            
        5)下面两个方法获取的都是HTMLCollection HTML列表,getElementByTagNames这个方法处理可以使用document以外,还可以使用元素调用,如果使用元素调用,就是指当前这个元素的子元素的中的标签名是div的
          var diva=document.getElementById("diva");
          var divs=diva.getElementsByTagName("div");
          var divs=document.getElementsByTagName("div");//这个比上面多
          console.log(divs)

        6) 可以根据元素获取子元素中class是div0的所有元素,如果可以使用document.getElementsByClassName就是获取整个文档中class是div0的
            var diva=document.getElementById("diva");
            var div0=diva.getElementsByClassName("div0");
            console.log(div0)

        7)根据name获取节点列表,NodeList节点列表,getElementByName不可以通过父元素获取
            var form1=document.getElementById("form1");
            var sex=document.getElementsByName("sex");
            console.log(sex)

以下方法适用于IE8以下

        8)根据选择器获取到第一个找到的元素
            var div=document.querySelector("div");//根据选择器获取到所有的div
            var div1=document.querySelector("#div1");
            var div0=document.querySelector(".div0");
            var div0=document.querySelector("#diva>.div0");
            var ps=document.querySelector("[name=password]")
            console.log(ps)

二、获取子元素和子节点

      9)子节点和子元素
        var diva=document.querySelector("#diva");
        console.log(diva.childNodes);//子节点,是NodeList,包含文本节点,注释节点等等
        console.log(diva.children);//子元素 是HTMLCollection,只包含元素

      10)父节点和父元素
        console.log(diva.parentNode);//父节点
        console.log(diva.parentElement)//父元素
    
      11)第一个子节点和第一个子元素
        console.log(diva.firstChild);//第一个子节点
        console.log(diva.firstElementChild);//第一个子元素

      12)最后一个子节点和最后一个子元素
        console.log(diva.lastChild);//最后一个子节点
        console.log(diva.lastElementChild);//最后一个子元素

      13)下一个兄弟节点和下一个兄弟元素
        console.log(diva.nextSibling);//下一个兄弟节点
        console.log(diva.nextElementSibling);//下一个兄弟元素

      14)上一个兄弟节点和上一个兄弟元素
        console.log(diva.previousSibling);//上一个兄弟节点
        console.log(diva.previousElementSibling);//上一个兄弟元素

 

JS获取HTML DOM元素的方法

标签:兄弟节点   elements   style   var   document   lin   sel   nod   child   

原文地址:https://www.cnblogs.com/shewill/p/12643833.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!