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

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

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

作者：迹忆客最近更新：2023/03/11 浏览次数：

本文将介绍如何通过不同的方法来检查元素在 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>

上一篇：在 JavaScript 中获取子元素

下一篇：在 JavaScript 中按类型获取元素

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享