otsikko
Lisätään tänne uutta sisältöä
Väliotsikko
Mallikappale 2
Mallilista
Mallilistan sisällä on
tekstikappale listan sisällä
Toinen väliotsikko
Mallikappale 3
CSS
HTML
otsikko
Lisätään tänne uutta sisältöä
Väliotsikko
Mallikappale 2
Mallilista
Mallilistan sisällä on
tekstikappale listan sisällä
Toinen väliotsikko
Mallikappale 3
Javascript
// haetaan kaikki elementit joilla class="tunniste" // getElementsByClassName palauttaa aina listan vaikka löytyisi vain yksi let tunniste = document.getElementsByClassName("tunniste"); // tulostetaan löydettyjen elementtien tekstisisältö for(let t of tunniste) { // textContent yhdistää kaikkien elementin lapsielementtien tekstisisällön console.log( t.textContent ); } let omat = document.getElementById("omat"); // haetaan kaikki elementit joilla class="tunniste" // getElementsByTagName palauttaa aina listan vaikka löytyisi vain yksi // getElementsByTagName löytyy kaikilta elementeiltä. Tässä haetaan // vain edellä haetun div-elementin alta löytyvät otsikot let h2 = omat.getElementsByTagName("h2"); // tulostetaan löydettyjen elementtien tekstisisältö // getElementsByTagName palauttaa aina listan for(let h of h2) { console.log( h.textContent ); } // querySelector() ja querySelectorAll() kannattaa käyttää silloin // kun halutaan hyödyntää monimutkaisempia css-valitsimia // querySelector() palauttaa ensimmäisen elementin ja querySelectorAll() // palauttaa kaikki sopivat console.log("p-elementit, jotka ovat div-elementtien jälkeläisiä"); let p = omat.querySelectorAll("div p"); for(let h of p) { console.log( h.textContent ); } console.log("p-elementit, jotka ovat div-elementtien lapsia"); p = omat.querySelectorAll("div > p"); for(let h of p) { console.log( h.textContent ); }
Konsoli