JavaScript onclick多函数调用：querySelector与getElementsByClassName最佳实践

1. 无需改用document.getElementsByClassName() #

你的场景里，页面只有一个.ourText元素，用document.querySelector('.ourText')直接就能拿到目标元素，操作起来更简洁。而document.getElementsByClassName('ourText')返回的是动态HTMLCollection类数组，必须通过索引（比如[0]）才能取到单个元素，反而多了一步冗余操作。所以当前用querySelector是更合适的选择。

2. .ourBox类的必要性判断 #

这个类留不留完全看你的实际需求：

• 如果后续要给这个div加专属样式、或者通过JS选中它做操作，那留着有用；
• 如果它只是单纯的包裹容器，没有任何样式或逻辑依赖，那确实可以删掉，简化HTML结构。

3. 常见DOM选择器的场景最佳实践 #

针对你提到的5种选择器，分场景总结：

• getElementById()：元素有唯一ID时优先用，性能最优，直接定位单个元素，适合精准获取特定元素的场景。
• querySelector()：需要用复杂CSS选择器（比如类、后代选择器、属性选择器）找单个元素时用，语法灵活，返回第一个匹配元素。
• querySelectorAll()：用复杂选择器批量获取元素时用，返回静态NodeList，适合批量操作多个元素。
• getElementsByClassName()：需要动态跟踪同class元素集合时用（页面动态增删同class元素，集合会自动更新），注意是类数组，需遍历或取索引操作。
• getElementsByTagName()：按标签名批量获取元素时用，返回动态HTMLCollection，适合操作同类型标签（比如所有<p>、<div>）。

额外代码优化建议 #

你当前用内联onclick绑定多个函数的写法，可维护性较差。最佳实践是把HTML结构和JS行为分离，改用事件监听绑定：

// 获取元素
const btn = document.querySelector('button');
const txt = document.querySelector('.ourText');

// 合并逻辑函数
function updateTextStyles() {
  txt.style.color = 'white';
  txt.style.backgroundColor = 'blue';
  txt.style.fontSize = '30px';
}

// 绑定点击事件
btn.addEventListener('click', updateTextStyles);

<div class="ourBox">
  <p class="ourText">This is a paragraph!</p>
  <button>Add More functions</button>
</div>

这样把逻辑集中在JS中，后续修改或扩展功能会更方便。

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