Question

当我想检查页面中是否存在元素时。这两个检查是否相同？是否有更好的更紧凑的方法来检查存在？

如果我想查看value == ''该怎么办？这也可以包含在此检查中吗？

Answer 1

对元素的引用永远不会显示为“falsy”，因此不使用显式空值检查是安全的。

Javascript会将对布尔上下文中某些值的引用视为false：undefined，null，numeric zero和NaN以及空字符串。但是getElementById返回的内容将是元素引用，或者为null。因此，如果元素在DOM中，则返回值将是对象引用，并且true测试中的所有对象引用都是if ()。如果DOM中的元素不，则返回值为null，而null测试中的false始终为if ()。< / p>

包含比较是无害的，但我个人更喜欢保留一些不做任何事情的代码，因为每当我的手指敲击键盘时我都会想到我可能会引入一个错误：）

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

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

因为jQuery函数总会返回“truthy” - 即使没有找到任何元素，jQuery也会返回一个对象引用。代替：

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

编辑 - 关于检查元素的值，不，你不能在检查是否存在时同时执行此操作元素本身直接使用DOM方法。同样，大多数框架使其相对简单和干净，正如其他人在他们的答案中所指出的那样。

Answer 2

使用它更好（但更啰嗦）：

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

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

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

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

Answer 3

就这样做：

if（！document.getElementById（“someId”）{/ 一些代码。注意表达式中的NOT（！） /};

如果id为“someId”的元素不存在，则expresion将返回TRUE（NOT FALSE === TRUE）或！false === true;

试试这段代码：

<!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>

到页面正文并再试一次。瞧！：）

Answer 4

document.getElementById（'something'）可以是'undefined'。通常（以为并非总是如此）进行if (document.getElementById('something'))等测试就足够了。

Answer 5

呀。试试这个..懒惰的评估应该禁止条件的第二部分在第一部分为false / null时进行评估：

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

Answer 6

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);
    });
});

Answer 7

如果您只想从元素中获取.value，最干净的版本特别好。

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

if（document.getElementById（'something'）！= null）是否与if（document.getElementById（'something'））相同？

7 个答案: