Javascript DOM

Aanbod komen in deze les:

getElementById() Properties: innerHTML, style, className, Events.

Inleiding

Javascript werkt in browsers dit betekend dat javascript ook samen werkt met HTML. (Als dat niet het geval was zou het veel van het effect missen).Bijna alle eigenschappen van HTML zijn te bewerken met javascript en dat kan tot leuke dingen lijden. Daarnaast zijn er in de loop van de tijd wat features bij gekomen. Helaas zijn er verschillen tussen browsers maar we gaan met deze lessen niet diep genoeg om daar tegenaan te lopen. We gaan niet in op zeer incourante browsers. (Alle uitzonderingen zijn wat onoverzichtelijk).

Volgorde

Aangezien we hier javascript laten samen werken met HTML is van belang dat je de goede volgorde aanhoud. Alvorens een functie (zie later deze les) aan te roepen moet deze al wel gedefineerd zijn binnen de javascript. Hetzelfde geld ook voor elementen binnen de HTML die worden aangeroepen worden binnen een script.

DOM en javascript

'Paden' naar elementen

Deze punten geven een pad aan (hoe je vanuit de basis van het (HTML) document kan gaan en hoe je daar functies of functionaliteit aan kan hangen. De punten zijn verbindingen tussen ELEMENTEN (html), PROPERTIES/ATTRIBUTES en EVENTS. De id attribute kan dan worden gebruikt om het elementen te vinden.

De manier om een HTML element op te vragen en te bewerken is id's opvragen. Dit kan direct vanuit de document (root). Het is dus van belang dat id's altijd binnen een document uniek zijn. Dit kan met de getElementById () functie. Neem de volgende html:

<div id="veld1">
	<p>test text</p>
</div>

De div heeft een id met naam "veld1". Deze kan wordenaangeroepen met het volgende javascript:

document.getElementById('veld1');

Properties / Attributes

Na het opvragen van en element door de id kun je de attributes en nog wat andere dingen lezen en schrijven. De belangrijkste zijn

className:Hiermee kan van een element een class (die door OOP niet gebruikt kan worden) gelezen en gezet worden
innerHTML: Hier mee wordt de gehele HTML inhoud geschreven tussen de betreffende tags
style: alle objecten binnen de style attribute kunnen worden gezet (class met stylesheets is vaak handiger)
value: de waarde van een formelement

Style (object)

Er zijn binnen deze schijf wijze een aantal dingen aan te passen. Een style is een voorbeeld. Als je bijvoorbeeld in de div met id veld1 alle text een andere kleur wilt geven (zeg rood) kan dat als volgt.

document.getElementById('veld1').style.color = '#F00';

Nu wordt er naar de stylesheet van het dit specifiek object verwezen en de property wordt op rood (of #F00) gezet met het "=" teken. Op deze manier zijn alle attibutes van een object aan te passen. Om typ werk te voorkomen kan element ook in een variabele worden gezet: Als we kijken naar het vorige stuk en we daar het pad naar veld1 willen opslaan gaat dat als volgt:

var objVeld1;
objVeld1 = document.getElementById('veld1');

nu kunnen we de inhoud bewerken door de volgende bewerking:

objVeld1.style.color = '#F00';

innerHTML

Een andere handige attribute is innerHTML. Deze kan zowel gelezen als geschreven worden.Als binnen het objVeld1 nu Html staat kan deze in een variabele worden gezet als volgt:

var newHTMLobj;
var addHTMLobj;

addHTMLobj = 'nieuwe tekst binnen het gebeuren';
newHTMLobj = objVeld1.innerHTML;

objVeld1.innerHTML = newHTMLobj + addHTMLobj;

className

Hier zie je een voorbeeld waar je de class kan lezen en of aanpassen. Dit kan met de property className. (met de hoofdletter N). Het voorbeeld laat zien dat je doormiddel van de property classname van div1 de naam van "text" omschrijft naar "nieuw"

<style>
	.text { border:1px solid #F00; }
	.nieuw { border:5px solid #0F0; }
</style>
...

<div id="div1" class="text">
	hier dus wat text
</div>
<div id="div2" class="text">
	hier dus wat text
</div>

<script type="text/javascript">
	document.getElementById('div1').className = 'nieuw';
</script>

value en forms

De name kunnen we gebruiken bij formulieren. De name van een input, textarea of select kunnen we direct uitlezen. Deze werkt ongeveer zoals de id en getElementById functie.

<form id="mijnformulier">
	<fieldset>
		<legend>naw</legend
		<span>
			<label>Voornaam</label>
			<input type="text" name="voornaam" value="jan" />
		</span>
		<span>
			<label>Achternaam</label>
			<input type="text" name="achternaam" value="jansen" />
		</span>
	</fieldset>
	<fieldset>
		<legend>verstuur als dit goed is</legend
		<span>
			<label>dit is juist</label>
			<input type="submit" name="ok" value="dit klopt" />
			<input type="submit" name="ok" value="dit klopt niet" />
		</span>
	</fieldset>
</form>

Dit kan direct worden uitgelezen met javascript

<script type="text/javascript">
	//het lezen van een input veld
	var default_first = document.getElementById('mijnformulier').voornaam.value;
	//het aanpassen van een variabele
	new_first = default_first + ' kees';
	//schrijven van de waarde
	document.getElementById('mijnformulier').voornaam.value = new_first;
</script>

getElementById('mijnformulier') is hetzelfde als forms[0] mits dit het eerste formulier wat er in de html staat. Voordat deze gelezen kan worden door jscript moet de javascript worden gelezen na de html anders weet javascript niet wat de waarde is van het veld.

Eenvoudige functies

Functies in javascript werken in basis hetzelfde als in flash. Bij javascript hoef je echter niet aan strongtyping.

Een functie ziet er als volgt uit in een stuk javascript:

function functieNaam () {
    hier staat dan een heus javascript commando;
}

Allereerst begint een functiebeschrijving met de term "function" Zo weet javascript waar het mee te maken heeft. Vervolgens geef je de functie een naam, hier: functieNaam. De naam wordt gevolgd door twee haken (open en sluiten). Deze zijn voor de argumenten - daar komen wel later nog op terug - en kunnen leeg zijn. De code wordt geplaatst door de twee accolades.

Events

Aan alleen dit soort bewerkingen heb je niet zoveel. Je kan namelijk het net zo goed direct in HTML schrijven. Als we deze bewerkingen kunnen laten afhagen van van de gebruiker wordt het al veel leuker. Zoals bij flash heb je ook in javascript gebruiker events. De belangrijkste zijn:

onClick: Spreekt voor zich
onFocus: het selecteren van een input veld met de muis
onBlur: het deselecteren van een input veld
onSubmit: Als je een forulier submit
onChange: Als je een verandering aanbrengt bij een bijvoorbeeld een select, checkbox of een radiobutton.

Deze events worden in de HTML geplaatst alsof het attributes zijn. bijvoorbeeld als volgt:

<a href="#" onClick="voor hier een javascript uit;">link om te klikken</a>

Of met een van de voorbeelden als eerder met gebruik van een functie

<script>
function changeColor (){
	document.getElementById('veld1').style.color = '#F00';
}
</script>
<a href="#" onClick="changeColor();" >Wijzig kleur</a>

Javascript en de DOM

Leerdoelen