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

翻译已于 2022-08-26 18:49:29 修改 · 4.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.delftstack.com/howto/javascript/javascript-check-element-exists-in-dom/

标签

#javascript #前端 #servlet

于 2022-08-19 19:38:50 首次发布

JavaScriipt学习日记专栏收录该内容

9 篇文章

订阅专栏

本文介绍了多种方法来验证HTML元素是否存在于DOM中，包括使用getElementById(), getElementsByClassName(), getElementsByName(), getElementsByTagName()以及contains()函数。每个方法都通过示例代码详细说明了其工作原理和应用，帮助开发者确定页面上特定元素的存在状态。

1.使用getElementById()来验证元素是否存在于DOM

2.使用getElementById()函数来查找元素是否存在于DOM

3.使用getElementsByName()函数来查找元素是否存在于DOM

4.使用getElementsByTagName函数来查找元素是否存在于DOM

5.使用contains()函数来检查visible中元素是否存在DOM

1.使用`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

2.使用`getElementById()`函数来查找元素是否存在于`DOM`

与我们使用getElementById()函数来查找元素类似Id，我们也有许多其他函数，它们使用不同的标准执行相同的操作，例如getElementsByClassName(),getElementsByName()和getElementsByTagName()。

该函数getElementsByClassName()用于DOM使用其类名查找元素中的元素。类名值的一个示例ClassExample在 element 中<a class="ClassExample"></a>。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如果有任何值则返回，false如果返回则返回null。

3.使用getElementsByName()函数来查找元素是否存在于`DOM`

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

<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

4.使用getElementsByTagName函数来查找元素是否存在于`DOM`

该函数可以返回具有ingetElementsByTagName()中指定的所有元素。函数的返回可以是一个或多个元素，或者如果没有找到元素。tagNameDOMnull

以下示例显示如何检查所需元素是否存在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>

5.使用contains()函数来检查visible中元素是否存在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>