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>
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe

相關文章 - JavaScript DOM