JS之元素获取方法
推荐
在线提问>>
我们在写CSS的时候，可以通过选择器去获取元素并设置各种样式，那么JS中怎么去获取到所需要操作的元素呢? 在JS中Document对象为我们提供了几个常用的方法来获取元素，接下来就让我们去看一看吧。
1. getElementsByClassName(类名)
使用 document.getElementsByClassName()方法,可以通过类名去获取元素，参数就是我们想要去获取元素的类名。 例如：
<div class="box">
你好，欢迎进入到JS的学习！
</div>
var oBox = document.getElementsByClassName("box")
console.log(oBox)
但是在输出显示的时候我们就会发现有问题啦，我们输出的并不是当前选中元素，如下图：
这时我们发现oBox所获得的是一个伪数组，不管页面具有这个类名的元素有多少个，获取到的永远是伪数组，想要去获取到某一个具体的元素， 可以通过下标来操作，将前面的代码进行简单的改动，如下：
var oBox = document.getElementsByClassName("box")
console.log(oBox[0])
改动以后的我们就可以获取到想要的具体元素了
有没有感觉到很简单呀，赶着步伐我们再来看看下一个方法吧。
2. getElementsByTagName(标签名)
使用 document.getElementsByTagName()方法，可以通过标签名去获取元素，参数就是我们想要去获取元素的标签名。 例如：
<div>
你好，欢迎进入到JS的学习！
</div>
<p>
你好，欢迎进入到JS的学习！
</p>
var oDiv = document.getElementsByTagName("div")
console.log(oDiv[0])
和前面的oBox相同，oDiv获得的也是一个伪数组，想要去获取到某一个具体的元素，可以通过下标来操作，获得的结果如下图：
这就是我们的getElementsByTagName()方法的使用方式啦。
3. getElementById(ID)
通过ID名去获取元素，使用 document.getElementById()方法,参数就是我们想要去获取元素的ID名。 例如：
<div>
你好，欢迎进入到JS的学习！
</div>
<p id="box">
你好，欢迎进入到JS的学习！
</p>
var oId = document.getElementById("box")
console.log(oId)
大家有没有发现，在获取ID时，我并没有用到下标呀，和前面的两个方法不同的是，getElementById()获得的只会是单个数据，不是伪数组，因为每个页面的ID通常都是独一无二的，所以这里获取到的就是一个具有 ‘box’ ID 名的标签，获得的结果如下图：
以上就是我们获取元素的几个小方法啦，但是要注意一个小问题哦，这三个方法是有顺序要求的，若放在元素之前则找不到指定数据，getElementById()会返回null，getElementsByTagName()和getElementsByClassName()会返回undefined，所以大家在用这三个方法时一定要注意顺序哦。 那今天就先简单的讲到这里咯，我们下次在捋新的知识点啦。
