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