js中怎么批量获取id数据

原创

admin 13小时前阅读数 4 #Javascript

文章标签 Javascript

JS中批量获取ID数据的技巧

在Javascript中，我们常常需要采取元素的ID来获取对应的DOM元素或者数据。当我们需要获取多个具有特定规律的ID元素或数据时，可以使用一些明了的技巧来实现批量获取。以下将介绍几种常用的方法。

使用querySelectorAll和getAttribute方法

如果你的HTML文档中有多个具有相同类名或者属性，并且它们的ID是唯一的，你可以使用querySelectorAll方法选取所有匹配的元素，然后遍历这些元素，通过getAttribute方法获取它们的ID。


// 假设我们有以下HTML结构：
// <div class="item" id="item1">内容1</div>
// <div class="item" id="item2">内容2</div>
// <div class="item" id="item3">内容3</div>
// 获取所有类名为item的元素
var items = document.querySelectorAll('.item');
// 存储所有ID的数组
var ids = [];
// 遍历获取ID
items.forEach(function(item) {
  ids.push(item.getAttribute('id'));
});
// 输出获取到的ID数组
console.log(ids); // ["item1", "item2", "item3"]

利用ID的规律进行循环获取

如果ID有一定的规律，比如以数字递增的形式，你可以直接利用Javascript的循环结构来构建ID列表，然后使用document.getElementById或document.querySelector来获取对应的DOM元素。


// 假设ID的规律是从"item1"递增到"itemN"
// 设置起始和终止ID
var startId = 1;
var endId = 3;
// 存储所有ID对应元素的对象
var elements = {};
// 循环获取元素
for (var i = startId; i <= endId; i++) {
  var id = 'item' + i;
  elements[id] = document.getElementById(id);
}
// 输出获取到的元素对象
console.log(elements); // {item1: div#item1, item2: div#item2, item3: div#item3}

使用document.getElementById的数组语法

虽然getElementById通常只用于获取单个元素，但你可以传递一个包含ID的数组，然后通过循环尝试获取元素。


// 假设有一个ID数组
var ids = ['item1', 'item2', 'item3'];
// 存储获取到的元素
var elements = {};
// 循环获取
ids.forEach(function(id) {
  elements[id] = document.getElementById(id);
});
// 输出因此
console.log(elements); // {item1: div#item1, item2: div#item2, item3: div#item3}