HTML DOM contains() Method


The HTML DOM contains() method is used to find whether a node is the descendant of the specified node. A descendant can be an immediate child of the node, grandchild and even great-grandchild. It returns a boolean true indicating the node is indeed the descendant of the specified node and false if it isn’t the descendent of the given node.

Syntax

Following is the syntax for the HTML DOM contains() method −

node.contains(givenNode)

Here, the givenNode is a mandatory parameter value that specifies if the givenNode is being contained by the node.

Example

Let us look at an example for the HTML DOM contains() method −

<!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>

Output

This will produce the following output −

On clicking the DESCENDANT button −

In the above example −

We have created a <div> element with id “DIV1” which have a <p> element and inside the <p> element is the <attr> element. A border is applied to the “DIV1” and its width has been specified using the css styles −

#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>

We have then created a button CONTAINS that executes the divDesc() method when clicked by a user −

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

The divDesc() method gets the <attr> element using the getElementById() method of the document object and assigns it to attr variable. It then uses the contains method of <div> element and pass the <attr> element as parameter to it.

Since the <div> element contains the <attr> element i.e. the <attr> element is the descendant of the <div> element it returns true. Using conditional statements we display the suitable text using the innerHTML property in the paragraph with id “Sample” −

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."
}
raja
Published on 08-Aug-2019 12:55:49
Advertisements