JSFiddle - React, Tailwind, and code Playground

by domenlightenment

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<!DOCTYPE html>
<body>

<a href="#">Hi</a>

</body>
</html>

JavaScript

// This is DOCUMENT_TYPE_NODE or nodeType 10 because Node.DOCUMENT_TYPE_NODE === 10
console.log(
    window.document.doctype.nodeName, //logs html
    window.document.doctype.nodeType //logs 10
);

// This is DOCUMENT_NODE or nodeType 9 because Node.DOCUMENT_NODE === 9
console.log(
    window.document.nodeName, //logs #document
    window.document.nodeType //logs 9
);

// This is DOCUMENT_FRAGMENT_NODE or nodeType 11 because Node.DOCUMENT_FRAGMENT_NODE === 11
console.log(
    window.document.createDocumentFragment().nodeName, //logs #document-fragment
    window.document.createDocumentFragment().nodeType //logs 11
);

// This is ELEMENT_NODE or nodeType 1 because Node. ELEMENT_NODE === 1
console.log(
    window.document.querySelector('a').nodeName, //logs A
    window.document.querySelector('a').nodeType //logs 1
);

// This is TEXT_NODE or nodeType 3 because Node.TEXT_NODE === 3
console.log(
    window.document.querySelector('a').firstChild.nodeName, //logs #text
    window.document.querySelector('a').firstChild.nodeType //logs 3
);

// This is ATTRIBUTE_NODE or nodeType 2 because Node.ATTRIBUTE_NODE === 2
console.log(
    window.document.querySelector('a').attributes['href'].nodeName, //logs href
    window.document.querySelector('a').attributes['href'].nodeType //logs 2
);