otsikko
Lisätään tänne uutta sisältöä
Väliotsikko
Mallikappale 2
Mallilista
Mallilistan sisällä on
tekstikappale listan sisällä
CSS
HTML
<div id="omat"> <h1>otsikko</h1> <div class="tunniste"> Lisätään tänne uutta sisältöä </div> <!-- kommentti --> <h2>Väliotsikko</h2> <div class="tunniste"> <p>Mallikappale 2</p> <ul> <li>Mallilista</li> <li>Mallilistan sisällä on <p>tekstikappale listan sisällä</p></li> </ul> </div> </div>
Javascript
let omat = document.getElementById("omat"); const nodetyypit = { 1: "ELEMENT_NODE", 3: "TEXT_NODE", 4: "CDATA_SECTION_NODE", 7: "PROCESSING_INSTRUCTION_NODE", 8: "COMMENT_NODE", 9: "DOCUMENT_NODE", 10: "DOCUMENT_TYPE_NODE", 11: "DOCUMENT_FRAGMENT_NODE" } // ensimmäinen lapsinode let node = omat.firstChild; // käydään läpi kaikki sisarusnodet do { console.log( node.textContent ); node = node.nextSibling; } while ( node ); //vrt. tähän console.log( "pelkät elementit"); let elements = omat.getElementsByTagName("*"); let element = elements[0]; // ensimmäinen elementti // käydään läpi kaikki sisaruselementit do { console.log( element.textContent ); element = element.nextElementSibling; } while ( element );
Konsoli