1. what is contains ?

Ans : इसके द्वारा किसी parent element के child element या उसके attribute को check करने के लिए किया जाता है। यह Boolean value (true / fasle ) को return करता है।

Syntax :

parent_Element.contains(attribute_name/child_Element)

Example

HTML Code


   <html>
   <head> </head>
    <body> 
       <div class="teach"></div>

                  <!--example 2-->
               <ul class="teachbox">
                  <li><img src="https://www.teachcoders.com/images/basic-javascript.jpg"><p>hello world</p></li>
                  <li><img src="https://www.teachcoders.com/images/basic-javascript.jp"><p>hello world</p></li>
                  <li><img src="https://www.teachcoders.com/images/basic-javascript.jp"><p>hello world</p></li>
                  <li><img src="https://www.teachcoders.com/images/basic-javascript.jp"><p>hello world</p></li>
               </ul>
    </body>
     </html>

  
-----------------------------------------------
 EXAMPLE 1 : contains
 -----------------------------------------------
<script>
  // result (with attribute) false
  var my_parent_element = document.querySelector("ul.teachbox");
  var my_find_attribute = document.querySelector(".my_class1");
  var result = my_parent_element.contains(my_find_attribute);
  console.log(result)
 </script>

 <script>
  // result (with attribute) true
  var my_parent_element = document.querySelector("ul.teachbox");
  var my_find_attribute = document.querySelector(".my_class");
  var result = my_parent_element.contains(my_find_attribute);
  console.log(result)
 </script>

<script>
  // result (with element) true
  var my_parent_element = document.querySelector("ul.teachbox");
  var my_find_attribute = document.querySelector("p");
  var result = my_parent_element.contains(my_find_attribute);
  console.log(result)
</script>

Css Code


     <style>
  ul{
    display:flex;
  }
    ul li{
      width:20%;
      list-style:none;
    }
      ul li caption{
   width: 112%;
    text-align: center;
    display: block;
    font-size: 25px;
    padding-top:10px;
      }
    ul li img{
      width:100%;
    }
  </style>