如何处理不在 DOM 中的 'queryselected' 元素

Question

我正在创建一个不共享相同布局的多页网站，并且通过使用单个 javascript 文件，每次元素不在 DOM 中时，控制台都会抛出错误.我正在寻找一种解决方案，避免我在检查元素是否存在的 if 语句中包含每一位代码。

例如

Javascript 文件

let myelement = document.querySelector('.myelement');
let myelementText = myelement.textContent;

console.log(myelementText);

HTML 模板 #1

<ul>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
</ul>

模板 #1 的控制台输出

Uncaught TypeError: Cannot read property 'textContent' of null
    at window.onload ((index):33)

HTML 模板 #2

<ul>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li class="myelement">Element</li>
</ul>

模板 #2 的控制台输出

element

当前 - 希望 - 可避免的解决方案

let myelement = document.querySelector('.myelement');
if (typeof (myelement) != 'undefined' && myelement != null) {
  let myelementText = myelement.textContent;

  console.log(myelementText);
}

Answer 1

无法检查元素是否存在。您可以删除 typeof undefined 检查，检查 != null 就足够了。

在何处实施此检查取决于您，在第一种情况下，您可以使用 something like this 而不是 select myelement。

if (document.querySelector('.myelement') !== null) {
  alert('The element "myelement" exists in the page.');
} else {
  alert('The element "myelement" does not exists in the page.');
}

let myelement = document.querySelector('.myelement');
if (myelement != null) {
  let myelementText = myelement.textContent;

  console.log(myelementText);
}

<ul>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
    <li>Element</li>
</ul>

如何处理不在 DOM 中的 'queryselected' 元素

How to handle 'queryselected' element that are not in the DOM

javascript

html

selectors-api

Javascript 文件

HTML 模板 #1

HTML 模板 #2

当前 - 希望 - 可避免的解决方案