Usein luetaan elementtejä, joilla on luonnollisesti olemassa lapsia (esim. table, ul, li, form).
Elementti voidaan tällöin sijoittaa muuttujaan ja lapsia voidaan kutsua samaan tapaan kuin taulukoiden elementtejä kutsutaan.
document.getElementById("kutsuttava").innerHTML
var x = document.getElementById("myForm"); //äitielementti on x document.getElementById("demo").innerHTML = x["fname"].value //lomakkeen kenttä, jonka name="fname"
var items = document.getElementsByTagName('li'); //haetaan kaikki lomakkeen listaelementit, niistä tulee taulukko eli array() for (var i = 0; i < items.length; i++) { items[i].className = 'listitem'; //vaihdetaan luokkaa (css) }
Esimerkki: ohjelma lukee listan elementit yksitewllen ja antaa niille ensin sisällön. Sen jälkeen se muuttaa silmukalla kaikkien css-luokan.
<h1>Minä</h1> <ul> <li>Lempinimi: </span> <li>Suosikit: </span> <li>Kotipaikka: </span> </ul> <script> document.body.style.fontFamily = 'Arial, sans-serif'; document.getElementById('nickname').innerHTML = 'Leevi Kettu'; document.getElementById('favorites').innerHTML = '35'; document.getElementById('hometown').innerHTML = 'Roi City'; var items = document.getElementsByTagName('li'); for (var i = 0; i < items.length; i++) { items[i].className = 'listitem'; } </script>
Lomakkeella saadaan käyttäjän syötteet (input) www-järjestelmässä.
JavaScriptin DOM-metodit mahdollistavat lomakkeen lukemisen, muokkaamisen ja täyttämisen.
Kun lomake on olemassa html-merkkauksessa, saat luettua sen tietoja muuttujaan:
var x = document.getElementById("myForm"); <form id="myForm"> First name: <input type="text" name="fname" value="Donald"> <br> Last name: <input type="text" name="lname" value="Duck"> <br> <input type="submit" value="Submit"> </form> <script> function haeArvot() { var x = document.getElementById("myForm"); document.getElementById("demo").innerHTML = x["fname"].value +" "+ x["lname"].value; } </script> <p id="demo"> </p> <button onclick="haeArvot()">Hae lomakkeen arvot </button> </script>
var x = document.createElement("FORM");
function myFunction() { var x = document.createElement("FORM"); x.setAttribute("id", "myForm"); document.body.appendChild(x); var y = document.createElement("INPUT"); y.setAttribute("type", "text"); y.setAttribute("value", "Donald"); document.getElementById("myForm").appendChild(y); }
<!DOCTYPE html> <html> <head> <title>DOMdemo</title> <meta charset="UTF-8"> <script> function myFunction() { var x = document.createElement("FORM"); //luodaan lomake x.setAttribute("id", "myForm"); //annetaan lomakkeelle id document.body.appendChild(x); //lisätään lomake dokumentin lapseksi var y = document.createElement("INPUT"); //luodaan uusi input y.setAttribute("type", "text"); // annetaan inputille tyyppi y.setAttribute("value", "Donald"); //annetaan inputille arvo document.getElementById("myForm").appendChild(y); //lisätään input lomakkeen lapseksi } </script> </head> <body onload="myFunction()"> </body> </html>