技术咨询：选择input父元素时出现报错的原因排查

嘿，这个报错我之前帮不少开发者排查过，大概率是下面这几种情况导致的，你可以对照着自己的代码检查下：

• Input元素压根没被正确获取到
  这是最常见的原因！比如你在DOM还没完全加载的时候就去获取input元素，拿到的结果是null，这时候再去调用.parentNode或者.parentElement这类获取父元素的方法，自然会抛出错误。举个典型的错误示例：

  // 脚本写在<head>里，DOM还没渲染出input
  const input = document.querySelector('#my-input');
  const parent = input.parentNode; // 这里直接报错，因为input是null
  

  解决办法也很简单：要么把脚本放在</body>标签的末尾，确保DOM已经加载完成；要么用DOMContentLoaded事件包裹你的代码，等DOM就绪后再执行：

  document.addEventListener('DOMContentLoaded', () => {
    const input = document.querySelector('#my-input');
    if (input) { // 先判断input是否存在
      const parent = input.parentNode;
      // 后续操作
    }
  });
  

• 你使用的选择/获取方法本身有逻辑缺陷
  如果你是用自己封装的函数或者某些小众库来获取父元素，可能是方法内部没做必要的校验。比如你写了这样的自定义函数：

  function getInputParent() {
    const input = document.querySelector('input');
    // 没检查input是否存在就直接返回父元素
    return input.parentElement;
  }
  

  一旦页面里找不到匹配的input，这个函数就会直接报错。解决的话，记得在方法里加上存在性判断，提前处理异常：

  function getInputParent() {
    const input = document.querySelector('input');
    if (!input) {
      console.error('找不到目标input元素');
      return null;
    }
    return input.parentElement;
  }
  

• Input元素处于Shadow DOM内部
  如果你的input是在Web组件的Shadow DOM里，常规的DOM选择器是无法穿透Shadow DOM的，这时候你直接获取input然后拿父元素，要么找不到input，要么拿到的父元素不是你预期的那个。这种情况得先获取Shadow根节点，再去查找input：

  const shadowHost = document.querySelector('#my-web-component');
  const shadowRoot = shadowHost.shadowRoot;
  const input = shadowRoot?.querySelector('input');
  if (input) {
    const parent = input.parentNode;
  }
  

• Input元素已经被动态移除
  如果在你获取父元素之前，input已经被JS代码从DOM树中移除了，那这个input节点的parentNode会变成null。如果你的代码没判断父元素是否存在，直接进行后续操作，就会触发报错。这种情况要确保你获取父元素的时机，是在input还处于DOM树中的时候。

内容的提问来源于stack exchange，提问作者user7267363