{"id":51568,"date":"2021-02-01T03:01:31","date_gmt":"2021-01-31T17:01:31","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51568"},"modified":"2021-02-01T06:14:22","modified_gmt":"2021-01-31T20:14:22","slug":"javascript-document-queryselector-one-element-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document-queryselector-one-element-tutorial\/","title":{"rendered":"Javascript document.querySelector One Element Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript document.querySelector One Element Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/qsall_oneelement.jpg\" title=\"Javascript document.querySelector One Element Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript document.querySelector One Element Tutorial<\/p><\/div>\n<p>Yes, adding a functionality layer on top of the recent <a title='Javascript document.querySelectorAll Share and Save Tutorial' href='#j.sasst'>Javascript document.querySelectorAll Share and Save Tutorial<\/a> we turn our attention from document.querySelector<i>All<\/i> to &#8230;<\/p>\n<ul>\n<li>as well as a full scan of a CSS selection, allow for the honing in onto a particular element the order of which is nominated by the user &#8230; begs the question &#8230;<\/li>\n<li>Is there a document.querySelectorFirst?  No.  Is there a <a target=_blank title='document.querySelector' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\/querySelector'>document.querySelector<\/a>?   Yes <font size=1>(it returns first matched element)<\/font>.  Do we use it to achieve today&#8217;s blog post aims?  Oddly, no.<\/li>\n<li>Do we use CSS <a target=_blank title='CSS :nth-of-type:nth-of-type' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/:nth-of-type'>:nth-of-type([userNumber])<\/a> or :nth-child([userNumber]) or :first-of-type CSS pseudo classes?  No <font size=1>(it&#8217;s a long story)<\/font>.<\/li>\n<\/ul>\n<p>Those CSS pseudo classes only suit predictable nested element arrangements such as with ul\/li or ol\/li or table\/tr\/th\/td types of HTML data.<\/p>\n<p>We settled on a less quirky <font size=1>(but one that tees in nicely with our general principle that an element ID attribute suits Javascript and an element CLASS suits CSS)<\/font> solution, but a possible one because our style and script can be dynamic and be helped out by each other &#8230;<\/p>\n<table style='font-size:10px;'>\n<tr>\n<th colspan=2>CSS<\/th>\n<\/tr>\n<tr>\n<th style='width:40%;'>Was<\/th>\n<th>Becomes<\/th>\n<\/tr>\n<tr>\n<td style='width:40%;'>\n<code style='font-size:10px;'><br \/>\n <font color=purple>img<\/font> { BORDER-radius:20% border: 1px dotted magenta; }<br \/>\n<\/code>\n<\/td>\n<td>\n<code style='font-size:10px;'><br \/>\n <font color=blue>.body<\/font><font color=purple>img<\/font> { BORDER-radius:20% border: 1px dotted magenta; }<br \/>\n<\/code>\n<\/td>\n<tr>\n<tr>\n<th colspan=2>Javascript <font size=1>(in broad brush terms)<\/font><\/th>\n<\/tr>\n<tr>\n<th style='width:40%;'>Was<\/th>\n<th>Becomes<\/th>\n<\/tr>\n<tr>\n<td style='vertical-align:top;width:40%;'>\n<code style='font-size:10px;'><br \/>\n Use document.querySelectorAll( '<font color=purple>img<\/font>' ) resultant list to further process user requirements.<br \/>\n<\/code>\n<\/td>\n<td style='vertical-align:top;'>\n<code style='font-size:10px;'><br \/>\n Still use document.querySelectorAll('<font color=purple>img<\/font>') resultant list (and as required only process \"All\" or the matching order of element) and make sure in a matching element's \"class\" attribute <font color=blue>body<\/font><font color=purple>img<\/font> appears, in order to further process user requirements.<br \/>\n<\/code>\n<\/td>\n<tr>\n<\/table>\n<p>And so yet again, with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/qsall.js-GETME\" title=\"qsall.js\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.js-GETME\" title=\"qsall.js\">qsall.js<\/a> external Javascript helping out <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/qsall.html-------GETME\" title=\"qsall.htm\">this changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.html-------GETME\" title=\"qsall.htm\">qsall.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.htm\" title=\"Click picture\">live run<\/a> link you can try these functionalities yourself.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document.queryselector-one-element-tutorial\/'>Javascript document.querySelector One Element<\/a>.<\/p-->\n<hr>\n<p id='j.sasst'>Previous relevant <a target=_blank title='Javascript document.querySelectorAll Share and Save Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document.queryselectorall-share-and-save-tutorial\/'>Javascript document.querySelectorAll Share and Save Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript document.querySelectorAll Textarea Placeholder Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/qsall_save.jpg\" title=\"Javascript document.querySelectorAll Share and Save Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript document.querySelectorAll Share and Save Tutorial<\/p><\/div>\n<p>On top of yesterday&#8217;s <a title='Javascript document.querySelectorAll Textarea Placeholder Tutorial' href='#j.satpt'>Javascript document.querySelectorAll Textarea Placeholder Tutorial<\/a> today&#8217;s progress concerns &#8230;<\/p>\n<ul>\n<li>sharing (via client email and sms applications) &#8230;\n<ol>\n<li>email<\/li>\n<li>sms<\/li>\n<\/ol>\n<\/li>\n<li>save (via window.<a target=_blank title='Window object localStorage property' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp'>localStorage<\/a>)<\/li>\n<\/ul>\n<p> &#8230; that has user controls, those being three input type=button for creation and one select (dropdown) element for recall, added into the main H1 header element.<\/p>\n<p>Along the way, we&#8217;ve hived off the following into a new external Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.js_GETME\" title=\"qsall.js\">qsall.js<\/a> because we may see some\/all of them as worthy of a &#8220;tool&#8221; that can be called in other web applications, perhaps &#8230;<\/p>\n<ul>\n<li>user definable Javascript scripting (interfacing)<\/li>\n<li>email<\/li>\n<li>sms<\/li>\n<li>save (via window.localStorage)<\/li>\n<\/ul>\n<p> &#8230; in a first draft genericization push.<\/p>\n<p>Yet again, using <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/qsall.html------GETME\" title=\"qsall.htm\">this changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.html------GETME\" title=\"qsall.htm\">qsall.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.htm\" title=\"Click picture\">live run<\/a> link you can try these functionalities yourself.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document.queryselectorall-share-and-save-tutorial\/'>Javascript document.querySelectorAll Share and Save Tutorial<\/a>.<\/p-->\n<hr>\n<p id='j.satpt'>Previous relevant <a target=_blank title='Javascript document.querySelectorAll Textarea Placeholder Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document.queryselectorall-textarea-placeholder-tutorial\/'>Javascript document.querySelectorAll Textarea Placeholder Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript document.querySelectorAll Textarea Placeholder Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/qsall_textarea.jpg\" title=\"Javascript document.querySelectorAll Textarea Placeholder Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript document.querySelectorAll Textarea Placeholder Tutorial<\/p><\/div>\n<p>Thinking of some great <a target=_blank title='Fred and Ginger' href='https:\/\/www.youtube.com\/watch?v=YFI0rFFp8j8'><i>Fred and Ginger<\/i><\/a> types of web application partners we have, at the very least &#8230;<\/p>\n<ul>\n<li>HTML and Javascript<\/li>\n<li>PHP and MySql<\/li>\n<li>MySql and phpMyAdmin<\/li>\n<li>Ajax and FormData<\/li>\n<li>Webpage and Iframe<\/li>\n<li>Details and Summary<\/li>\n<li>Div and Contenteditable<\/li>\n<\/ul>\n<p> &#8230; and today we&#8217;ve partnered <i>Textarea and Placeholder<\/i> because we&#8217;ve discovered that Placeholder (on many browsers and platforms) can be multiline by nature.  That suits our style, whereby we try not to bombard users with loads of user entries to have to worry about in web applications, where that is at all possible, but rather resort to intelligent user interaction, often based on delimiters, encouraging the one piece (or perhaps two or three pieces) of information to fill in.<\/p>\n<p>Today&#8217;s progress (added to that of yesterday&#8217;s <a title='Javascript document.querySelectorAll User Scripting Tutorial' href='#j.saust'>Javascript document.querySelectorAll User Scripting Tutorial<\/a>) concerns that user interaction design to our &#8220;Testing Out document.querySelectorAll&#8221; web application is to &#8230;<\/p>\n<ul>\n<li>replace single line input type=text element with textarea element &#8230; and &#8230;<\/li>\n<li>replace single line advice in a single line <i>placeholder<\/i> attribute with a multiline <i>placeholder<\/i> &#8220;blurb&#8221; which includes an example<\/li>\n<\/ul>\n<p> &#8230; and, speaking personally, the relief is incredible, as we have had to grapple with the awkwardness of user entry for days now!<\/p>\n<p>We even styled the <i>placeholder<\/i> thanks to the advice at <a target=_blank title='Placeholder information at W3schools, thanks.' href='https:\/\/www.w3schools.com\/howto\/howto_css_placeholder.asp'>W3schools<\/a>, thanks.<\/p>\n<p>And then we thought we&#8217;d allow the user to set the example bit of the <i>placeholder<\/i> as a <font color=purple>&#8220;starter&#8221;<\/font> for their real entry via a <font color=blue>&#8220;two times click on the textarea&#8221;<\/font> set of (on document onload event) logic as per &#8230;<\/p>\n<p><code><br \/>\n function onl(injs) {<br \/>\n   <font color=purple>if (document.getElementById('myinput')) {<br \/>\n     if (document.getElementById('myinput').outerHTML.indexOf('&lt;textarea') != -1) {<br \/>\n       var egis=String.fromCharCode(10) + String.fromCharCode(10) + \" Example (2xClick) of Einstein Wikipedia Webpage with rounded magenta images and lightblue heading ... \" + String.fromCharCode(10) + String.fromCharCode(10) + \"http:\/\/www.wikipedia.org\/wiki\/Einstein\" + String.fromCharCode(10) + \"` img { \" + String.fromCharCode(10) + \"   BORDER-radius:20%; \" + String.fromCharCode(10) + \"   border: 1px dotted magenta; \" + String.fromCharCode(10) + \"  }        `\" + String.fromCharCode(10) + \"  function fhlb() {\" + String.fromCharCode(10) + \"   document.getElementById(\" + '\"' + \"firstHeading\" + '\"' + \").style.backgroundColor=\" + '\"' + \"lightblue\" + '\"' + \"; \" + String.fromCharCode(10) + \"  } \" + String.fromCharCode(10) + \"  setTimeout(fhlb, 2000); \" + String.fromCharCode(10);<br \/>\n       document.getElementById('myinput').placeholder=document.getElementById('myinput').placeholder.replace(\/\\|\\ \/g, String.fromCharCode(10)).replace(' # or ` separate', ' # or ` or first line feed separate').replace(' # or ` and', ' # or ` or first line feed and') + egis;<br \/>\n       <\/font><font color=blue>document.getElementById('myinput').ondblclick = function(event){ ccnt=0;  if (event.target.placeholder.indexOf('http') != -1) {  event.target.value='http' + event.target.placeholder.split('http')[1];  }  };<br \/>\n       document.getElementById('myinput').onclick = function(event){ ccnt++; if (ccnt &gt;= 2) { ccnt=0; if (event.target.placeholder.indexOf('http') != -1) {  event.target.value='http' + event.target.placeholder.split('http')[1]; } }   };<\/font><br \/>\n     <font color=purple>} else {<br \/>\n       document.getElementById('myinput').placeholder=document.getElementById('myinput').placeholder.replace(\/\\|\\ \/g, '');<br \/>\n     }<br \/>\n   }<\/font><br \/>\n   if (injs.trim() != '') {<br \/>\n      var tag = document.createElement('script');<br \/>\n      tag.type='text\/javascript';<br \/>\n      tag.src='data:text\/javascript;base64,' + btoa(injs);<br \/>\n      document.head.appendChild(tag);<br \/>\n   }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p>Again, using <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/qsall.html-----GETME\" title=\"qsall.htm\">this changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.html-----GETME\" title=\"qsall.htm\">qsall.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.htm\" title=\"Click picture\">live run<\/a> link you can test this out for yourself.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document.queryselectorall-textarea-placeholder-tutorial\/'>Javascript document.querySelectorAll Textarea Placeholder Tutorial<\/a>.<\/p-->\n<hr>\n<p id='j.saust'>Previous relevant <a target=_blank title='Javascript document.querySelectorAll User Scripting Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document.queryselectorall-user-scripting-tutorial\/'>Javascript document.querySelectorAll User Scripting Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript document.querySelectorAll User Scripting Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/qsall_userscr.jpg\" title=\"Javascript document.querySelectorAll User Scripting Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript document.querySelectorAll User Scripting Tutorial<\/p><\/div>\n<p>Another user defined feature we can add to yesterday&#8217;s <a title='Javascript document.querySelectorAll Absolute URL Tutorial' href='#j.saaurlt'>Javascript document.querySelectorAll Absolute URL Tutorial<\/a>&#8216;s functionality list of &#8230;<\/p>\n<ul>\n<li>CSS user defined selector default styling for relative URL<\/li>\n<li>CSS user defined styling for relative URL<\/li>\n<li>Onclick logic related to that CSS selector via Javascript document.querySelectorAll for relative URL<\/li>\n<li>Popup window lor refresh mode child iframe src then srcdoc overlay techniques for relative URL that is nothing (ie. this web application)<\/li>\n<li>Absolute URL support as per the top three functionalities above &#8230; today we have added &#8230;<\/li>\n<li>User defined Javascript scripting (with the ` character delimiter added in case styling or scripting requires the # character)<\/li>\n<\/ul>\n<p>Yes, Javascript can be user defined and dynamic in an already running execution via Javascript <font color=blue>such as<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;head&gt;<br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  <font color=blue>var thejs=location.search.split(\"thescript=\")[1] ? decodeURIComponent(location.search.split(\"thescript=\")[1].split('&')[0]).replace(\/\\;\\ \/g, '; ' + String.fromCharCode(10)) : \"\";;<br \/>\n<br \/>\n function onl(injs) {<br \/>\n   if (injs.trim() != '') {<br \/>\n      var tag = document.createElement('script');<br \/>\n      tag.type='text\/javascript';<br \/>\n      tag.src='data:text\/javascript;base64,' + btoa(injs);<br \/>\n      document.head.appendChild(tag);<br \/>\n   }<br \/>\n  }<\/font><br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload=\"document.getElementById('myinput').focus();  <font color=blue>onl(thejs);<\/font>\"&gt;<br \/>\n<\/code><\/p>\n<p>Using <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/qsall.html----GETME\" title=\"qsall.htm\">this changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.html----GETME\" title=\"qsall.htm\">qsall.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.htm\" title=\"Click picture\">live run<\/a> link&#8217;s functionalities, we can &#8230;<\/p>\n<table>\n<tr>\n<th>Use dynamically added Javascript to add three dots to top header<\/th>\n<\/tr>\n<tr>\n<td><iframe style='width:100%;height:600px;' id=qsiftwo src='\/\/www.rjmprogramming.com.au\/qsall.htm?thescript=%20function%20xyz()%20%7B%20%20document.getElementById(%22myh1%22).innerHTML%2B%3D%22%20...%20%22%3B%20%20%20%20%7D%20setTimeout(xyz%2C2000)%3B%20'><\/iframe><\/td>\n<\/tr>\n<\/table>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document.queryselectorall-user-scripting-tutorial\/'>Javascript document.querySelectorAll User Scripting Tutorial<\/a>.<\/p-->\n<hr>\n<p id='j.saaurlt'>Previous relevant <a target=_blank title='Javascript document.querySelectorAll Absolute URL Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document.queryselectorall-absolute-url-tutorial\/'>Javascript document.querySelectorAll Absolute URL Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript document.querySelectorAll Absolute URL Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/qsall_absurl.jpg\" title=\"Javascript document.querySelectorAll Absolute URL Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript document.querySelectorAll Absolute URL Tutorial<\/p><\/div>\n<p>Just quietly, we add onto the functionality of yesterday&#8217;s <a title='Javascript document.querySelectorAll Client Pre-emptive Iframe Tutorial' href='#j.sacp-it'>Javascript document.querySelectorAll Client Pre-emptive Iframe Tutorial<\/a>&#8216;s work with the tolerance for the user to try some absolute URL entries as they try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/qsall.html---GETME\" title=\"qsall.htm\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.html---GETME\" title=\"qsall.htm\">qsall.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.htm\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p>As we so often find ourselves doing these days we use the &#8220;midair&#8221; feeling <a target=_blank title='Ajax information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Ajax_%28programming%29'>Ajax<\/a>\/<a target=_blank title='FormData object information' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FormData'>FormData<\/a> techniques to attempt to satisfy the user interactions, <font color=blue>as per<\/font> &#8230;<\/p>\n<p><code><br \/>\n <font color=blue>var wasino=null;<br \/>\n var absval='';<br \/>\n var urltosend='';<br \/>\n var zhr=null;<br \/>\n var wasplaceholder='';<br \/>\n<br \/>\n function showStuff(evt) {<br \/>\n  if (zhr.readyState == 4) {<br \/>\n    if (zhr.status == 200) {<br \/>\n      absval=zhr.responseText;<br \/>\n      \/\/alert(absval);<br \/>\n    }<br \/>\n  }<br \/>\n }<br \/>\n<br \/> <br \/>\n function ajaxit() {<br \/>\n  zhr = new XMLHttpRequest();<br \/>\n  var form=new FormData();<br \/>\n  form.append('inurl', urltosend);<br \/>\n  form.append('tdinto', 'divinv');<br \/>\n  if (document.URL.indexOf('localhost:8888') != -1) {<br \/>\n  zhr.open('post', 'http:\/\/localhost:8888\/fgc\/', true);<br \/>\n  } else {<br \/>\n  zhr.open('post', '\/\/www.rjmprogramming.com.au\/PHP\/fgc\/', true);<br \/>\n  }<br \/>\n  zhr.onreadystatechange = showStuff;<br \/>\n  zhr.send(form);<br \/>\n  preshowBelow();<br \/>\n }<br \/>\n<br \/> <br \/>\n function preshowBelow() {<br \/>\n   if (absval != '') {<br \/>\n    wasino.value=wasino.placeholder;<br \/>\n    wasino.placeholder=wasplaceholder;<br \/>\n    showBelow(wasino);<br \/>\n    wasino=null;<br \/>\n    absval='';<br \/>\n   } else {<br \/>\n    setTimeout(preshowBelow, 2000);<br \/>\n   }<br \/>\n }<\/font><br \/>\n<br \/>\n function showBelow(ino) {<br \/>\n  var his='', bahis='';<br \/>\n  <font color=blue>if (wasplaceholder == '') {<br \/>\n    wasplaceholder=ino.placeholder;<br \/>\n  }<br \/>\n  if (('' + ino.value).toLowerCase().indexOf('\/\/') == 0) {<br \/>\n    ino.value=document.URL.split(':')[0].toLowerCase() + ':' + ino.value;<br \/>\n  } else if (('' + ino.value).toLowerCase().indexOf('www.') == 0) {<br \/>\n    ino.value=document.URL.split(':')[0].toLowerCase() + ':\/\/' + ino.value;<br \/>\n  }<br \/>\n  if (('' + ino.value).toLowerCase().indexOf('http') == 0) {<br \/>\n    if (absval == '') {<br \/>\n      urltosend=ino.value.split('#')[0];<br \/>\n      ino.placeholder=ino.value;<br \/>\n      ino.value=''; \/\/ino.value.replace(urlis,'');<br \/>\n      wasino=ino;<br \/>\n      ajaxit();<br \/>\n      return;<br \/>\n    }<br \/>\n  } <\/font><br \/>\n  if (ino.value.indexOf('#') != -1) {<br \/>\n    if (('' + ino.value).indexOf(('' + ino.value).trim() + '        ') != -1) {<br \/>\n      if (documentURL.indexOf('?') != -1) {<br \/>\n        documentURL=documentURL.replace('?', '?window=popup&');<br \/>\n      } else {<br \/>\n        documentURL+='?window=popup';<br \/>\n      }<br \/>\n    } else if (('' + ino.value).indexOf(('' + ino.value).trim() + '    ') != -1) {<br \/>\n      if (documentURL.indexOf('?') != -1) {<br \/>\n        documentURL=documentURL.replace('?', '?window=y&');<br \/>\n      } else {<br \/>\n        documentURL+='?window=y';<br \/>\n      }<br \/>\n    } else if (('' + ino.value).indexOf(('' + ino.value).trim() + '  ') != -1) {<br \/>\n      if (documentURL.indexOf('?') != -1) {<br \/>\n        documentURL=documentURL.replace('?', '?refresh=y&');<br \/>\n      } else {<br \/>\n        documentURL+='?refresh=y';<br \/>\n      }<br \/>\n    }<br \/>\n    if (ourdecodeURIComponent(ino.value.substring(eval(1 + ino.value.indexOf('#'))).replace(\/NO\\%WAY\/g, 'NO%25WAY')).indexOf('{') != -1) {<br \/>\n     selectorplusis=ourdecodeURIComponent(ino.value.substring(eval(1 + ino.value.indexOf('#'))).replace(\/NO\\%WAY\/g, 'NO%25WAY'));<br \/>\n    }<br \/>\n    selectoris=ourdecodeURIComponent(ino.value.substring(eval(1 + ino.value.indexOf('#'))).replace(\/NO\\%WAY\/g, 'NO%25WAY')).split('{')[0].trim();<br \/>\n  }<br \/>\n  if (ino.value.trim() != '') {<br \/>\n    <font color=blue>if (absval != '') {<br \/>\n      bahis='data:text\/html;base64,' + absval;<br \/>\n      \/\/alert(bahis);<br \/>\n      absval='';<br \/>\n      document.getElementById('ifgoeshere').innerHTML=\"&lt;iframe id=ifsd onload='checkif(this);' style='position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:7;' srcdoc=\\\"\\\"&gt;&lt;\/iframe&gt;&lt;iframe id=xifsd onload='checkif(this);' style='display:none;' src=\\\"\" + bahis + \"\\\"&gt;&lt;\/iframe&gt;\";<br \/>\n    } else <\/font>if (ino.value.split('#')[0].trim() == '' && 1 == 2) {<br \/>\n      document.getElementById('myh1').style.opacity='0.01';<br \/>\n      document.getElementById('myh3').style.opacity='0.01';<br \/>\n      document.getElementById('myinput').style.opacity='0.01';<br \/>\n      document.getElementById('ifgoeshere').innerHTML=\"&lt;iframe onload='checkif(this);' style='position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:7;' src='\" + document.URL + \"'&gt;&lt;\/iframe&gt;\";<br \/>\n    } else if (ino.value.split('#')[0].trim() == '') {<br \/>\n      his='&lt;html&gt;' + document.head.outerHTML + document.body.outerHTML + '&lt;\/html&gt;';<br \/>\n      bahis='data:text\/html;base64,' + btoa(his);<br \/>\n      document.getElementById('ifgoeshere').innerHTML=\"&lt;iframe id=ifsd onload='checkif(this);' style='position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:7;' srcdoc=\\\"\\\"&gt;&lt;\/iframe&gt;&lt;iframe id=xifsd onload='checkif(this);' style='display:none;' src=\\\"\" + bahis + \"\\\"&gt;&lt;\/iframe&gt;\";<br \/>\n    } else {<br \/>\n      document.getElementById('myh1').style.opacity='0.01';<br \/>\n      document.getElementById('myh3').style.opacity='0.01';<br \/>\n      document.getElementById('myinput').style.opacity='0.01';<br \/>\n      document.getElementById('ifgoeshere').innerHTML=\"&lt;iframe onload='checkif(this);' style='position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:7;' src='\" + ino.value.split('#')[0].trim() + \"'&gt;&lt;\/iframe&gt;\";<br \/>\n    }<br \/>\n  }<br \/>\n }<br \/>\n<\/code><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document.queryselectorall-absolute-url-tutorial\/'>Javascript document.querySelectorAll Absolute URL Tutorial<\/a>.<\/p-->\n<hr>\n<p id='j.sacp-it'>Previous relevant <a target=_blank title='Javascript document.querySelectorAll Client Pre-emptive Iframe Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document.queryselectorall-client-pre-emptive-iframe-tutorial\/'>Javascript document.querySelectorAll Client Pre-emptive Iframe Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript document.querySelectorAll Client Pre-emptive Iframe Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/qsall_srcdoc.jpg\" title=\"Javascript document.querySelectorAll Client Pre-emptive Iframe Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript document.querySelectorAll Client Pre-emptive Iframe Tutorial<\/p><\/div>\n<p>Many web applications we present at this blog use what we refer to &#8220;inhouse&#8221; as &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/client-pre-emptive-iframe' title='Client Pre-emptive Iframe blog posts'>Client Pre-emptive Iframe<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; as that &#8220;suck it and see&#8221; client approach to do some of the &#8220;if it exists try it&#8221; functionality you might think has to involve a serverside language like PHP.  No, all the discussion below, ignores serverside anything, but instead dwells on &#8230;<\/p>\n<ul>\n<li>&#8220;child&#8221; iframe (leaning towards that Client Pre-emptive Iframe) making use of the &#8220;fresh start&#8221; their &#8220;onload&#8221; event (and to a lesser extent &#8220;onerror&#8221;) provides the client <font size=1>(only)<\/font> programmer &#8230;<\/li>\n<li>initially via <a target=_blank title='Iframe srcdoc information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_iframe_src.asp'>&#8220;src&#8221;<\/a> attribute &#8230; but new to today&#8217;s work (at least for us, that we can remember) &#8230;<\/li>\n<li>initially involve <i>src=&#8221;data:text\/html;base64,[base64HTMLContent]&#8221;<\/i> that &#8230;<\/li>\n<li>(same) &#8220;onload&#8221; code can redirect that content to another &#8220;child&#8221; iframe (leaning towards that Client Pre-emptive Iframe) <a target=_blank title='Iframe srcdoc information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_iframe_srcdoc.asp'>&#8220;srcdoc&#8221;<\/a> attribute &#8230; and yes, we were not sure until today, but yes &#8230;<\/li>\n<li>&#8220;child&#8221; iframe (leaning towards that Client Pre-emptive Iframe) that gets its content via &#8220;srcdoc&#8221; attribute does pass through the &#8220;onload&#8221; event logic where the &#8220;document&#8221; object exists <font size=2>(a very happy discovery for us<\/font><font size=1> (though we&#8217;ve probably been assuming it already in projects up to now)<\/font><font size=2>)<\/font><\/li>\n<\/ul>\n<p> &#8230; this &#8220;proof of concept&#8221; experimenting being incorporated into our &#8220;Javascript document.querySelectorAll&#8221; project for scenarios &#8230;<\/p>\n<blockquote><p>\nFor relative URL that is blank (ie. uses this same webpage) suffixes of two blanks refreshes and that of four blanks opens new window and that of eight blanks opens new popup window.\n<\/p><\/blockquote>\n<p> &#8230; to the point where you may not notice the difference between this &#8220;srcdoc&#8221; processing compared to the other (single) &#8220;src&#8221; attribute executions of the web application.<\/p>\n<p>How does the client wooooooorrrrrrrllllllldddd handle base64?   Well, for simple data &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Javascript btoa information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_win_btoa.asp'>btoa<\/a> (to base64)<\/li>\n<li><a target=_blank title='Javascript atob information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_win_atob.asp'>atob<\/a> (from base64)<\/li>\n<\/ul>\n<p>Why can&#8217;t we manage this new functionality in the one pass through the &#8220;onload&#8221; event logic?  Well, any self-respecting webpage content will contain both apostrophe and double quote characters (let alone line feeds and carriage returns) <font size=2>( but we can if we can get to a Javascript DOM statement like <\/font><font size=1>      document.getElementById(&#8216;ifsd&#8217;).srcdoc=atob((&#8221; + ioissrc).split(&#8216;;base64,&#8217;)[1]).replace(&#8216;&lt;\/bo&#8217; + &#8216;dy&gt;&#8217;, &#8216; &lt;style&gt; &#8216; + selectorplusis + &#8216;&lt;\/style&gt; &lt;\/bo&#8217; + &#8216;dy&gt;&#8217;);<\/font><font size=2> )<\/font>, making it hard to specify on the Javascript codeline constructing your &#8220;child&#8221; iframe but <font color=blue>now this new functionality uses<\/font> &#8230;<\/p>\n<p><code><br \/>\n <font color=blue>var documentURL='' + document.URL.split('#')[0];<\/font><br \/>\n<br \/> <br \/>\n function showBelow(ino) {<br \/>\n  if (ino.value.indexOf('#') != -1) {<br \/>\n    <font color=blue>if (('' + ino.value).indexOf(('' + ino.value).trim() + '        ') != -1) {<br \/>\n      if (documentURL.indexOf('?') != -1) {<br \/>\n        documentURL=documentURL.replace('?', '?window=popup&');<br \/>\n      } else {<br \/>\n        documentURL+='?window=popup';<br \/>\n      }<br \/>\n    } else if (('' + ino.value).indexOf(('' + ino.value).trim() + '    ') != -1) {<br \/>\n      if (documentURL.indexOf('?') != -1) {<br \/>\n        documentURL=documentURL.replace('?', '?window=y&');<br \/>\n      } else {<br \/>\n        documentURL+='?window=y';<br \/>\n      }<br \/>\n    } else if (('' + ino.value).indexOf(('' + ino.value).trim() + '  ') != -1) {<br \/>\n      if (documentURL.indexOf('?') != -1) {<br \/>\n        documentURL=documentURL.replace('?', '?refresh=y&');<br \/>\n      } else {<br \/>\n        documentURL+='?refresh=y';<br \/>\n      }<br \/>\n    }<\/font><br \/>\n    if (ourdecodeURIComponent(ino.value.substring(eval(1 + ino.value.indexOf('#'))).replace(\/NO\\%WAY\/g, 'NO%25WAY')).indexOf('{') != -1) {<br \/>\n     selectorplusis=ourdecodeURIComponent(ino.value.substring(eval(1 + ino.value.indexOf('#'))).replace(\/NO\\%WAY\/g, 'NO%25WAY'));<br \/>\n    }<br \/>\n    selectoris=ourdecodeURIComponent(ino.value.substring(eval(1 + ino.value.indexOf('#'))).replace(\/NO\\%WAY\/g, 'NO%25WAY')).split('{')[0].trim();<br \/>\n  }<br \/>\n  if (ino.value.trim() != '') {<br \/>\n    if (ino.value.split('#')[0].trim() == ''<font color=blue> && 1 == 2<\/font>) {<br \/>\n      document.getElementById('myh1').style.opacity='0.01';<br \/>\n      document.getElementById('myh3').style.opacity='0.01';<br \/>\n      document.getElementById('myinput').style.opacity='0.01';<br \/>\n      document.getElementById('ifgoeshere').innerHTML=\"&lt;iframe onload='checkif(this);' style='position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:7;' src='\" + document.URL + \"'&gt;&lt;\/iframe&gt;\";<br \/>\n    <font color=blue>} else if (ino.value.split('#')[0].trim() == '') {<br \/>\n      var his='&lt;html&gt;' + document.head.outerHTML + document.body.outerHTML + '&lt;\/html&gt;';<br \/>\n      var bahis='data:text\/html;base64,' + btoa(his);<br \/>\n      document.getElementById('ifgoeshere').innerHTML=\"&lt;iframe id=ifsd onload='checkif(this);' style='position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:7;' srcdoc=\\\"\\\"&gt;&lt;\/iframe&gt;&lt;iframe id=xifsd onload='checkif(this);' style='display:none;' src=\\\"\" + bahis + \"\\\"&gt;&lt;\/iframe&gt;\";<br \/>\n    <\/font>} else {<br \/>\n      document.getElementById('myh1').style.opacity='0.01';<br \/>\n      document.getElementById('myh3').style.opacity='0.01';<br \/>\n      document.getElementById('myinput').style.opacity='0.01';<br \/>\n      document.getElementById('ifgoeshere').innerHTML=\"&lt;iframe onload='checkif(this);' style='position:absolute;top:0px;left:0px;width:100%;height:100%;z-index:7;' src='\" + ino.value.split('#')[0].trim() + \"'&gt;&lt;\/iframe&gt;\";<br \/>\n    }<br \/>\n  }<br \/>\n }<br \/>\n<br \/> <br \/>\n function checkif(iois) {<br \/>\n  var ij, wois=null;<br \/>\n  if (iois != null) {<br \/>\n    <font color=blue>console.log('' + iois.src);<br \/>\n    if (('' + iois.src).indexOf('data:') == 0 && ('' + iois.src).indexOf(';base64,') != -1) {  \/\/ src=data:text\/html;base64,[base64HTMLContent] comes here<br \/>\n     var ioissrc=('' + iois.src);<br \/>\n     iois.src='';<br \/>\n     if (selectorplusis.indexOf(' BORDER') != -1) {<br \/>\n         eles=document.querySelectorAll(selectoris);<br \/>\n          for (ij=eval(-1 + eles.length); ij&gt;=0; ij--) {<br \/>\n            froms.push(eles[ij].outerHTML);<br \/>\n            tos.push('&lt;a onclick=\"alert(this.innerHTML);\" style=\"cursor:pointer;text-decoration:none;\" title=\"Border clickable\"&gt;' + eles[ij].outerHTML + '&lt;\/a&gt;');<br \/>\n          }<br \/>\n          for (ij=0; ij&lt;froms.length; ij++) {<br \/>\n            ioissrc=ioissrc.replace(froms[ij], tos[ij]);<br \/>\n          }<br \/>\n     }<br \/>\n     var xbodyt=atob(('' + ioissrc).split(';base64,')[1]).replace('&lt;\/bo' + 'dy&gt;', ' &lt;style&gt; ' + selectorplusis + '&lt;\/style&gt; &lt;\/bo' + 'dy&gt;');<br \/>\n     var bodyt=xbodyt.split('&lt;bo' + 'dy')[1];<br \/>\n     if (('' + documentURL).indexOf('window=') != -1) {<br \/>\n      if (('' + documentURL).indexOf('popup') != -1) {<br \/>\n       wois=window.open('', '_blank', 'top=0, left=0, width=600, height=600');<br \/>\n      } else {<br \/>\n       wois=window.open('', '_blank');<br \/>\n      }<br \/>\n      wois.document.write(atob(('' + ioissrc).split(';base64,')[1]).replace('&lt;\/bo' + 'dy&gt;', ' &lt;style&gt; ' + selectorplusis + '&lt;\/style&gt; &lt;\/bo' + 'dy&gt;'));<br \/>\n     } else if (('' + documentURL).indexOf('refresh=') != -1) {<br \/>\n      document.body.innerHTML=bodyt.substring(eval(1 + bodyt.indexOf('&gt;'))).split('&lt;\/bo' + 'dy&gt;')[0];<br \/>\n     } else {<br \/>\n      document.getElementById('myh1').style.opacity='0.01';<br \/>\n      document.getElementById('myh3').style.opacity='0.01';<br \/>\n      document.getElementById('myinput').style.opacity='0.01';<br \/>\n      document.getElementById('ifsd').srcdoc=atob(('' + ioissrc).split(';base64,')[1]).replace('&lt;\/bo' + 'dy&gt;', ' &lt;style&gt; ' + selectorplusis + '&lt;\/style&gt; &lt;\/bo' + 'dy&gt;');<br \/>\n     }<br \/>\n    } else { <\/font>  \/\/ relative URL src comes here, as well as srcdoc (we have discovered today 23\/1\/2021)<br \/>\n     console.log(1);<br \/>\n     var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n     console.log(2);<br \/>\n     if (aconto != null) {<br \/>\n      console.log(3);<br \/>\n      \/\/console.log(aconto);<br \/>\n      console.log(4);<br \/>\n      if (aconto.document) { aconto = aconto.document; }<br \/>\n       console.log(5);<br \/>\n       if (selectoris != '') {<br \/>\n        console.log(6);<br \/>\n        if (selectorplusis != '') {<br \/>\n         console.log(7);<br \/>\n         aconto.body.innerHTML+=' &lt;style&gt; ' + selectorplusis + '&lt;\/style&gt; ';<br \/>\n         console.log(8);<br \/>\n         if (selectorplusis.indexOf(' BORDER') != -1) {<br \/>\n          console.log(9);<br \/>\n          eles=aconto.querySelectorAll(selectoris);<br \/>\n          for (ij=eval(-1 + eles.length); ij&gt;=0; ij--) {<br \/>\n            froms.push(eles[ij].outerHTML);<br \/>\n            tos.push('&lt;a onclick=\"alert(this.innerHTML);\" style=\"cursor:pointer;text-decoration:none;\" title=\"Border clickable\"&gt;' + eles[ij].outerHTML + '&lt;\/a&gt;');<br \/>\n          }<br \/>\n          for (ij=0; ij&lt;froms.length; ij++) {<br \/>\n            aconto.body.innerHTML=aconto.body.innerHTML.replace(froms[ij], tos[ij]);<br \/>\n          }<br \/>\n        }<br \/>\n       } else {<br \/>\n        console.log('a');<br \/>\n        eles=aconto.querySelectorAll(selectoris);<br \/>\n        console.log('b');<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   <font color=blue>}<\/font><br \/>\n  }<br \/>\n }<br \/>\n<\/code><\/p>\n<p>We hope you revisit the recent <a title='Javascript document.querySelectorAll User Styled Clickable Border Tutorial' href='#j.sauscbt'>Javascript document.querySelectorAll User Styled Clickable Border Tutorial<\/a>&#8216;s improvements today&#8217;s work represents <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/qsall.html--GETME\" title=\"qsall.htm\">in the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.html--GETME\" title=\"qsall.htm\">qsall.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.htm\" title=\"Click picture\">live run<\/a> link is worth it to try the (Pure) Javascript meets CSS ideas above.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document.queryselectorall-client-pre-emptive-iframe-tutorial\/'>Javascript document.querySelectorAll Client Pre-emptive Iframe Tutorial<\/a>.<\/p-->\n<hr>\n<p id='j.sauscbt'>Previous relevant <a target=_blank title='Javascript document.querySelectorAll User Styled Clickable Border Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document.queryselectorall-user-styled-clickable-border-tutorial\/'>Javascript document.querySelectorAll User Styled Clickable Border Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript document.querySelectorAll User Styled Clickable Border Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/qsall_border_clickable.gif\" title=\"Javascript document.querySelectorAll User Styled Clickable Border Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript document.querySelectorAll User Styled Clickable Border Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Javascript document.querySelectorAll Primer Tutorial' href='#j.sapt'>Javascript document.querySelectorAll Primer Tutorial<\/a> has been &#8220;stretched&#8221; in functionality in two ways &#8230;<\/p>\n<ul>\n<li>yesterday&#8217;s user defined selector but static styling is now opened up to user defined styling as well &#8230;<\/li>\n<li>we wanted to allow a user defined CSS styling that involves the use of &#8221; BORDER&#8221; somewhere adds border clickable elements that satisfy the selector criteria <font color=blue>used in<\/font> &#8230;<\/p>\n<\/ul>\n<p><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       if (selectorplusis != '') {<br \/>\n        aconto.body.innerHTML+=' &lt;style&gt; ' + selectorplusis + '&lt;\/style&gt; ';<br \/>\n        if (selectorplusis.indexOf(' BORDER') != -1) {<br \/>\n          <font color=blue>eles=aconto.querySelectorAll(selectoris);<\/font><br \/>\n          for (ij=eval(-1 + eles.length); ij&gt;=0; ij--) {<br \/>\n            froms.push(eles[ij].outerHTML);<br \/>\n            tos.push('&lt;a onclick=\"alert(this.innerHTML);\" style=\"cursor:pointer;text-decoration:none;\" title=\"Border clickable\"&gt;' + eles[ij].outerHTML + '&lt;\/a&gt;');<br \/>\n          }<br \/>\n          for (ij=0; ij&lt;froms.length; ij++) {<br \/>\n            aconto.body.innerHTML=aconto.body.innerHTML.replace(froms[ij], tos[ij]);<br \/>\n          }<br \/>\n        }<br \/>\n       } else {<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 }<br \/>\n<\/code><\/p>\n<p>Yes, we needed <a target=_blank title='?' href='https:\/\/www.google.com\/search?q=onclick+just+for+border&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=onclick+just+for+border&#038;aqs=chrome..69i57j33i160.6888j1j4&#038;sourceid=chrome&#038;ie=UTF-8'>to ask for help<\/a>, and <a target=_blank title='Good help, thanks' href='https:\/\/www.sitepoint.com\/community\/t\/how-to-do-a-border-onclick\/334962'>got good help here<\/a>, thanks <font size=1>(for that <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=cnaeIAEp2pU'>doh!<\/a> moment)<\/font>.<\/p>\n<p> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/qsall.html-GETME\" title=\"qsall.htm\">Today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/qsall.htm\" title=\"Click picture\">live run<\/a> link is worth it to try the (Pure) Javascript meets CSS ideas above.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document.queryselectorall-user-styled-clickable-border-tutorial\/'>Javascript document.querySelectorAll User Styled Clickable Border Tutorial<\/a>.<\/p-->\n<hr>\n<p id='j.sapt'>Previous relevant <a target=_blank title='Javascript document.querySelectorAll Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document.queryselectorall-primer-tutorial\/'>Javascript document.querySelectorAll Primer Tutorial<\/a> is shown below.<\/p>\n<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; attribute 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<hr>\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='#d51477' onclick='var dv=document.getElementById(\"d51477\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/border\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51477' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d51498' onclick='var dv=document.getElementById(\"d51498\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/client-pre-emptive-iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51498' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d51508' onclick='var dv=document.getElementById(\"d51508\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/absolute-url\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51508' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d51508' onclick='var dv=document.getElementById(\"d51508\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/absolute-url\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51508' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d51533' onclick='var dv=document.getElementById(\"d51533\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/placeholder\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51533' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d51542' onclick='var dv=document.getElementById(\"d51542\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51542' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d51568' onclick='var dv=document.getElementById(\"d51568\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/class\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51568' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yes, adding a functionality layer on top of the recent Javascript document.querySelectorAll Share and Save Tutorial we turn our attention from document.querySelectorAll to &#8230; as well as a full scan of a CSS selection, allow for the honing in onto &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-document-queryselector-one-element-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":[2824,52,69,2830,112,1653,161,3543,2829,174,2525,210,211,212,3349,2539,281,1654,2276,2147,2806,367,1683,380,400,409,2730,1839,576,587,652,3542,663,1807,2415,3241,3552,861,1666,1922,870,2411,2643,997,1986,1976,2835,2854,2384,1105,1106,1866,1133,1137,1159,2506,2902,1212,1262,1319,3214,3551],"class_list":["post-51568","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-absolute","tag-absolute-url","tag-ajax","tag-atob","tag-attribute","tag-base64","tag-border","tag-border-click","tag-btoa","tag-button","tag-child","tag-class","tag-click","tag-client","tag-client-pre-emptive-iframe","tag-createelement","tag-css","tag-data-uri","tag-delimitation","tag-delimiter","tag-document-head","tag-dropdown","tag-dynamic","tag-email","tag-event","tag-external-javascript","tag-formdata","tag-genericization","tag-html","tag-iframe","tag-javascript","tag-javascript-document-queryselectorall","tag-jquery","tag-link","tag-localstorage","tag-multiline","tag-nth-of-type","tag-onclick","tag-ondblclick","tag-onerror","tag-onload","tag-parent","tag-placeholder","tag-programming","tag-proof-of-concept","tag-pseudo-class","tag-queryselector","tag-queryselectorall","tag-save","tag-script","tag-scripting","tag-select","tag-share","tag-sharing","tag-sms","tag-src","tag-srcdoc","tag-styling","tag-textarea","tag-tutorial","tag-user-interaction","tag-window-localstorage"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51568"}],"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=51568"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51568\/revisions"}],"predecessor-version":[{"id":51587,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51568\/revisions\/51587"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=51568"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=51568"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=51568"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}