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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。