最详细通过DOM获取元素的方法
上一篇你博文中我们简单的介绍了什么DOM，DOM可以做什么。其中最基本的就是如何通过DOM来获取HTML文档中的元素。这篇文章我们来详细聊一下如何通过DOM获取HTML文档中的元素。
获取HTML文档中的元素从大的方面来区分主要分为两类：
通过元素的标签名，id名等获取。
通过选择器的方法获取
HTML代码：
<ul><liclass="item">列表01</li><liclass="item">列表02</li><li>列表03</li><li>列表04</li></ul><pclass="text">这是一个段落</p><formaction=""><inputtype="radio"name="sex">男 <br>通过 <inputtype="radio"name="sex">女 </form>
1.通过标签名获取元素
// 通过标签名获取元素 获取到的是一个集合varaLi=document.getElementsByTagName("li"); console.log(aLi);//HTMLCollection(4) [li, li, li, li]// 打印 li 的内容for(vari=0;i<aLi.length;i++){ console.log(aLi[i].innerText); } aLi[0].onclick=function(){ alert(this.innerText); } varaText=document.getElementsByTagName("p"); console.log(aText);//HTMLCollection [p]aText[0].onclick=function(){ alert(this.innerText); } // HTMLCollection:不是一个数组 集合 // 无法使用的数组方法：valueOf() pop() push() jion()
2.通过class名获取元素
// 通过class名获取元素 集合varaItem=document.getElementsByClassName("item"); console.log(aItem);//HTMLCollection(2) [li.item, li.item]aItem[0].onmouseover=function(){ alert(this.innerText); } varaText1=document.getElementsByClassName("text"); console.log(aText1);//HTMLCollection [p.text]varoText1=document.getElementsByClassName("text")[0]; console.log(oText1);//<p class="text">这是一个段落</p>
3.通过name属性 获取元素
// 通过name属性 获取元素 主要针对form表单 NodeListvaraRadio=document.getElementsByName("sex"); console.log(aRadio);//NodeList(2) [input, input]aRadio[0].onchange=function(){ alert(this.value); }
4.通过id名获取元素
// 通过 id 获取元素varoHeader=document.getElementById("header"); console.log(oHeader);//<h1 id="header">通过DOM获取元素</h1>
5.通过选择器获取元素
// 获取元素 选择器 只获取第一个元素varoText2=document.querySelector(".text"); console.log(oText2); varoHeader1=document.querySelector("#header"); console.log(oHeader1); varoLi1=document.querySelector("li"); console.log(oLi1); // 获取所有 varaLi1=document.querySelectorAll("li"); console.log(aLi1);//NodeList(4) [li.item, li.item, li, li]varaText3=document.querySelectorAll(".text"); console.log(aText3);//NodeList [p.text]
