javaScript之Dom获取集合元素对象-猿码集

1. 了解Dom

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

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

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


// 获取id为div1的元素对象
var div1 = document.getElementById("div1");

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


// 获取class为test的第一个元素
var ele = document.querySelector(".test");

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


// 获取所有h2元素对象
var h2Arr = document.getElementsByTagName("h2");
// 循环遍历h2元素
for(var i=0; i
    // 对h2元素进行操作
}

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


// 获取所有class为test的元素对象
var eleArr = document.getElementsByClassName("test");
// 循环遍历元素
for(var i=0; i
    // 对元素进行操作
}

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


// 获取所有class为test的元素对象
var eleArr = document.querySelectorAll(".test");
// 循环遍历元素
for(var i=0; i
    // 对元素进行操作
}

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

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

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

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