JavaScript 中檢查元素是否存在於 DOM
-
使用
getElementById()檢查元素在DOM中是否存在 -
使用
getElementsByClassName檢查DOM中元素的存在 -
使用
getElementsByName來檢查元素是否存在於DOM中 -
使用
getElementsByTagName檢查元素是否存在於DOM中 -
使用
contains()檢查可見的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>