Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Node Types Interactive Example</title>
<style>
#info {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
#output {
border: 1px solid #ccc;
padding: 10px;
}
button {
cursor: pointer;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="info">
<!-- This is a comment node -->
<p>Element node with a <span>child element node</span> and some text.</p>
</div>
<button onclick="displayNodeTypes()">Show Node Types</button>
<div id="output">Node types will be displayed here.</div>
<script>
function displayNodeTypes() {
const infoDiv = document.getElementById('info');
const outputDiv = document.getElementById('output');
outputDiv.innerHTML = ''; // Clear previous output
const nodeTypes = [];

// Iterate over all child nodes of the div
infoDiv.childNodes.forEach(node => {