如何使用JavaScript遍历并获取innerText值最高的DOM元素？

示例HTML结构 #

<div class="score">1</div>
<div class="score">0</div>
<div class="score">4</div>
<div class="score">0</div>
<div class="score">2</div>

实现方法 #

方法一：循环遍历对比

通过获取目标元素集合，逐个遍历并记录数值最大的元素：

// 获取所有class为score的DOM元素
const scoreElements = document.querySelectorAll('.score');
let maxScore = -Infinity;
let maxElement = null;

scoreElements.forEach(element => {
  // 去除文本空格并转为整数，处理非数字情况
  const currentScore = parseInt(element.innerText.trim(), 10);
  if (!isNaN(currentScore) && currentScore > maxScore) {
    maxScore = currentScore;
    maxElement = element;
  }
});

// 输出结果
console.log('数值最高的元素:', maxElement);
console.log('对应数值:', maxScore);

方法二：使用数组reduce方法

将DOM元素集合转为数组后，用reduce方法直接筛选出最大值对应的元素：

const scoreElements = document.querySelectorAll('.score');

// 处理空集合的情况
if (scoreElements.length === 0) {
  console.log('没有找到目标元素');
} else {
  const maxElement = Array.from(scoreElements).reduce((prevEl, currEl) => {
    const prevScore = parseInt(prevEl.innerText.trim(), 10) || 0;
    const currScore = parseInt(currEl.innerText.trim(), 10) || 0;
    return currScore > prevScore ? currEl : prevEl;
  });

  console.log('数值最高的元素:', maxElement);
  console.log('对应数值:', parseInt(maxElement.innerText.trim(), 10));
}

注意事项 #

• 用trim()处理文本中的空格，避免转换数字出错
• 用isNaN()判断转换结果是否为有效数字，防止非数字文本导致逻辑异常
• 如果目标元素集合为空，要额外处理避免报错

内容的提问来源于stack exchange，提问作者yocnat