DOM-esimerkkejä element

CSS

HTML

Javascript

let div = document.getElementById("tunniste");

let h2 = div.getElementsByTagName("h2")[0];
// h2-elementin sisällä on useita tekstinodeja
// a-elementin nodeValue on null
let counter = 1;
for(let node of h2.childNodes) {
    console.log(counter++, node.nodeValue);
}
// textContent yhdistää kaikki textNodet rekursiivisesti
console.log( h2.textContent );

let kentat = div.getElementsByTagName("input");

// tulosta kenttien arvot. Koita muuttaa ensin kentän sisältöä
// value-html-attribuutin arvo pysyy vakiona. javascript objektin value-
// attribuutti sisältää syötetyn arvon
for(let input of kentat) {
  console.log(input.getAttribute("value"), input.value);

}

// miten poistetaan joka toinen kenttä?

let labelit = div.getElementsByTagName("label");

// miksi seuraava ei toimi eli tulostaisi ja poistaisi parilliset 
// labelit-lista muokkaantuu "lennosta"
/*
for(let i=1; i<labelit.length+1; i++) {
  if ( i%2 == 0 ) {
      console.log( labelit[i-1].textContent, labelit.length );
      labelit[i-1].remove();
  }
}
*/
// seuraava toimii

for(let i=labelit.length; i>0; i--) {
  if ( i%2 == 0 ) {
      console.log( labelit[i-1].textContent, labelit.length );
      labelit[i-1].remove();
  }
}

TIEA2120 Web- käyttöliittymien ohjelmointi -kurssin esimerkki

CSS

HTML

Javascript

Konsoli