面试题：JavaScript中如何通过DOM操作获取页面中所有class为'test'的元素并修改其文本内容

JavaScript 代码

<!DOCTYPE html>
<html lang="en">

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

<body>
    <div class="test">Old Text 1</div>
    <div class="test">Old Text 2</div>
    <script>
        const elements = document.querySelectorAll('.test');
        elements.forEach(element => {
            element.textContent = 'New Text';
        });
    </script>
</body>

</html>

获取和修改过程中可能遇到的问题及解决方案

元素不存在
- 问题：页面中可能不存在class为test的元素，此时document.querySelectorAll('.test')会返回一个空的NodeList。如果后续代码假设一定有元素存在并进行操作，可能会导致错误。
- 解决方案：在对获取到的元素进行操作前，先检查NodeList的长度。例如：

const elements = document.querySelectorAll('.test');
if (elements.length > 0) {
    elements.forEach(element => {
        element.textContent = 'New Text';
    });
}

跨作用域问题
- 问题：如果在函数内部获取元素，并且函数的作用域和元素所在的作用域不同，可能会导致获取不到元素。例如在一个闭包函数中，如果没有正确处理作用域，document对象可能指向错误的上下文。
- 解决方案：确保document对象在正确的作用域中。如果是在闭包中，可以将document作为参数传递或者使用箭头函数（箭头函数不会创建自己的this，它会继承外层作用域的this，在这种情况下document也能正确访问）。
样式和布局影响
- 问题：修改文本内容后，可能会因为新文本长度等问题影响页面的样式和布局。
- 解决方案：在修改文本前，预估新文本的长度和可能对布局产生的影响。可以通过设置固定的宽度、高度，或者使用CSS的box-sizing等属性来控制元素的尺寸，避免布局混乱。同时，可以在修改文本后，通过重新计算和调整CSS属性来保证页面样式的一致性。
性能问题
- 问题：如果页面中有大量class为test的元素，一次性获取和修改可能会影响性能。
- 解决方案：可以采用分批处理的方式，例如将元素分成若干组，每次处理一组元素，减少一次性操作对性能的影响。也可以使用MutationObserver来监听元素的变化，而不是一次性获取和修改所有元素。

星途面试题库

面试题：JavaScript中如何通过DOM操作获取页面中所有class为'test'的元素并修改其文本内容

知识考点

面试题答案

JavaScript 代码

获取和修改过程中可能遇到的问题及解决方案