📜  使用类 javascript 获取元素的索引(1)

📅  最后修改于: 2023-12-03 15:06:58.030000             🧑  作者: Mango

在JavaScript中,可以使用 querySelectorAll 函数获取页面上特定元素的所有实例。使用 Array.prototype.indexOf() 函数可以在返回的节点列表中获取某个节点的索引值。

// 获取所有 p 元素
const paragraphs = document.querySelectorAll('p');

// 获取第一个 p 元素的索引
const firstParaIndex = Array.prototype.indexOf.call(paragraphs, paragraphs[0]);

考虑到某些不支持ES5特性的浏览器,我们也可以手动遍历节点列表并使用条件语句查找特定节点:

// 获取所有 p 元素
const paragraphs = document.getElementsByTagName('p');

// 查找包含文本 "Lorem ipsum" 的第一个 p 元素的索引
let firstParaIndex = -1;
for (let i = 0; i < paragraphs.length; ++i) {
  if (paragraphs[i].textContent === 'Lorem ipsum') {
    firstParaIndex = i;
    break;
  }
}
以上代码使用了两种不同的方式来获取某个元素的索引。第一种方式使用了 `Array.prototype.indexOf()` 函数,它需要指定所要查找的元素和数组,因此使用 `call()` 方法将 `paragraphs` 对象变为 `Array` 对象列执行函数。

第二种方式遍历了节点列表并逐个检查每个节点是否符合条件。虽然其写法比第一种方法复杂,但兼容性更好,适用于不支持 `Array.prototype.indexOf()` 函数的环境。

无论使用哪种方式,获取到的索引值都可以在需要时使用,例如高亮某个元素或者删除某个元素。