JS获取DOM和几种方法
- 通过ID获取(getElementById)
- 通过name属性(getElementsByName)
- 通过标签名(getElementsByTagName)
- 通过类名(getElementsByClassName)
- 获取html的方法(document.documentElement)
- 获取body的方法(document.body)
- 通过选择器获取一个元素(querySelector)
- 通过选择器获取一组元素(querySelectorAll)
下面依次讲解:
1.通过ID获取(getElementById)
<div id="id1"></div>
<script>
let box= document.getElementById("id1");
</script>
上下文必须是document。
必须传参数,参数是string类型,是获取元素的id。
返回值只获取到一个元素,没有找到返回null。
2.通过name属性(getElementsByName)
<div id="box">
<input type="text" name="user" />
</div>
<script>
let userInput= document.getElementsByName("user");
</script>
只有含有name属性的元素(表单元素)才能通过name属性获取
上下文必须是document。
必须传参数,参数是是获取元素的name属性。
返回值是一个类数组,没有找到返回空数组
3.通过标签名(getElementsByTagName)
<div id="box">
<p>段落A</p>
<p>段落B</p>
<p>段落C</p>
<p>段落D</p>
<p>段落E</p>
<p>段落F</p>
</div>
<script>
let pCollection= document.getElementsByTagName("p");
</script>
该方法返回的也是一个集合。
4.通过类名(getElementsByClassName)
<div class="box">
</div>
<div class="box">
</div>
<script>
let boxCollection= document.getElementsByClassName("box");
let box1 = boxList[0];
let box2 = boxList[1];
</script>
getElementsByClassName()括号中的不需要在前面加 “.” ,因为方法就决定了括号中的值是一个元素的class值。该方法返回一个集合。不能直接给集合绑定事件,需要获取到集合中的某一个元素,然后再为元素绑定事件
IE8以及以前版本不兼容
5.获取html的方法(document.documentElement)
document.documentElement是专门获取html这个标签的。
6.获取body的方法(document.body)
document.body是专门获取body这个标签的。
7.通过选择器获取一个元素(querySelector)
<div id="id1"></div>
<script>
let box= document.querySelector("#id1");
</script>
querySelector()方法括号中的值是元素的选择器,所以前面加了”#”符号,使用的是id选择器。此方法直接返回DOM对象本身
不兼容IE7以及以前版本
8.通过选择器获取一组元素(querySelectorAll)
<div class="box">boxA</div>
<div class="box">boxB</div>
<div class="box">boxC</div>
<div class="box">boxD</div>
<div class="box">boxE</div>
<script>
let box1= document.querySelector(".box");
let boxes= document.querySelectorAll(".box");
</script>
不兼容IE7
querySelector()和querySelectorAll()方法括号中的取值都是选择器。
当有多个class相同的元素时,使用querySelector()方法只能获取到第一个class为box的元素,而querySelectorAll()获取到了所有class为box的元素集合。
DOM元素的继承关系
HTMLDivElement > HTMLElement > Element > Node > EventTarget
HTMLDocument > Document > Node > EventTarget
他们相同的继承关系是Node和EventTarget,也就是说他们都可以使用Node和EventTarget上的方法。
如Node上的nodeName、parentNode等,和EventTarget上的addEventListener等。
getElementById只在Document类的原型上,HTMLDivElement 没有继承Document类,所以div不能使用getElementById方法。
getElementsByTagName即在Document类的原型上也在Element类的原型上,所以div和document都可以使用getElementsByTagName方法。
其它同理。
总结:
所有获取DOM对象的方法中,只有getElementById()和querySelector()这两个方法直接返回的DOM对象本身,可直接为其绑定事件。
getElementXXX类型的方法,除了通过Id获取元素,其他都返回一个集合,如果需要取到具体的DOM元素,需要加索引,如:document.getElementsByClassName(“box”)[0] =>获取class为box的所有元素中的第一个DOM元素。
querySelector()与querySelectorAll()两者的联系与区别:
联系: 两者括号中的取值都是选择器
区别: 当有多个class相同的元素时,使用querySelector()方法只能获取到第一个class为box的元素,而querySelectorAll()获取到了所有class为box的元素集合。
转载于:https://blog.51cto.com/445153/2312974