JSFiddle - React, Tailwind, and code Playground

by JuanMa Garrido

HTML

<p id="name">juanma<p>
     <ul id="guitar-players">
        <li id="jimi" class="rock blues">Jimi Hendrix</li>
        <li class="blues"><a id="clapton" href="http://www.ericclapton.com/">Eric Clapton</a>a></li>
        <li class="rock">Eddie Van Halen</li>
        <li class="rock">Yngwie Malmsteen</li>
        <li class="jazz">Django Reinhardt</li>
        <li class="blues"><a href="http://www.bbking.com/">B.B.King</a></li>
        <li class="blues rock">Gary Moore</li>
     </ul>

JavaScript

// document.getElementById()
console.info("document.getElementById()");
 
var myName = document.getElementById("name");
console.log(myName.innerHTML);

// document.getElementsByClassName
console.log( "\n" );
console.info("document|element.getElementsByClassName()");

var bluesGuitarPlayers = document.getElementsByClassName('blues')
var rockGuitarPlayers = document.getElementsByClassName('rock')
console.log(rockGuitarPlayers);

console.log( "---" );

// or to restrict the search in an element...
var myList = document.getElementById("guitar-players");
var myBluesGuitarPlayers = myList.getElementsByClassName('blues')
var myRockGuitarPlayers = myList.getElementsByClassName('rock')
console.log(myRockGuitarPlayers);

// won't work as an HTMLCollection is not exactly an array
/*
myRockGuitarPlayers.forEach(...)
*/

console.log( "---" );

console.log( myRockGuitarPlayers[0].innerHTML )
console.log( myRockGuitarPlayers.item(0).innerHTML )
console.log( myRockGuitarPlayers.namedItem("jimi").innerHTML )

console.log( "---" );

// ...but it has a length property
for (var i = 0; i < myRockGuitarPlayers.length; ++i) {
	var link = myRockGuitarPlayers[i];  
  console.log(link.innerHTML);
}

// document.getElementsByTagName
console.log( "\n" );
console.info("document|element.getElementsByTagName()");

var links = document.getElementsByTagName('a')

// or to restrict the search in an element...
var myList = document.getElementById("guitar-players");
var linksGuitarPlayers = myList.getElementsByTagName('a')

console.log( linksGuitarPlayers[0].href )
console.log( linksGuitarPlayers.item(0).href )
console.log( linksGuitarPlayers.namedItem("clapton").href )