querySelector()
and querySelectorAll()
are two JavaScript functions very useful when working with HTML elements and JavaScript.
With these functions you can get in JavaScript the HTML elements according to a group of CSS selectors ('id', 'class').
querySelector()
returns the first element within the document that matches the specified group of selectors, or null
if no matches are found.<h4>Example querySelector()</h4> <ul> <li>MarPlo.net</li> <li class='aclass'>CoursesWeb.net</li> <li class='aclass'>GamV.eu</li> </ul> <p style='background:#fbfbb0;'>If you click the following button (accessed with querySelector), it displays at #resp the content of the first LI with class='aclass'.</p> <button id='btn1'>Click</button> <blockquote id='resp'>#resp</blockquote> <script> var btn = document.querySelector('#btn1'); btn.addEventListener('click', (ev)=>{ document.getElementById('resp').innerHTML = document.querySelector('li.aclass').innerHTML; }); </script>
querySelectorAll()
returns an array of objects with the elements that match the specified group of selectors.<h4>Example querySelectorAll()</h4> <ul> <li class='sites'>CoursesWeb.net</li> <li class='sites'>MarPlo.net</li> <li>GamV.eu.net</li> </ul> <div id='dv1'> Web Development courses - <span class='note'>querySelector and querySelectorAll</span> </div> <p style='background:#fbfbb0;'>The JS script gets an array with the LI tags with class='sites' and the tag with class='note' from #dv1 (css selector: '<b>li.sites, #dv1 .note</b>' ).<br> If you click the button, it displays their content at #resp.</p> <button id='btn1'>Click</button> <blockquote id='resp'>#resp</blockquote> <script> // gets all the LI tags with class='sites', and the tags with class='note' in element with id='dv1' var elms = document.querySelectorAll('li.sites, #dv1 .note'); var btn = document.querySelector('#btn1'); btn.addEventListener('click', (ev)=>{ var re =''; //traverse the elms array, and adds in re the content of each element for(var i=0; i<elms.length; i++) { re += elms[i].innerHTML +'<br>'; } //adds the string in #resp document.getElementById('resp').innerHTML = re; }); </script>
The difference between querySelector() and querySelectorAll() is that querySelector()
returns a single object with the first HTML element that matches the 'selectors', but querySelectorAll()
returns an array of objects with all the HTML elements that match the 'selectors'.
querySelectorAll()
, the selection is made on other element, not on 'document
'. When the mouse cursor is over a selected <a>, the URL address is added into a specified input field.
<p style='background:#fbfbb0;'>The JS script apply querySelectorAll() to gets the elements within the tag with id 'sites'.<br> - When the mouse is over the next links, the address from 'href' it is added in the text field.</p> Adresa URL: <input type='text' id='txt1' /> <ul id='sites'> <li><a href='//coursesweb.net/javascript' title='JavaScript Course'>JavaScript Course</a></li> <li><a href='//gamv.eu/' title='Flash Games'>Flash Games</a></li> </ul> <script> var txt1 = document.getElementById('txt1'); // gets A tags in LI added in element with id='idata' var elms = document.getElementById('sites').querySelectorAll('li a'); //registers mouseenter to each element in elms array for(var i=0; i<elms.length; i++){ elms[i].addEventListener('mouseenter', (ev)=>{ txt1.value = ev.target.href; }); } </script>
<img src="image.jpg" usemap="#map1"> <map name="map1"> <area shape="rect" coords="9, 120, 56, 149" href="#"> <area shape="rect" coords="100, 200, 156, 249" href="#"> </map>
#id { overflow: auto; }
document.getElementById("id").onmouseover = function(){ document.write("Have Good Life"); }
if(isset($_GET["id"])) { echo $_GET["id"]; }