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

  2. 贴士文章
  3. JavaScript 贴士
  4. JavaScript 中检查元素是否存在于 DOM
Moataz Farid 2023年1月30日
JavaScript JavaScript DOM
  1. 使用 getElementById() 检查元素在 DOM 中是否存在
  2. 使用 getElementsByClassName 检查 DOM 中元素的存在
  3. 使用 getElementsByName 来检查元素是否存在于 DOM 中
  4. 使用 getElementsByTagName 检查元素是否存在于 DOM 中
  5. 使用 contains() 检查可见的 DOM 中是否存在一个元素
JavaScript 中检查元素是否存在于 DOM

本文将介绍如何通过不同的方法来检查元素在 DOM 中的存在。

使用 getElementById() 检查元素在 DOM 中是否存在

我们可以使用函数 getElementById 来验证一个元素是否存在于 DOM 中，使用该元素的 Id。在下面的例子中，我们将验证元素 <a id="Anchor Id" href="#">Click Here</a> 是否存在于 DOM 中。

<html>
    <body>
        <a id="Anchor Id" href="#">Click Here</a>
        <script>
            var testData = document.getElementById("Anchor Id");
            console.log(testData);
        </script>
    </body>
</html>

输出：

<a id="Anchor Id" href="#">Click Here</a>

如果我们想以布尔值而不是返回元素，我们可以在 document.getElementById("Anchor Id"); 前添加一个!!。

<html>
    <body>
        <a id="Anchor Id" href="#">Click Here</a>
        <script>
            var testData = !!document.getElementById("Anchor Id");
            console.log("Is Not null?",testData);
        </script>
    </body>
</html>

输出：

Is Not null? true

使用 getElementsByClassName 检查 DOM 中元素的存在

类似于我们使用 getElementById() 函数通过其 Id 来查找元素，我们还有许多其他函数通过不同的标准来执行同样的操作，如 getElementsByClassName()、getElementsByName() 和 getElementsByTagName()。

函数 getElementsByClassName() 用于在 DOM 中使用类名查找元素。类名值的一个例子是 <a class="ClassExample"></a> 元素中的 ClassExample。如果找到任何元素，它将返回一个或多个元素，如果元素不存在，则返回 null。

让我们看看下面的 getElementByClassName() 函数的例子。

<html>
    <body>
        <a class="ClassExample" href="#">Click Here for the class example </a>
        <script>
            var classname = document.getElementsByClassName("ClassExample");
            var classnameExists = !!document.getElementsByClassName("ClassExample");

            console.log("Element :",classname);
            console.log("Is Not null ? ",classnameExists);
        </script>
    </body>
</html>

输出：

Element : HTMLCollection [a.ClassExample]
Is Not null ?  true

我们也可以在函数 getElementsByClassName() 前使用符号!!将结果类型化为布尔值，如果有任何值就返回 true，如果返回 null 就返回 false。

使用 getElementsByName 来检查元素是否存在于 DOM 中

函数 getElementsByName() 用于根据名称查找 DOM 中的任何元素，元素的 Name 在元素 <a name="ElementNameHolder"></a> 中的值为 ElementNameHolder。让我们看看下面的例子。

<html>
    <body>
        <a class="ClassExample" name="ElementNameHolder" href="#">Click Here for the class example </a>
        <script>
            var EleName = document.getElementsByName("ElementNameHolder");
            var elementNameExists = !!document.getElementsByName("ElementNameHolder");

            console.log("Element :",EleName);
            console.log("Is Not null ? ",elementNameExists);
        </script>
    </body>
</html>

输出：

Element : NodeList [a]
Is Not null ? true

使用 getElementsByTagName 检查元素是否存在于 DOM 中

函数 getElementsByTagName() 可以返回 DOM 中带有指定 tagName 的所有元素。函数的返回可以是一个或多个元素，如果没有找到元素，则返回 null。

下面的例子显示了如何检查所需元素是否存在于 DOM 中。

<html>
    <body>
        
        <exampleTag>
            <a name="ElementNameHolder1" href="#">Click Here for the tag name example 1 </a>
        </exampleTag>
        
        <exampleTag>
            <a name="ElementNameHolder2" href="#">Click Here for the tag name example 2 </a>
        </exampleTag>
        
        <script>
            var EleTagName = document.getElementsByTagName("exampleTag");
            
            console.log("Element 1 :",EleTagName[0].innerHTML);
            console.log("Element 2 :",EleTagName[1].innerHTML);
        </script>
    </body>
</html>

输出：

Element 1 : 
            <a name="ElementNameHolder1" href="#">Click Here for the tag name example 1 </a>
        
Element 2 : 
            <a name="ElementNameHolder2" href="#">Click Here for the tag name example 2 </a>

使用 contains() 检查可见的 DOM 中是否存在一个元素

如果我们想在可见的 DOM 中检查一个元素的存在，我们可以使用 document.body.contains()，它将在可见的 DOM 中搜索我们在其第一个参数中发送的元素。

函数 contains() 只接收一个节点，所以当我们使用任何一个函数 document.getElementsByTagName 或 document.getElementsByName 检索节点时，我们只需要选择一个元素发送，因为这些函数会返回所有找到的符合选择条件的元素。

<html>
    <body>
        <exampleTag>
            <a name="ElementNameHolder2" href="#">Tag, Name, Id in visible DOM example 1</a>
            <a id="ElementId1" href="#">Tag, Name, Id in visible DOM example 2</a>
        </exampleTag>
        
        <exampleTag>
            <a name="ElementNameHolder2" href="#">Tag, Name, Id in visible DOM example 3</a>
            <a id="ElementId2" href="#">Tag, Name, Id in visible DOM example 4</a>
        </exampleTag>
        
        <script>
            var EleTagName = document.getElementsByTagName("exampleTag");

            let myVar1 = document.body.contains(document.getElementsByTagName("exampleTag")[0]);
            let myVar2 = document.body.contains(document.getElementsByName("ElementNameHolder2")[0]);
            let myVar3 = document.body.contains(document.getElementById("ElementId2"));
            console.log("Element 1 :",EleTagName[0].innerHTML);
            console.log("Element 2 :",EleTagName[1].innerHTML);
        </script>
    </body>
</html>

Element 1 : 
            <a name="ElementNameHolder2" href="#">Tag, Name, Id in visible DOM example 1</a>
            <a id="ElementId1" href="#">Tag, Name, Id in visible DOM example 2</a>
        
Element 2 : 
            <a name="ElementNameHolder2" href="#">Tag, Name, Id in visible DOM example 3</a>
            <a id="ElementId2" href="#">Tag, Name, Id in visible DOM example 4</a>

相关文章 - JavaScript DOM