JavaScript 中检查元素是否存在于 DOM

要检查是否存在匹配的元素，请根据识别元素的方式选择合适的查询方法。document.getElementById() 会返回匹配的元素或 null，因此可以检查返回值是否为真值。按类名和标签查询则会返回集合；即使集合为空，它仍是真值，所以应检查集合的 length。

使用 getElementById() 查找一个匹配的元素

如果知道元素唯一的 id，可以使用 getElementById()。找到匹配的 ID 时，它会返回一个 Element；如果没有元素使用该 ID，则返回 null。传入 ID 时不需要加 # 前缀。

下面的浏览器页面示例会查找 ID 为 help-link 的链接。示例中链接显示的文字仍为英文 “Help”，代码块保持原样：

<a id="help-link" href="/help">Help</a>
<script>
  const helpLink = document.getElementById("help-link");
  const exists = helpLink !== null;
  console.log(exists);
</script>

exists 变量是布尔值。Boolean(helpLink) 或 !!helpLink 也可以将结果转换为 true 或 false。如果希望检查明确表达查询方法的返回值，可以使用 !== null。

按类名、名称和标签查找匹配项

使用 getElementsByClassName() 匹配类名，使用 getElementsByName() 匹配 name 属性，使用 getElementsByTagName() 匹配元素标签。这些方法查询的是不同属性：例如，类名应写在 class 属性中，表单控件的名称则应写在 name 属性中。

本节中的代码以及显示的标签或输出仍为英文。

<input class="search-field" name="query">
<script>
  const byClass = document.getElementsByClassName("search-field");
  const byName = document.getElementsByName("query");
  const byTag = document.getElementsByTagName("input");

  console.log(byClass.length > 0);
  console.log(byName.length > 0);
  console.log(byTag.length > 0);
</script>

getElementsByClassName() 和 getElementsByTagName() 会返回实时的 HTMLCollection 对象。getElementsByName() 会返回 NodeList。没有匹配项时，集合的长度为 0；它仍然是对象，而不是 null。要检查是否存在匹配项，可以使用 collection.length > 0（或 collection.length !== 0）。代码块中的 true 和 false 是 JavaScript 布尔值，保持原样。

理解查询结果和布尔值检查

查询单个元素和查询集合需要采用不同的存在性检查方式。对于 getElementById() 的结果，可以使用 Boolean(element) 将其转换为布尔值，或将其与 null 比较。对于按类名、名称或标签查询得到的集合，应检查 length。直接对集合使用 !! 无法判断其中是否包含元素：无论集合为空还是非空，它都是真值。

应根据实际问题选择 API：你要问的是“是否存在一个具有此 ID 的元素？”，还是“有多少元素符合此条件？”。如果之后还要使用这些元素，请保留查询返回的元素或集合，不要过早将其转换为布尔值。

运行以下示例：

本节中的代码以及显示的标签或输出仍为英文。

const matches = [{ id: "help-link" }];
const exists = matches.length > 0;
console.log(exists);

此示例单独演示如何检查集合长度；上面的 DOM 专用代码片段是浏览器页面的源代码，不会在此处执行。代码中的 true 是 JavaScript 布尔值，保持原样。

检查节点是否位于 document.body 内

document.body.contains(node) 会返回一个布尔值，表示 node 是 body 本身还是它的后代。它检查的是 DOM 树中的包含关系，而不是节点在屏幕上是否可见。节点即使位于 body 内，也可能被 CSS 隐藏或以其他方式不显示。

向 contains() 传入一个节点。如果查询结果是集合，请先选取其中一项，并考虑集合可能为空。例如，const matches = document.getElementsByName("query"); const isInBody = matches.length > 0 && document.body.contains(matches[0]); 只检查第一个匹配节点，不会检查所有匹配项。如果你实际要判断的是是否有任何匹配节点位于 body 内，就应逐一检查这些项。