DOM-esimerkkejä element

CSS

HTML

Javascript

// haetaan divin sisältä ensimmäinen a-elementtin
let div = document.getElementById("tunniste");
let a = div.getElementsByTagName("a")[0];

// lisätään sivulle näkyviin löydetyn linkin osoite
div.appendChild( document.createTextNode( a.getAttribute("href") ) );

// muutetaan linkki osoittamaan yliopiston pääsivulle
a.setAttribute("href", "https://www.jyu.fi/");
a.setAttribute("title", "Jyväskylän yliopisto");
a.textContent = "Jyväskylän yliopisto";

// luodaan uusi linkki web-julkaiseminen kurssin sivulle
let linkki = document.createElement("a");
linkki.setAttribute("href", "https://appro.mit.jyu.fi/itkp1011");
linkki.setAttribute("title", "Web-julkaiseminen");
linkki.textContent = "ITKP1011 Web-julkaiseminen";
/*
        'beforebegin': Before the targetElement itself.
        'afterbegin': Just inside the targetElement, before its first child.
        'beforeend': Just inside the targetElement, after its last child.
        'afterend': After the targetElement itself.
*/
// lisätään uusi linkki divin ensimmäiseksi lapseksi. 
// Sama onnistuisi insertBefore-metodilla
div.insertAdjacentElement("afterbegin", linkki);

// poistetaan span-elementit joilla on title="turha"
let turhat = div.querySelectorAll('span[title="turha"]');
for(let t of turhat) {
   t.remove();
}

// saman poistamisen kuin edellä voi tehdä myös seuraavalla tavalla:
/*
let turhat = div.getElementsByTagName("span");

for(let t of turhat) {
   if ( t.hasAttribute("title") ) {
     t.remove();
   }
}*/

CSS

HTML

Javascript

Konsoli