MST

星途 面试题库

面试题：JavaScript如何高效地批量操作多个DOM元素的属性

假设有一个包含多个 <li> 元素的无序列表，其id为 'list'。要求你编写JavaScript代码，为列表中所有偶数索引位置的 <li> 元素添加一个 'highlight' 的class，并同时修改它们的文本颜色为红色，需要考虑性能优化，避免频繁的重排和重绘。
17.7万 热度难度
编程语言JavaScript

知识考点

AI 面试

面试题答案

一键面试
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <ul id="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
    </ul>
    <script>
        const list = document.getElementById('list');
        const lis = list.getElementsByTagName('li');
        const fragment = document.createDocumentFragment();
        for (let i = 0; i < lis.length; i++) {
            if (i % 2 === 0) {
                const li = lis[i].cloneNode(true);
                li.classList.add('highlight');
                li.style.color ='red';
                fragment.appendChild(li);
            } else {
                fragment.appendChild(lis[i]);
            }
        }
        list.innerHTML = '';
        list.appendChild(fragment);
    </script>
    <style>
      .highlight {
            /* 可添加其他样式 */
        }
    </style>
</body>

</html>
  1. 获取列表元素：使用getElementById获取id为list的无序列表。
  2. 获取所有<li>元素：通过列表元素的getElementsByTagName方法获取所有的<li>元素。
  3. 创建文档片段：使用createDocumentFragment创建一个文档片段，在文档片段上进行操作可以避免频繁的重排和重绘。
  4. 遍历<li>元素：
    • 对于偶数索引位置的<li>元素，克隆该元素，为克隆元素添加highlight类并修改文本颜色为红色，然后添加到文档片段。
    • 对于奇数索引位置的<li>元素，直接添加到文档片段。
  5. 更新列表：清空原列表内容，将文档片段添加到原列表中。