JSFiddle - React, Tailwind, and code Playground

by Herbert CHAN

HTML

<h1>Favorite Hobbies</h1>
<ul>
    <li class="ball">Football</li>
    <li>Reading</li>
    <li class="ball">Table Tennis</li>
    <li class="ball">Badminton</li>
</ul> 

<p>Get ClassName : <span id="className"></span></p>
<p>Get Class : <span id="class"></span></p>

JavaScript

/********************* .className VS class **********************/
// get the class of the corresponding node
var parent = document.getElementsByTagName('ul')[0]; 
var firstChildName = parent.firstChild.nextSibling; 
// Use Google Chrome syntax, where _ space represent the firstChild. As we have leave some space there!!! 
// [Common Mistake]

/********************* .className  **********************/
// get the class of firstChild
var firstChildClass = firstChildName.className; 

// put the value found into span id="className"
var span1 = document.getElementById('className');
var span1Text = document.createTextNode(firstChildClass);
span1.appendChild(span1Text); 

/********************* VS class **********************/
var firstChildClass2 = firstChildName.getAttribute('class');

// put the value found into spann id="class"
var span2 = document.getElementById('class'); 
var span2Text = document.createTextNode(firstChildClass2); 
span2.appendChild(span2Text);