DOM Node Inspector

by mmansion

HTML

<div id="parent">
  
  <div id="child1" class="inner">
    <h1 class="letter">A</h1>
  </div>
    
  <div id="child2" class="inner">
    <h1 class="letter">B</h1>
  </div>
  
</div>

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('parent');

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

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.previousSibling);
 console.log(n.textContent);
}