JSFiddle - React, Tailwind, and code Playground

by Alma Grace

HTML

<body>
    <h1>This is a header!</h1>
    <p id="excitingText">
      This is a paragraph! <em>Excitement</em>!
    </p>
    <p>
      This is also a paragraph, but it's not nearly as exciting as the last one.
    </p>
     <ul id="beverage">
         <li>Coffee</li>
         <li>Tea</li>       
      </ul>
  </body>

JavaScript

// -- ALMA GRACE DOM TREE

//displays all the text content without the tag. TESTED
//var text1 = document.body.textContent;
//alert (text1);

//displays all the text content AND the tags. TESTED
//var text2 = document.body.innerHTML;
//alert (text2);

//--list
/*
var list = document.getElementsById("beverage");
var listitem1 = list.textContent[0];
alert (list1);
*/

//syntax
//var list=document.getElementsByTagName("UL")[0]
//list.getElementsByTagName("LI")[0].innerHTML="Milk";

/*
    var body = document.getElementsByTagName("body")[0];
    var child = body.firstChild;
    alert (child.tagName); 
        // as per above example it is a h1 TESTED
    alert (child.textContent); 
//not running
    var next = child.nextSibling;
   alert (next.tagName); // as per above example it is a p

*/


//-- the first child of the document node is the html node.TESTED
//var htmlNode = document.childNodes[0];
//alert(document.childNodes[0]);

//-- the second child of the document node is the html node. TESTED
//var bodyNode = document.childNodes[1];
//alert(document.childNodes[1]);

//-- the html nodes parent is the document. TESTED
//var htmlNode = document.childNodes[0];
//if( htmlNode.parentNode == document ) {
//alert( "Hooray!  The HTML node's parent is the document object!" );}

//-- resulting name of the paragraphNode is #text. TESTED
//var htmlNode = document.childNodes[0];
//var bodyNode = document.childNodes[1];
//var paragraphNode = bodyNode.childNodes[1];
//alert( bodyNode.childNodes[1].nodeName);

/*
var paragraphNode = document.getElementById("excitingText");
if(document.firstChild.lastChild.childNodes[1] == paragraphNode) {
  alert( "paragraphNode IT IS INDEED!" );}
*/

// TESTED         
/*var allParagraphs = document.getElementsByTagName('p');
for (var i=0; i < allParagraphs.length; i++ ) {
  //  do your processing here, using
  //  "allParagraphs[i]" to reference
  //  the current element of the
  //  collection
        
  alert( "This is paragraph " + i + "!"...