Javascript - 这种调用元素的方法是不好的做法？

Question

对于模糊的标题感到抱歉，无法弄清楚如何描述它。

所以每次我都没有使用getElementBy ......

 function tagId(bar) {
        var selectId = document.getElementById(bar);
        return selectId;
 }

 function tagClass(bar) {
        var selectClass = document.getElementsByClassName(bar);
        return selectClass;
 }

tagId('idname').style.background = "blue";

它有效，但调用具有类似函数的元素而不仅仅使用变量是常规吗？或者它会在以后引起错误吗？

Answer 1

由于JS的详细方法名称，创建更短的辅助函数是相当常见的。

要记住的一件事是，getElementsByClassName调用假定它始终会从document调用，当它也可以从其他元素调用时。

function tagClass(context, cls) {
    if (arguments.length === 1) {
      cls = context;
      context = document;
    }
    return context.getElementsByClassName(cls);
}

此版本允许您选择将上下文节点传递给第一个参数。

当然，您始终可以使用querySelector和querySelectorAll代替其他各种方法。它们可以取代以下所有内容：

• 的getElementById
• getElementsByName
• 的getElementsByTagName
• getElementsByClassName方法

除了提供更细粒度的DOM查询功能外。基本上，您可以使用查询选择器方法完成与CSS相同的操作。

正如下面评论中RobG所述，一个重要的区别是querySelectorAll没有返回实时列表（更新其成员的集合，因为匹配元素被添加到DOM中以及从DOM中删除）。