{"id":51472,"date":"2021-01-20T03:01:51","date_gmt":"2021-01-19T17:01:51","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51472"},"modified":"2021-01-20T06:03:43","modified_gmt":"2021-01-19T20:03:43","slug":"javascript-document-queryselectorall-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document-queryselectorall-primer-tutorial\/","title":{"rendered":"Javascript document.querySelectorAll Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript document.querySelectorAll Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/qsall.gif\" title=\"Javascript document.querySelectorAll Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript document.querySelectorAll Primer Tutorial<\/p><\/div>\n<p>&#8220;Pure Javascript&#8221; versus &#8220;jQuery&#8221; is an issue for many developers of client side web application code logic.  More often than not we plump for the former, though there are notable exceptions for us, such as <a target=_blank title='jQuery Ajax information' href='http:\/\/api.jquery.com\/jquery.ajax\/'>jQuery Ajax<\/a> is often of use, and we have used the very apt <font size=1>(for today&#8217;s topic)<\/font> <a tareget=_blank title='jQuery CSS' href='https:\/\/api.jquery.com\/css\/'>jQuery CSS<\/a> on occasions.  But for today&#8217;s proof of concept test run of &#8230;<\/p>\n<p><code><br \/>\ndocument.<a target=_blank title='HTML DOM querySelectorAll() Method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_queryselectorall.asp'>querySelectorAll<\/a>([CSS-selector]);<br \/>\n<\/code><\/p>\n<p> &#8230; it&#8217;s all &#8220;Pure Javascript&#8221;.  In today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.html_GETME\">qsall.html<\/a> HTML and &#8220;Pure Javascript&#8221; code you will not find the string &#8220;document.<a target=_blank title='HTML DOM querySelectorAll() Method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_document_queryselectorall.asp'>querySelectorAll<\/a>&#8221; anywhere because our web application is &#8230;<\/p>\n<ul>\n<li>just some header HTML elements and one HTML input type=text &#8220;textbox&#8221; element and one containing div element and one input type=text to avoid &#8220;tabbing out&#8221; annoyances &#8230;<\/li>\n<li>&#8220;textbox&#8221; accepts a relative URL in two parts as per &#8230;<br \/>\n<code><br \/>\n[relativeURLTo-\/\/www.rjmprogramming.com.au\/]#[CSS-selector]<br \/>\n<\/code>\n<\/li>\n<li>that relative URL is the &#8220;src&#8221; property to an HTML iframe element that overlays <font size=1>(made to be barely visible)<\/font> header HTML elements and one HTML input type=text &#8220;textbox&#8221; element &#8230; and whose &#8230;<\/li>\n<li>&#8220;onload&#8221; event logic goes &#8230;<br \/>\n<code><br \/>\n function checkif(iois) {<br \/>\n  var ij;<br \/>\n  if (iois != null) {<br \/>\n    var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n      if (aconto.document) { aconto = aconto.document; }<br \/>\n      if (selectoris != '') {<br \/>\n        eles=aconto.querySelectorAll(selectoris);<br \/>\n        for (ij=0; ij&lt;eles.length; ij++) {<br \/>\n          eles[ij].style.border='1px dashed red';<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; that you can try for yourself with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.html\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51472' onclick='var dv=document.getElementById(\"d51472\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/querySelectorAll\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51472' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;Pure Javascript&#8221; versus &#8220;jQuery&#8221; is an issue for many developers of client side web application code logic. More often than not we plump for the former, though there are notable exceptions for us, such as jQuery Ajax is often of &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document-queryselectorall-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[212,576,652,3542,663,997,1986,2854,1319],"class_list":["post-51472","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-client","tag-html","tag-javascript","tag-javascript-document-queryselectorall","tag-jquery","tag-programming","tag-proof-of-concept","tag-queryselectorall","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51472"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=51472"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51472\/revisions"}],"predecessor-version":[{"id":51476,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51472\/revisions\/51476"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=51472"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=51472"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=51472"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}