如何通过 id 检查我的 DOM 是否已包含元素？答案

【问题标题】：How can i check if my DOM already contains an element by id?如何通过 id 检查我的 DOM 是否已包含元素？
【发布时间】：2013-05-08 23:39:40
【问题描述】：

我想知道是否可以检查我的 DOM 是否包含元素 ID。实际上我动态加载我的模板（剑道模板）并将它们附加到我的身体中。

<body>
    ...

    <script type="text/x-kendo-template" id="test-view">
        ...
    </script>
</body>

此时我的加载脚本是

//Creates a gloabl object called templateLoader with a single method "loadExtTemplate"
var templateLoader = (function ($, host) {
    //Loads external templates from path and injects in to page DOM
    return {
        //Method: loadExtTemplate
        //Params: (string) path: the relative path to a file that contains template definition(s)
        loadExtTemplate: function (path) {
            //Use jQuery Ajax to fetch the template file
            var tmplLoader = $.get(path)
                .success(function (result) {
                    //On success, Add templates to DOM (assumes file only has template definitions)
                    var regSplit = new RegExp("[/\]+", "g");
                    var pathTab = path.split(regSplit);
                    var templateName = pathTab[pathTab.length - 1];
                    var regReplace = new RegExp("[.]+", "g");
                    var templateName = templateName.replace(regReplace, "-");
                    var s = $("<script type=\"text/x-kendo-template\" id=\"" + templateName + "\">" + result + "</script>");
                    $("body").append(s);
                })
                .error(function (result) {
                    alert("Error Loading Templates -- TODO: Better Error Handling");
                })

            tmplLoader.complete(function () {
                //Publish an event that indicates when a template is done loading
                $(host).trigger("TEMPLATE_LOADED", [path]);
            });
        }
    };
})(jQuery, document);

在加载我的模板之前，我需要检查这个模板是否已经加载。我需要检查 id="test-view" 的脚本是否存在。我该怎么做？

【问题讨论】：

为什么不直接通过 jQuery 或document.getElementById()寻找元素？？？
因为我是 JS 的菜鸟，但我仍然发现 jQuery。我在这里问问题之前尝试了文档。

标签： javascript jquery dom kendo-ui

【解决方案1】：

var element = $('#' + templateName)
if(!element.length) {
   // create your template
}

【讨论】：

!element 将始终为 false，因为它是一个 jQuery 包装的对象。
啊，实际上，是的。 element.length 更合适。已更新。
if(!element.length) 将评估为 true，即使该元素未定义。 !0 == true
这里的关键是您如何检查元素长度。 if(ele2.length)。请注意缺少!，这会反转条件。
不想在这里争论，但你确定吗？看这里jsfiddle.net/hr6fV/1

【解决方案2】：

我建议添加

if(document.getElementById(templateName)) return;

之后

var templateName = templateName.replace(regReplace, "-");

所以你的代码变成了：

.success(function (result) {
    //On success, Add templates to DOM (assumes file only has template definitions)
    var regSplit = new RegExp("[/\]+", "g");
    var pathTab = path.split(regSplit);
    var templateName = pathTab[pathTab.length - 1];
    var regReplace = new RegExp("[.]+", "g");
    var templateName = templateName.replace(regReplace, "-");
    if(document.getElementById(templateName)) return;
    var s = $("<script type=\"text/x-kendo-template\" id=\"" + templateName + "\">" + result + "</script>");
    $("body").append(s);
})

【讨论】：

【解决方案3】：

var elementExists = (document.getElementById("elementId") !== null);

elementExists 现在将包含一个布尔值，告诉您该元素是否已经存在。

【讨论】：

@Matt 你能解释一下为什么吗？
马特，你是对的。我假设如果找不到元素，它会返回undefined。相反，它返回null。编辑修复。
@B413 typeof document.getElementById("elementId") 总是返回object，因为即使null 也是一个对象。
...这就是为什么我们有抽象比较运算符（和!）。

【解决方案4】：

您可以使用长度或大小来做到这一点：

例如，

$("#test-view").length //$("#test-view").size()

【讨论】：

我很确定我们已经有了这个答案，而且还有一个更好的版本。
你指的是 $("#test-view").size()
我指的是您的答案与 Chris Dixon 的相似，但没有那么好。
这小提琴不是解决了这个问题吗？想知道在寻找什么？ jsfiddle.net/9R9FW

【解决方案5】：

使用 jQuery：

if ($("#test-view").length) {...}

纯 JavaScript：

if (document.querySelectorAll("#test-view").length) {...}

还有几个cmets：

[html4] id 不是脚本标签的常规属性（但 AFAIK 所有浏览器都支持）
上面的代码适用于任何选择器，而不仅仅是 ids
IE7 不支持 querySelectorAll

【讨论】：