HTML-dokumentin käsittely

Javascriptin document-elementiltä löytyvät kaikki tarvittavat metodit DOM-puun manipulointiin.

Elementtien etsiminen

Dokumenttipuusta voi etsiä haluamaansa HTML-elementtiä useammalla tavalla. Jos puun rakenne on tiedossa, sitä pitkin voi edeta elementistä toiseen children- ja parentElement-ominaisuuksia käyttämällä. HTML-elementin children on aina taulukon kaltaisena objekti, jossa ovat kyseisen elementin lapsielementit. Halutun lapsen voi valita hakasulkumerkintää ja indeksinumeroa käyttämällä. Elementin parentElement puolestaan on aina kyseisen HTML-elementin vanhempana oleva elementti.

var element = document.body.children[2];        // <body>-elementin kolmas lapsielementti
element.parentElement;                          // <body>-elementti

Usein ei kuitenkaan ole järkevää yrittää edetä puuta juuresta lähtien askel kerrallaan vaan on kannattavampaa yrittää etsiä haluttu elementti suoraan esimerkiksi id-attribuutin, tagin nimen taikka luokan perusteella. Näitä varten document-objektissa, ja kaikissa muissa HTML-elementtiobjekteissa, on joukko metodeja, jotka palauttavat tyypillisesti joko yhden HTML-elementin tai useamman elementin taulukkoa muistuttavina HTMLCollection- ja NodeList-objekteina.

Nämä metodit etsivät halutun kaltaisia elementtejä metodin kutsumiseen käytetyn elementin lapsista.

Metodi	Tehtävä	Esimerkki	Palauttaa
`getElementById()`	Etsi sellainen, jonka `id` on pyydetty.	`var menu = document.getElementById('menu')`	HTML-elementti
`getElementsByTagName()`	Etsi kaikki pyydetyt tagit.	`var form = document.getElementsByTagName('form')`	HTMLCollection
`getElementsByClassName()`	Etsi kaikki kysyttyä luokkaa olevat.	`menu.getElementsByClassName('current')`	HTMLCollection
`getElementsByName()`	Etsi `name`-attribuutilla.	`document.getElementsByName('osoite')`	NodeList
`querySelector()`	Etsi ensimmäinen, joka vastaa annettua CSS-valitsinta.	`menu.querySelector('.current')`	HTML-elementti / null
`querySelectorAll()`	Etsi kaikki, jotka vastaavat annettua CSS-valitsinta.	`content.querySelectorAll('p a[target="_blank"]')`	NodeList

Elementtien attribuutit

Kun HTML-elementti on saatu etsittyä objektina, sen attribuutteja voidaan tutkia ja muokata käyttämällä sen getAttribute()- ja setAttribute()-metodeja.

<!DOCTYPE html>
<html>
    <head lang="fi-fi">
        <title>Otsikko</title>
        <meta charset="utf-8">
        <style>
            h1 {color: red;}
        </style>
    </head>
    <body id="etusivu" class="sivu maanantai">
        <header> ... </header>
        <nav> ... </nav>
        <aside class="sivujuttu"> ... </aside>
        <article> ... </article>
        <footer> ... </footer>
    </body>
</html>

var body = document.body;
var id = body.getAttribute('id');                // "etusivu"
var luokat = body.getAttribute('class');         // "sivu maanantai"
body.setAttribute('id', 'takasivu');
var kieli = document.head.getAttribute('lang');  // 'fi-fi'

Elementin class-attribuutti löytyy lisäksi merkkijonona elementin ominaisuudesta className. Elementin class-attribuutissa määritellyt luokat ovat lisäksi käsiteltävissä elementin ominaisuudessa classList, johon voi lisätä luokkia add()-metodilla, poistaa niitä remove()-metodilla sekä nykyisen tilanteen mukan lisätä tai poistaa toggle()-metodilla. toggle() palauttaa samalla totuusarvon sen mukaan, lisättiinkö (true) vai poistettiinko (false) luokka.

Lisäksi classList-ominaisuudella on metodi contains(), jolla voi tarkistaa, onko elementillä kysytty luokka. Metodi palauttaa totuusarvon.

var body = document.body;
body.className;                   // "sivu maanantai"
body.classList;                   // DOMToken [ "sivu", "maanantai" ]
body.classList.add('testi');      // body.className = "sivu maanantai testi"
body.classList.remove('sivu');    // body.className = "maanantai testi"
body.classList.toggle('sivu');    // true, body.className = "sivu maanantai testi"
body.classList.contains('testi'); // true

Elementin sisältö

Käsillä olevan HTML-elementin HTML-muotoisen tekstisisältöä voi tutkia ja muokata sen ominaisuudella innerHTML. Tämä ominaisuus sisältää elementin sisällä olevan HTML-teksti merkkijonona. innerHTML-merkkijonon muuttaminen muuttaa kyseisen elementin sisällön.

...
<div id="sisalto">
    <p>Lorem ipsum <span>sit dolor</span> amet</p>
</div>
...

var sisus = document.getElementById('sisalto');
sisus.innerHTML;                            // "    <p>Lorem ipsum <span>sit dolor</span> amet</p>"
var sisempi = sisus.querySelector('span');
sisempi.innerHTML;                          // "sit dolor"
sisempi.innerHTML = "SIT DOLOR";
sisus.innerHTML;                            // "    <p>Lorem ipsum <span>SIT DOLOR</span> amet</p>"

Samaan tapaan toimii eleemntin outerHTML-ominaisuus, mutta se on merkkijono, joka sisältää myös elementin oman tagin.

sisus.outerHTML;
// "<div id="sisalto">
//     <p>Lorem ipsum <span>sit dolor</span> amet</p>
//  </div>"

Luonti, lisääminen ja poisto

HTML-dokumentin sisältöä voi muokata syöttämällä merkkijonona HTML-kieltä suoraan jonkin HTML-elementin sisällöksi innerHTML-ominaisuuden kautta. Usein on kuitenkin hyödyllistä hieman hienovaraisemmin vain lisätä tai poistaa yksittäisiä elementtejä.

Uuden elementin voi luoda document-objektin createElement()-metodilla. Luonnin jälkeen uudelle elementille voidaan antaa halutut attribuutit ja sisältö.

var skripti = document.createElement('script');
skripti.setAttribute('type', 'text/javascript');
skripti.setAttribute('src', 'http://petrit.net/www-kurssi/skriptit/omaskripti.js');

var otsikko = document.createElement('h1');
otsikko.setAttribute('class', 'paaotsikko important');
otsikko.innerHTML = 'Otsikon teksti';

Lopuksi uusi elementti lisätään DOM-puuhun haluttuun kohtaan. Lisätään edellä luotu skripti-muuttujaan tallennettu <script>-elementti dokumentin <head>-osion viimeiseksi ja lisätään otsikko-muuttujaan tallennettu <h1>-elementti <body>-osioon ensimmäiseksi (ennen nykyistä ensimmäistä elementtiä).

document.head.appendChild(skripti);

var body = document.body;
var eka = body.children[0];
body.insertBefore(otsikko, eka);

HTML-elementin voi poistaa DOM-puusta remove()-metodilla.

var sisalto = document.querySelector('#sisalto');
sisalto.remove();