如果（document.getElementById（'something'）！= null）与if（document.getElementById（'something'））相同吗？

Question

如果（document.getElementById（'something'）！= null）与if（document.getElementById（'something'））相同吗？

javascriptjquerydom

34

当我想要检查页面上是否存在一个元素时，这两种检查方式是相同的吗？有没有更好、更紧凑的方法来检查元素的存在？

如果我想要检查value == ''，这也可以包含在这个检查中吗？

- Malik Daud Ahmad Khokhar

7个回答

23

更好的做法（尽管冗长）是使用：

var element = document.getElementById('something');
if (element != null && element.value == '') {
}

请注意，我答案的第一个版本是错误的：

var element = document.getElementById('something');
if (typeof element !== "undefined" && element.value == '') {
}

因为getElementById()总是返回一个对象（如果未找到则返回null对象），而检查"undefined"永远不会返回false，因为typeof null !== "undefined"仍然是true。

- Andir

1

有很多方法可以检查定义。而且也有很多方法可以打破它们。比如说，你输入了(if (someValue) {})：如果someValue == false怎么办？它被定义了，但是它是false，所以条件不成立。如果你使用(if (someValue != undefined) {})：我可以通过设置undefined = true来破坏你的代码。typeof始终返回一个类型字符串，如果你要测试的对象没有定义，它就会返回“undefined”。 - Andir

1

在这个特定的情况下，他正在调用getElementById()。我们知道它会返回什么。例如，它不能返回常量false。它将返回一个元素或null。 - Pointy

哇，将 undefined 设置为 true... 真是太可怕了。我真想知道允许这样做的原因是什么。无论如何，解释得很好，谢谢。 - Tim Goodman

1

@Tim，如果你很谨慎，可以使用(void 0)代替undefined。 - Pointy

如果我只是这样写 if (element) 会发生什么？ - windmaomao

6

像这样做：

如果元素的id为"someId"不存在，则表达式将返回TRUE（NOT FALSE === TRUE）或！false === true。代码如下：

if(!document.getElementById("someId")) {
    //一些代码。注意在表达式中的NOT（!）
}

试试这段代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="format-detection" content="telephone-no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
        <title>Test</title>
    </head>
    <body>
      <script>
var createPerson = function (name) {
    var person;
    if (!document.getElementById(name)) {
        alert("Element does not exist. Let's create it.");
      person = document.createElement("div");
//add argument name as the ID of the element
      person.id = name;
//append element to the body of the document
      document.body.appendChild(person);
    } else {
        alert("Element exists. Lets get it by ID!");
      person = document.getElementById(name);
    }
    person.innerHTML = "HI THERE!";

};
//run the function.
createPerson("someid");
          </script>
       </body>
</html>

在您的浏览器中尝试这个，它应该会弹出“元素不存在。让我们创建它。”的警告信息。

现在添加：

<div id="someid"></div>

将此代码添加到页面正文中，然后再次尝试。大功告成！ :)

- Gawran

2

document.getElementById('something')可能是'undefined'。通常（虽然不总是）进行测试，例如if (document.getElementById('something'))就足够了。

- Robusto

@Andreas Niedermair：谢谢。已编辑添加。 - Robusto

1

是的。试试这个...惰性求值应该在第一部分为假/空时防止第二部分求值：

var someval = document.getElementById('something')
if (someval && someval.value <> '') {

- Fosco

2

我不建议那样毫无必要地两次调用 getElementById。 - Pointy

不需要两次评估 document.getElementById('something')。 - Gumbo

他特别要求检查元素的值不等于''，至少我是这样理解他的意图的。 - Fosco

是的，在这种情况下，你可以将从getElementById()调用返回的元素存储起来，并在需要时使用它，而不是两次调用getElementById()。请参考我的答案。 - Andir

0

最干净的版本，特别适合仅想从元素中获取.value的情况。

document.getElementById('elementsid') ? function_if_exists(); function_if_doesnt_exists();

- Pedro Pereira

0

jQuery 将为您提供这些功能以及更多...

if($("#something").val()){ //do stuff}

我花了几天时间才学会它，但它提供了更多的功能。以下是一个示例。

jQuery(document).ready(function() {
    /* finds closest element with class divright/left and 
    makes all checkboxs inside that div class the same as selectAll...
    */
        $("#selectAll").click(function() {
        $(this).closest('.divright').find(':checkbox').attr('checked', this.checked);
    });
});

- NimChimpsky

7

“Use JQuery” 这句话本身就值得点赞了吗？甚至不需要说“如果你正在使用JQuery，你可以这样做…”吗？哎呀…也许如果我在每个JavaScript主题中都发帖“JQuery可以做到”，我的声望会更高。 - Tim Goodman

好的建议，在我看来：每当遇到 JavaScript 问题时，请使用 jQuery。 - NimChimpsky

jQuery是“好建议”，但这不是被问到的内容。我喜欢jQuery提供的功能并广泛使用它。它是一个很棒的框架，可以让你掌握它。 - Andir

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pointy · Accepted Answer

一个元素的引用永远不会看起来"假"，因此省略显式的 null 检查是安全的。

Javascript 会将一些值在布尔上下文中视为 false：undefined、null、数值零和 NaN 以及空字符串。但是 getElementById 返回的要么是一个元素引用，要么是 null。因此，如果元素在 DOM 中，则返回值将是一个对象引用，所有对象引用在 if () 测试中都是真（true）。如果元素不在 DOM 中，则返回值将是 null，而 null 在 if () 测试中始终为假（false）。

包含比较是无害的，但个人认为最好不要包含不需要的代码，因为每次按键都可能引入错误 :)

请注意，那些使用 jQuery 的人不应该这样做：

if ($('#something')) { /* ... */ }

因为jQuery函数总会返回一个"真值"，即使没有找到元素，jQuery也会返回一个对象引用。应该这样写：

if ($('#something').length) { /* ... */ }

编辑 — 关于检查元素的值，不能同时使用DOM方法直接检查元素本身的存在性。与此类似，大多数框架都可以使其相对简单和清晰，正如其他回答中所指出的那样。