Beispiel:JS-element.nodeType.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Node-Inspektor</title>
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">    
  <style>
p,
li {
	width: 60%;
}

aside,
div {
	float: right;
	clear: right;
	width: 33%;
	height: 20%;
	background: #e6f2f7;
	padding: 1em;
}

h2,
h3,
h4 {
	background: #ffebe6;
	margin-top: 5px;
	max-width: 50%; 
}
img {
 	float: right;
	clear: right;
	width: 10em;
}

main { border: thin dotted;}
	
    #output {
      margin-top: 1em;
      padding: 1em;
      border: thin solid #c82f04;
      background-color: #fed8cd;
    }
    #output pre {
      margin: 0;
			font-family: monospace;
      white-space: pre-wrap;
    }
  </style>
</head>
<body>
  <h1>Node-Inspektor</h1>
  <main>
  <p class="foo">Klick' auf jedes Element, um Details zu erfahren:</p>
<p id="derText">Text mit <b>fettem Text</b> und <u>unterstrichenem Text</u> <img src="https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg" alt="Self-Logo"></p>
	<h2>Ober-Überschrift</h2>
	<div id="bar">
		<h3>Überschrift-Div</h3>
		<p>Absatz-Div</p>
	</div>
	<aside>
		<h3>Überschrift-aside</h3>
		<p>Absatz-aside</p>
	</aside>
	<h3>Unter-Überschrift</h3>
	<ul>
		<li>Pizza</li>
		<li>Pasta</li>
		<li>Prosciutto</li>
	</ul>
	<h3>Unter-Überschrift</h3>
	<ol>
		<li>Pizza</li>
		<li>Pasta</li>
		<li>Prosciutto</li>
	</ol>
  </main>
  <div id="output"><strong>Output:</strong> <pre></pre></div>

  <script>
    document.body.addEventListener('click', function (event) {
      const clickedElement = event.target;

      const nodeType = clickedElement.nodeType;
      const nodeName = clickedElement.nodeName;
      const childNodes = clickedElement.childNodes;

      // Create a readable child nodes list
      const childNodesInfo = Array.from(childNodes)
        .map(node => `Type: ${node.nodeType}, Name: ${node.nodeName}, Content: "${node.textContent.trim()}"`)
        .join('\n');

      // Update the output element
      const output = document.querySelector('#output pre');
      output.textContent = `Node Type: ${nodeType}\nNode Name: ${nodeName}\nChild Nodes:\n${childNodesInfo}`;
    });
  </script>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-element.nodeType.html&oldid=100698“