HTML DOM contains()用法及代碼示例

HTML DOM contains() 方法用於查找節點是否是指定節點的後代。後代可以是節點、孫子甚至曾孫子的直係子節點。它返回一個布爾值 true 表示該節點確實是指定節點的後代，如果它不是給定節點的後代，則返回 false。

用法

以下是 HTML DOM contains() 方法的語法 -

node.contains(givenNode)

這裏，givenNode 是一個強製參數值，用於指定 givenNode 是否被節點包含。

示例

讓我們看一個 HTML DOM contains() 方法的例子 -

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1{
      border:2px solid blue;
      width:160px;
   }
</style>
</head>
<body>
<div id="DIV1">
<p>I live in the <attr id="At" title="United States of America">U.S.A </attr></p>
</div>
<p>Click the below button to find out if the attr element is a descendant of div element or not</p>
<button type=”button” onclick="divDesc()">CONTAINS</button>
<p id="Sample"></p>
<script>
   function divDesc() {
      var attr = document.getElementById("At");
      var div = document.getElementById("DIV1").contains(attr);
      if(div==true)
         document.getElementById("Sample").innerHTML="Span element is the descendant of the div element."
      else
         document.getElementById("Sample").innerHTML="Span element is not the descendant of the div element."
   }
</script>
</body>
</html>

輸出

這將產生以下輸出 -

單擊 DESCENDANT 按鈕時 -

在上麵的例子中 -

我們創建了一個 ID 為 “DIV1” 的 <div> 元素，它有一個 <p> 元素，在 <p> 元素內部是 <attr> 元素。邊框應用於 “DIV1”，其寬度已使用 css 樣式指定 -

#DIV1{
   border:2px solid blue;
   width:160px;
}
<div id="DIV1">
<p>I live in the <attr id="At" title="United States of America">U.S.A </attr></p>
</div>

然後，我們創建了一個按鈕 CONTAINS，當用戶單擊時執行 divDesc() 方法 -

<button type=”button” onclick="divDesc()">CONTAINS</button>

divDesc() 方法使用文檔對象的 getElementById() 方法獲取 <attr> 元素並將其分配給 attr 變量。然後它使用 <div> 元素的 contains 方法並將 <attr> 元素作為參數傳遞給它。

由於 <div> 元素包含 <attr> 元素，即 <attr> 元素是 <div> 元素的後代，它返回 true。使用條件語句，我們使用 id 為 “Sample” 的段落中的 innerHTML 屬性顯示合適的文本 -

function divDesc() {
   var attr = document.getElementById("At");
   var div = document.getElementById("DIV1").contains(attr);
   if(div==true)
      document.getElementById("Sample").innerHTML="Span element is the descendant of the div element."
   else
      document.getElementById("Sample").innerHTML="Span element is not the descendant of the div element."
}

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM contains() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。