Document Object Module DOM contains Method tutorial in JavaScript

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DOM contains Method JavaScript</title>
    <link rel="stylesheet" href="css/DOM_contains_Method_JavaScript.css">
</head>

<body>
    <div id="test">
        <h2>Hello World : JavaScript Contains Method</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo corporis adipisci alias cupiditate
            officiis consequatur, fuga, amet quos numquam perferendis saepe labore dolorem reiciendis reprehenderit
            facilis repudiandae praesentium quis delectus voluptates, repellendus recusandae. Itaque consequuntur,
            corrupti quasi illum iusto perferendis autem blanditiis magni eum, repellendus architecto ratione ipsum
            molestiae laboriosam.
        </p>
        <div>
            <p id="abc">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum magni vel inventore illum facere
                tenetur eveniet quam ex nemo eum. Dolorum suscipit corrupti asperiores dicta inventore debitis facilis
                amet totam neque reprehenderit minima ratione corporis quasi aperiam iusto consectetur nostrum enim
                optio, quas rerum doloribus nesciunt dolor deleniti. Ea, minima.
            </p>
        </div>
    </div>
    <script src="js/DOM_contains_Method_JavaScript.js"></script>
</body>

</html>




Below File is css/DOM_contains_Method_JavaScript.css File
h2 {
    margin: 0 0 10px;
}

#test {
    background: #ffff00;
    width: 800px;
    min-height: 250px;
    padding: 10px 10px;
    margin: 0 auto;
}




Below File is js/DOM_contains_Method_JavaScript.js File
var parentElement = document.getElementById("test");
var target = document.getElementById("abc");
var targetTwo = document.getElementById("xyz");

//If target element is present as a children or grand-children then contains() method will return true
var find = parentElement.contains(target);
console.log(find);

var findTwo = parentElement.contains(targetTwo);
console.log(findTwo);


Comments

Post a Comment

Popular posts from this blog

Generators tutorial in Advance JavaScript

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Generators Advance JavaScript </ title >     < link rel = "stylesheet" href = "" > </ head > < body >     < script >         //Example 1 :         // function* generateit() {         //     console.log("First Message");         //     yield "Yield No. 1"; //Here Statement will be Pause, To remove the Pause we have to call next() method again as shown below         //     console.log("Second Message");         //     yield "Yield No. ...
Read more

Document Object Module DOM querySelector and querySelectorAll tutorial in JavaScript

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > DOM querySelector querySelectorAll JavaScript </ title >     < link rel = "stylesheet" href = "css/main.css" > </ head > < body >     < div id = "wrapper" >         < div id = "header" class = "abc" style = " border:1px solid #ff0000;" onClick = "xyz()" >             < h1 > Hello World </ h1 >             < h1 > Welcome </ h1 >         </ div >         < div id = "menu" >             < ul >...
Read more

Find Even and Odd Numbers with Loops tutorial in JavaScript

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Even Odd Numbers with Loops </ title >     < script >         for ( var a = 1 ; a <= 10 ; a ++) {             if ( a % 2 == 0 ) {                 document . write ( "Even Number : " + a + "<br>" );             }         }         for ( var b = 1 ; b <= 10 ; b ++) {             if ( b % 2 != 0 ) {                 document . write ( "Odd Number : " + b + "<br>"...
Read more