javascript获取元素的方法

原生js获取DOM对象的几种方法

原生JS获取DOM对象的方法

a、通过id获取

<div id="box1"></div>
<script>
	var box = document.getELementById('box1');//document.getELementById()括号里面不需要加上“#”，因为该方法已经决定里面的值是一个元素id值。且该方法返回一个DOM对象
</script>

b、通过class获取

<div class="box2"></div>
<script>
	var box = document.getElementsByClassName('box2');//document.getElementsByClassName()括号里面不需要加上“.”，因为该方法就决定了括号中的值是一个class。该方法返回一个集合。
</script>

不能给集合直接绑定事件，需要获取到其中的某一个元素，再为它绑定事件。

c、通过标签名获取

<div id="box3">
  <p>
    您好，标签名1
  </p>
  <p>
    您好，标签名2
  </p>
  <p>
    您好，标签名3
  </p>
</div>
<script>
	var pCollection = document.getElementsByTagName('p');
</script>

该方法返回的是一个集合。

d、通过name属性获取

<div id="box3">
  <input type="text" name = "user"/>
</div>
<script>
var InputName = getElement.getElementsByName('user');
</script>

只有含有name属性的元素（表单元素），才能通过name属性获取。

e、通过querySelector获取

<div id="box4"></div>
<script>
	var querS = document.querySelector('#box4');
</script>

document.querySelector()中的值是元素选择器，所以加上“#”，使用的是id选择器。此方法直接返回DOM对象本身

f、通过querySelectorAll获取

<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
<script>
    let box1= document.querySelector(".box");
    let boxes= document.querySelectorAll(".box");
</script>

querySelector和querySelectorAll方法括号中取值都是选择器。但两者返回的结果是有区别的。当有多个class相同的元素，querySelector只会返回第一个class为box的对象。querySelectorAll获取到所以class为box的集合。

总结如下：

1、所有获取DOM对象的方法中，只有getElementById()和querySelector()这两个方法直接返回的DOM对象本身，可直接为其绑定事件。

2、getElementXXX类型的方法，除了通过Id获取元素，其他都返回一个集合，如果需要取到具体的DOM元素，需要加索引，如：document.getElementsByClassName(“box”)[0] =>获取class为box的所有元素中的第一个DOM元素。

3、querySelector()与querySelectorAll()两者的联系与区别：

联系： 两者括号中的取值都是选择器 
区别： 当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class为box的元素，而querySelectorAll()获取到了所有class为box的元素集合。