JSFiddle - React, Tailwind, and code Playground

by Professor Tom DeDonno

HTML

<div id="testingArea">jQuery has become the most popular <span>JavaScript</span> framework. A framework is an enhanced/mature <span>JavaScript</span> library, that simplifies the most used <span>JavaScript</span> tasks. 
     <p>For example, jQuery uses the sizzle engine to simplify the selection of DOM elements. In standard, <span>JavaScript</span> a programmer uses either getElementByID or getElementByTabName, but with jQuery the programmer has simpler selection mechanism. They simply use the jQuery object $, followed by a CSS selector in parenthesis, for example <em id="story1">to select the element with ID of story1, one just uses $(&quot;#story1&quot;).</em> Not only does sizzle simplify <span>JavaScript</span> tag selection, but with the method css, one can set CSS properties rather than having to use the <span>JavaScript</span> <a href="http://www.w3schools.com/jsref/dom_obj_style.asp">style object</a>.</p></div>
JavaScript Pseudo code that has been tested:<br />
<input type="button" onclick="selectID( 'story1' ).style.color='red'" value="#story1" />
<input type="button" onclick="myChildNodes( selectID('testingArea'), 'span' );"
       value="span children of testingArea red" />
<input type="button" onclick="myGrandChildNodes( selectID( 'testingArea' ), 'span', 'blue' );" value="span grandchildren of testingArea blue" />
<input type="button" onclick="mySiblings( selectID( 'testingArea' ), 'span', 'span', 'lime' );"
value="span siblings inside testing area lime" />

JavaScript

selectID = function( id ) {return document.getElementById( id );}
myChildNodes = function( element, childTag, color ) { 
    var x = element.childNodes;
    //nodeName return upper case tag names
    childTag = childTag.toUpperCase();
    if( color == undefined ) color = 'red';
    for( var i=0; i < x.length; ++i ) {
        if( x[i].nodeType == "1" && x[i].nodeName == childTag )
            x[i].style.color = color;
 			//alert( "hit " + x[i].nodeName + ", " + x[i].nodeType );
         //else alert( "not a hit " + x[i].nodeName + ", " + x[i].nodeType ); 
    }
}
myGrandChildNodes = function( element, grandChildTag, color ) {
    var x = element.childNodes;
    //alert( "x is " + x.length );
    for( var j = 0; j < x.length; ++j ) {
        if( x[j].nodeType == "1" ) myChildNodes( x[j], grandChildTag, color );
        //else alert( x[j].nodeType + ", " + x[j].nodeName );
        }
}
/* ptd this code will miss the span siblings inside of the p tag,
   but for pseudo code this is good enough */
mySiblings = function( element, child, sibling, color ) {
    var x = element.childNodes;
    child = child.toUpperCase( );
    sibling = sibling.toUpperCase( );
    var foundChild = false;
    for( var j = 0; j < x.length ; ++j ) {
        if( foundChild && x[j].nodeType == "1" && x[j].nodeName == sibling ) {
            //alert( "We have a hit at " + j );
        	x[j].style.color = color;
    	} else
        if( x[j].nodeType == "1" && x[j].nodeName == child ) 
            foundChild = true;
    }
} //end mySiblings
/* from http://jsfiddle.net/Mottie/xcqpF/1/light/  */