最详细通过DOM获取元素的方法

柔情只为你懂 2023-02-13 08:18 29阅读 0赞

## 最详细通过DOM获取元素的方法 ##

上一篇你博文中我们简单的介绍了什么DOM，DOM可以做什么。其中最基本的就是如何通过DOM来获取HTML文档中的元素。这篇文章我们来详细聊一下如何通过DOM获取HTML文档中的元素。  
获取HTML文档中的元素从大的方面来区分主要分为两类：

*  通过元素的标签名，id名等获取。
 *  通过选择器的方法获取

**HTML代码：**

<ul>
            <li class="item">列表01</li>
            <li class="item">列表02</li>
            <li>列表03</li>
            <li>列表04</li>
        </ul>
        <p class="text">这是一个段落</p>
        <form action="">
            <input type="radio" name="sex">男 
            <br>通过
            <input type="radio" name="sex">女
        </form>

#### 1.通过标签名获取元素 ####

// 通过标签名获取元素 获取到的是一个集合
        var aLi=document.getElementsByTagName("li");
        console.log(aLi);//HTMLCollection(4) [li, li, li, li]
        // 打印 li 的内容
        for(var i=0;i<aLi.length;i++){ 
            console.log(aLi[i].innerText);
        }
        aLi[0].onclick=function(){ 
            alert(this.innerText);
        }
        var aText=document.getElementsByTagName("p");
        console.log(aText);//HTMLCollection [p]
        aText[0].onclick=function(){ 
            alert(this.innerText);
        }
        
        // HTMLCollection:不是一个数组 集合 
        // 无法使用的数组方法：valueOf() pop() push() jion()

#### 2.通过class名获取元素 ####

// 通过class名获取元素 集合
        var aItem=document.getElementsByClassName("item");
        console.log(aItem);//HTMLCollection(2) [li.item, li.item]
        aItem[0].onmouseover=function(){ 
            alert(this.innerText);
        }
        var aText1=document.getElementsByClassName("text");
        console.log(aText1);//HTMLCollection [p.text]
        var oText1=document.getElementsByClassName("text")[0];
        console.log(oText1);//<p class="text">这是一个段落</p>

#### 3.通过name属性 获取元素 ####

// 通过name属性 获取元素 主要针对form表单 NodeList
        var aRadio=document.getElementsByName("sex");
        console.log(aRadio);//NodeList(2) [input, input]
        aRadio[0].onchange=function(){ 
            alert(this.value);
        }

#### 4.通过id名获取元素 ####

// 通过 id 获取元素
        var oHeader=document.getElementById("header");
        console.log(oHeader);//<h1 id="header">通过DOM获取元素</h1>

#### 5.通过选择器获取元素 ####

// 获取元素 选择器 只获取第一个元素
        var oText2=document.querySelector(".text");
        console.log(oText2);
        var oHeader1=document.querySelector("#header");
        console.log(oHeader1);
        var oLi1=document.querySelector("li");
        console.log(oLi1);
    
        // 获取所有 
        var aLi1=document.querySelectorAll("li");
        console.log(aLi1);//NodeList(4) [li.item, li.item, li, li]
        var aText3=document.querySelectorAll(".text");
        console.log(aText3);//NodeList [p.text]

**注意**：获取到的元素可以是HTML集合，也可以时NodeList,都类似于数组，可以使用数组的length属性和大多数方法。

**视频讲解链接：  
https://www.bilibili.com/video/BV14i4y1s7ez/**