DOM Node Inspector

HTML

<ul id="level-1"><li id="level0" class="deviceList deviceListTitle" title="1">DCU Campus<span id="tempID" class="glyphicon glyphicon-cog pull-right"></span>
<ul><li id="level1" class="deviceList deviceListTitle">Car Park<span id="tempID" class="glyphicon glyphicon-cog pull-right dropdown-toggle"></span>
<ul></ul></li>
<li id="level1" class="deviceList deviceListTitle">Invent Center<span id="tempID" class="glyphicon glyphicon-cog pull-right dropdown-toggle"></span>
<ul><li id="level2" class="deviceList deviceListTitle">Level 0<span id="tempID" class="glyphicon glyphicon-cog pull-right"></span></li>
<li id="level2" class="deviceList deviceListTitle">Level 1<span id="tempID" class="glyphicon glyphicon-cog pull-right"></span></li>
<li id="level2" class="deviceList deviceListTitle">Level 2<span id="tempID" class="glyphicon glyphicon-cog pull-right"></span></li>
<li id="level2" class="deviceList deviceListTitle">Level 3<span id="tempID" class="glyphicon glyphicon-cog pull-right"></span></li>
</ul></li>
</ul></li><li id="level0" class="deviceList deviceListTitle" title="2">Trinity Campus<span id="tempID" class="glyphicon glyphicon-cog pull-right"></span>
<ul><li id="level1" class="deviceList deviceListTitle">Arts Block<span id="tempID" class="glyphicon glyphicon-cog pull-right dropdown-toggle"></span>
<ul></ul></li>
</ul></li></ul>

CSS

#parent {
  width: 50px;
  height: 50px;
  padding: 25px;
  background: lightgreen;
  border: thin black solid;
  margin: 10px;
}

#child1 {
  width: 25px;
  height: 25px;
  background: lightblue;
  border: thin black solid;
  margin: 0 auto;
  margin-bottom: 5px;
  text-align: center;
  line-height: 25px;
}

#child2 {
  width: 25px;
  height: 25px;
  background: lightblue;
  border: thin black solid;
  margin: 0 auto;
  text-align: center;
  line-height: 25px;
}

JavaScript

//The Node object represents a node in the HTML document

var parentNode = document.getElementById('level-1');

var childBoxes = document.getElementsByClassName('level1');

inspectNode(parentNode);

for(var i = 0; i < childBoxes.length; i++) {
  inspectNode(childBoxes[i]);
}

function inspectNode(n) {
 console.log('-----------');
 console.log(n.attributes);
 console.log(n.baseURI);
 console.log(n.childNodes);
 console.log(n.firstChild);
 console.log(n.lastChild);
 console.log(n.localName);
 console.log(n.namespaceURI);
 console.log(n.nextSibling);
 console.log(n.nodeName);
 console.log(n.nodeType);
 console.log(n.nodeValue);
 console.log(n.prefix);
 console.log(n.previousSibling);
 console.log(n.textContent);
}