JS获取HTML DOM元素的方法
Posted she_will
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS获取HTML DOM元素的方法相关的知识,希望对你有一定的参考价值。
在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元素的方法的主要内容,如果未能解决你的问题,请参考以下文章