querySelector() and querySelectorAll() in Dom Manipulations Methods in Javascript
querySelector() and querySelectorAll()
Here is the working Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test Page</title>
</head>
<body>
<h1 id="selector" class="name">RUSTIC TRAVEL JUNKIE</h1>
<h1 id="selector1" class="name">RTJ</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum ipsam blanditiis voluptatibus et, cumque expedita, quam ea! Dolorem obcaecati, fuga, culpa neque, repellat laudantium libero sed sint veritatis praesentium vitae cumque ratione eveniet optio, aspernatur ab. Eveniet, quisquam veritatis quo maxime labore nostrum consectetur eaque cumque distinctio vel doloremque sunt unde harum placeat, quam perferendis possimus similique laboriosam repellendus. Ut!</p>
<button onclick = "box()">CLICK ME</button>
<!-- querySelector basically works like getElementByID()and will only act on the first element of that particular name But querySelectorAll will actually form an array of objects and will act like getElementsByClass() -->
<script>
function box(){
document.querySelector(".name").innerHTML="HELLO JUNKIE"; // workson first h1 element
document.querySelectorAll(".name")[1].innerHTML="HELLO JUNKIE"; // works on first h1 element
}
</script>
</body>
Here are a few snaps of the output before pressing the submit button and after pressing it :
Hope u like it :)
Comments
Post a Comment
I WOULD APPRECIATE IF YOU LEAVE A COMMENT OR YOUR FEEDBACK HERE !!!