Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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."
}
806 Views
