JavaScript入门级经典函数（一）元素查找函数

JavaScript经典入门（一）元素查找函数

---

前言

这里是万物之恋，一个不太积极的努力型选手，今天开始来分享以下自己的学习经历，主要是JavaScript中的一些经典函数（都是入门级别的，技术含量什么的，不存在的）。

---

使用前HTML部分的代码准备
这里使用div盒子来作为简单展示，记住为了实现查找，需要为其设置相应的id名和class类

	<div class="boxA" id="first">第一个模型，A类</div>
    <div class="boxB" id="second">第二个模型，B类</div>
    <div class="boxA" id="third">第三个模型，A类</div>
    <div class="boxB" id="forth">第四个模型，B类</div>

1.document.getElementById：通过id查找相应元素

代码如下（此部分应该在script标签中完成）：

document.getElementById("first");
document.getElementById("second");
document.getElementById("third");
document.getElementById("forth");

定义变量来查看下结果：

var firstBox = document.getElementById("first");
console.log(firstBox);
var secondBox = document.getElementById("second");
console.log(secondBox);
var thirdBox = document.getElementById("third");
console.log(thirdBox);
var forthBox = document.getElementById("forth");
console.log(forthBox);

在控制台查看输出结果（这里用的是Google Chrome）。

---

2.document.getElementsByClassName：通过类名查找元素

代码如下：

document.getElementsByClassName("boxA");
document.getElementsByClassName("boxB");

同样进行定义：

var boxOne=document.getElementsByClassName("boxA");
console.log(boxOne[0],boxOne[1])
var boxTwo=document.getElementsByClassName("boxB");
console.log(boxTwo[0],boxTwo[1])

在控制台查看输出结果：

通过类名查找元素的返回值属于伪数组，所以可以通过下标来定位

---

### 3.document.getElementsByTagName：通过标签名查找元素 代码如下：

document。getElementsByTagName（"div"）;

通过标签名查找返回值类型同样属于伪数组

var divTag=document.getElementsByTagName("div");
console.log(divTag[3],divTag[2],divTag[1],divTag[0]);

结果如图：

---

# 总结 ：“getElementsByClassName”和“getElementsByTagName”的返回值都属于伪数组，不能执行数组的大部分函数，但可以使用数组的个别特性，例如：下标，长度等；因此可以通过变量名[下标]的方式来定位相应元素。 今天的学习就到这里结束了，希望下次能和大家分享更多！