如何基于HTML元素存在性条件执行JavaScript功能？

开发者阿泽

2026-7-16

你的代码确实在检查HTML元素是否存在

首先明确：你写的代码确实在检查目标HTML元素是否存在，原因如下：

document.getElementById("element-a") 在找不到对应ID的元素时，会返回null，而非未定义变量。
你声明的elementA和elementB变量，实际存储的是DOM元素对象或null，因此!elementA || !elementB的判断逻辑，本质就是检查两个元素是否有任意一个不存在（即返回了null），如果是就跳过功能执行。

性能优化建议

从提升性能的角度，你可以做以下优化：

1. 延迟DOM查询到函数内部

如果executeFeature函数不是页面加载后立即执行，或者可能在某些场景下完全不会执行，把DOM查询放到函数内部可以避免不必要的DOM遍历：

function executeFeature() {
  const elementA = document.getElementById("element-a");
  const elementB = document.getElementById("element-b");

  if (!elementA || !elementB) {
    return;
  }

  // 功能代码...
}
executeFeature();

这样只有当函数被调用时才会执行DOM查询，避免页面加载时做无用的DOM查找。

2. 更严谨的元素存在性检查

虽然!element已经能判断null/undefined，但如果你想让逻辑更清晰可读，可以写成：

if (elementA === null || elementB === null) {
  return;
}

逻辑和之前一致，但明确指向“元素不存在”的判断。

3. 避免重复DOM查询

如果这个函数会被多次调用，可以把元素查询的结果缓存起来，避免重复遍历DOM：

let elementA, elementB;

function executeFeature() {
  // 仅在首次调用时查询DOM
  if (!elementA) elementA = document.getElementById("element-a");
  if (!elementB) elementB = document.getElementById("element-b");

  if (!elementA || !elementB) {
    return;
  }

  // 功能代码...
}