按类获取元素：JavaScript 中 getElementById 的替代方法
在 Web 开发领域，getElementById 方法一出现就占据了至高无上的地位访问 HTML 文档中的特定元素。然而，在某些情况下，利用 getElementByClass 可能更合适。
随着 Firefox 和 Chrome 等现代浏览器的出现，getElementByClass 已成为本机支持的功能。然而，对于像 Internet Explorer 这样的浏览器，需要一种解决方法来模拟其功能。
创建自定义 getElementsByClass 函数
著名 JavaScript 专家达斯汀·迪亚兹 (Dustin Diaz) 设计了一个巧妙的解决方案来解决缺乏本机 getElementByClass 支持的问题。他的方法涉及创建一个模仿其行为的自定义函数：
<code class="javascript">function getElementsByClassName(node, classname) {
if (node.getElementsByClassName) { // use native implementation if available
return node.getElementsByClassName(classname);
} else {
return (function getElementsByClass(searchClass, node) {
if ( node == null )
node = document;
var classElements = [],
els = node.getElementsByTagName("*"),
elsLen = els.length,
pattern = new RegExp("(^|\s)"+searchClass+"(\s|$)"), i, j;
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
})(classname, node);
}
}</code>将函数与切换脚本集成
将此自定义函数与提供的切换无缝集成脚本，只需将 getElementById 调用替换为 getElementsByClassName，如图所示下面：
<code class="javascript">function toggle_visibility(className) {
var elements = getElementsByClassName(document, className),
n = elements.length;
for (var i = 0; i < n; i++) {
var e = elements[i];
if(e.style.display == 'block') {
e.style.display = 'none';
} else {
e.style.display = 'block';
}
}
}</code>结论
通过实现此自定义 getElementsByClass 函数，您可以利用 class 属性来切换元素的可见性，即使本机支持 getElementByClass缺乏。该解决方案使开发人员能够利用基于类的元素识别的优势，确保不同浏览器之间的行为一致。
以上是为什么在 JavaScript 中选择 `getElementsByClassName` 而不是 `getElementById`？的详细内容。更多信息请关注PHP中文网其他相关文章！
