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> <![CDATA[ esim. skript-elementtien sisällä on koodi hyvä määritellä CDATA-lohkoksi jolloin erikoismerkit (<, > ja &) eivät riko dokumenttia Huom. Tämä esimerkkikoodi hajoaa tässä testiympäristössä. Jos muutat niin poista CDATA-osuus ]]> <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" } // childNodes ominaisuus sisältää kaikki lapsinodet. Huom. // tarkoittaa siis kaikkia elementtejä + tekstinodeja, kommentteja // jne. // aika usein pelkkä rivinvaihto on oma tekstinode for(let node of omat.childNodes ) { if ( node.nodeValue ) { console.log( nodetyypit[ node.nodeType ], node.nodeValue); } else { // kyseessä on elementti, jonka koko tekstisisällön (kaikista lapsista yhdistettynä) saa textContent-ominaisuudella console.log( nodetyypit[ node.nodeType ], node.textContent.substr(0, 20)); } }
Konsoli