javaScript之Dom获取集合元素对象

1. 了解Dom

在JavaScript中,DOM(文档对象模型)是指一种表示文档的方式。在网页中,文档的根节点就是document对象。通过JavaScript可以操作和修改document对象,从而实现对网页的动态更新和交互功能。

其中,获取DOM节点的能力是基础中的基础,也是js的核心能力之一。

2. 获取单个元素对象

2.1 getElementById()

该方法可以通过元素的id属性值获取对应的元素对象。返回值为一个对象,表示文档中的唯一元素。若元素不存在,则返回null。

// 获取id为div1的元素对象

var div1 = document.getElementById("div1");

2.2 querySelector()

该方法可以接收一个CSS选择器。返回值为第一个匹配该选择器的元素对象,若没有匹配的元素则返回null。

// 获取class为test的第一个元素

var ele = document.querySelector(".test");

3. 获取元素集合对象

3.1 getElementsByTagName()

该方法可以通过标签名获取元素集合。返回值为一个类数组对象,可以使用索引值来访问对象中的每一个元素对象。

// 获取所有h2元素对象

var h2Arr = document.getElementsByTagName("h2");

// 循环遍历h2元素

for(var i=0; i

// 对h2元素进行操作

}

3.2 getElementsByClassName()

该方法可以通过样式类名获取元素集合。返回值为一个类数组对象,可以使用索引值来访问对象中的每一个元素对象。

// 获取所有class为test的元素对象

var eleArr = document.getElementsByClassName("test");

// 循环遍历元素

for(var i=0; i

// 对元素进行操作

}

3.3 querySelectorAll()

该方法可以接收一个CSS选择器。返回值为一个类数组对象,可以使用索引值来访问对象中的每一个元素对象。选择器中的所有匹配元素都会被返回,顺序为它们在DOM结构中出现的顺序。

// 获取所有class为test的元素对象

var eleArr = document.querySelectorAll(".test");

// 循环遍历元素

for(var i=0; i

// 对元素进行操作

}

4. Dom集合元素对象的特点

获取元素集合对象相比单个元素,具有以下特点:

返回的是类数组对象,需要通过索引值来访问每一个元素对象

元素对象是实时的,当DOM结构发生改变时,集合元素对象会自动更新

5. 小结

通过以上介绍,我们了解到了获取Dom元素集合对象的三种方式:getElementsByTagName()、getElementsByClassName()、querySelectorAll()。同时,我们也知道了这些集合元素对象有许多特点,需要我们在开发过程中注意。