JSFiddle - React, Tailwind, and code Playground

by Uday Hiwarale

HTML

<html>

  <head>
    <meta charset="UTF-8">
    <title>DOM</title>

    <!-- assets here -->
  </head>

  <body>
    <div class="container">
      <h3 id="title">Hello World!</h3>

      <ul id="list" class="list red">
        <li class="item">HTML</li>
        <li class="item">CSS</li>
        <li class="item">JavaScript</li>
      </ul>
    </div>
  </body>

</html>

CSS

.red {
  color: red;
}

.item {
  font-weight: bold;
}

JavaScript

const NODE_TYPES = {
    1: "ELEMENT_NODE",
    2: "ATTRIBUTE_NODE",
    3: "TEXT_NODE",
    4: "CDATA_SECTION_NODE",
    5: "ENTITY_REFERENCE_NODE",
    6: "ENTITY_NODE",
    7: "PROCESSING_INSTRUCTION_NODE",
    8: "COMMENT_NODE",
    9: "DOCUMENT_NODE",
    10: "DOCUMENT_TYPE_NODE",
    11: "DOCUMENT_FRAGMENT_NODE",
    12: "NOTATION_NODE"
};

let element = document.getElementById('list');
console.log(element.nodeType);
console.log(NODE_TYPES[element.nodeType]);
console.log(element.nodeName);
console.log(element.tagName);

console.log('---------------------');

console.log(document.nodeType);
console.log(NODE_TYPES[document.nodeType]);
console.log(document.nodeName);