JSFiddle - React, Tailwind, and code Playground

by domenlightenment

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<ul><!-- comment -->
<li id="A"></li>
<li id="B"></li>
</ul>

JavaScript

//cache selection of the ul
var ul = document.querySelector('ul');

//What is the parentNode of the ul?
console.log(ul.parentNode.nodeName); //logs body

//What are the childNodes of the ul? (WARNING: line breaks are text nodes!) 
console.log(ul.childNodes); //logs array containing all child nodes including text nodes

//What is the first child of the ul?
console.log(ul.firstChild.nodeName); //logs comment

//What is the last child of the ul?
console.log(ul.lastChild.nodeName); //logs text

//What is the nextSibling of the first li?
console.log(document.getElementById('A').nextSibling.nodeName); //logs text

//What is the previousSibling of the last li?
console.log(document.getElementById('B').previousSibling.nodeName); //logs text