Javascript document.querySelectorAll Primer Tutorial
โœ‚๐Ÿƒ๐Ÿพโ€โ™€๏ธ๐Ÿƒ๐Ÿผโ€โ™‚๏ธ
๐Ÿ“–

Javascript document.querySelectorAll Primer Tutorial

Javascript document.querySelectorAll Primer Tutorial

โ€œPure Javascriptโ€ versus โ€œjQueryโ€ 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 use, and we have used the very apt (for todayโ€™s topic) jQuery CSS on occasions. But for todayโ€™s proof of concept test run of โ€ฆ



document.querySelectorAll([CSS-selector]);

โ€ฆ itโ€™s all โ€œPure Javascriptโ€. In todayโ€™s qsallโšซhtml HTML and โ€œPure Javascriptโ€ code you will not find the string โ€œdocument.querySelectorAllโ€ anywhere because our web application is โ€ฆ

  • just some header HTML elements and one HTML input type=text โ€œtextboxโ€ element and one containing div element and one input type=text to avoid โ€œtabbing outโ€ annoyances โ€ฆ
  • โ€œtextboxโ€ accepts a relative URL in two parts as per โ€ฆ


    [relativeURLTo-//www.rjmprogramming.com.au/]#[CSS-selector]

  • that relative URL is the โ€œsrcโ€ property to an HTML iframe element that overlays (made to be barely visible) header HTML elements and one HTML input type=text โ€œtextboxโ€ element โ€ฆ and whose โ€ฆ
  • โ€œonloadโ€ event logic goes โ€ฆ


    function checkif(iois) {

    var ij;

    if (iois != null) {

    var aconto = (iois.contentWindow || iois.contentDocument);

    if (aconto != null) {

    if (aconto.document) { aconto = aconto.document; }

    if (selectoris != '') {

    eles=aconto.querySelectorAll(selectoris);

    for (ij=0; ij<eles.length; ij++) {

    eles[ij].style.border='1px dashed red';

    }

    }

    }

    }

    }

โ€ฆ that you can try for yourself with todayโ€™s liveโœ‚run link.

If this was interesting you may be interested in this too.

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *