aanspreken objecten
Als je met javascript wilt (gaan) werken is het van belang iets te weten over het kunnen aanspreken van zogenaamde objecten, dit begint vanzelfsprekend met een korte uitleg over wat men onder objecten verstaat als het om javascript gaat.
Wat is een object ?
Eigenlijk is een object een html element binnen een webpagina, of eigenlijk is het beter om van een html document te spreken, want in javascript begint het aanspreken van een html element vanuit het document object. Hier is het van belang om een html document te bekijken vanuit een structuur van html elementen, een html document
is dan ook opgebouwd uit elementen.
voorbeeld eenvoudige structuur html document,
html ->document ->head
html ->document -> body -> div -> p
html ->document -> body -> blockquote ->h1
html ->document -> body ->div -> div -> div -> form -> input
Structuur in Html documenten
Dat html documenten zijn opgebouwd uit structuren van elementen, is wat javascript gebruikt om te weten te komen welk element bedoeld wordt om mee te gaan werken. Het is dus nodig om te weten hoe een bepaald object (of eigenlijk beter element) binnen zo'n structuur kan worden gevonden,.. Het is dus aan te raden om je denkwijze wat aan te passen mbt. webpagina's bouwen zoals de html als code, naar het denken in structuren van webpagina's nog een klein voorbeeld :
de html code denkwijze,
<html>
----<head>
----</head>
----<body>
------<div>
--------<h1>
--------inhoud header
--------</h1>
--------<p>
---------inhoud paragraaf
--------</p>
------</div>
----</body>
</html>
de javascript dom denkwijze
html -- document -- head
html -- document -- body
html -- document -- body -- div
html -- document -- body -- div -- h1
html -- document -- body -- div -- p
Objecten vinden
Uit bovenstaande is waarschijnlijk wel duidelijk geworden hoe javascript ongeveer in zijn werk gaat als het gaat om het aanspreken van html elementen, javascript is bekend met het document als basis van daaruit
moet er aan het script duidelijk worden gemaakt met welk specifiek element gewerkt moet gaan worden. Hiervoor zijn diverse ingebouwde manieren om dit allemaal wat eenvoudiger te laten verlopen, en als je er wat meer ervaring in krijgt wordt het vanzelf allemaal wat duidelijker.
Laten we beginnen met een eenvoudig voorbeeld beginnen om een html element te laten vinden door javascript.
voorbeeld ( het aanspreken van de body van een html document ) :
document.body.bgColor = 'red';
Javascript dom uitleg objecten
Zoals je kunt zien in bovenstaand voorbeeld is het in feite niet erg ingewikkeld om het html body element aan te spreken. Het enige wat
men hoeft te doen is javascript te vertellen dat je vanuit het document object naar het eerste niveau in de structuur moet gaan en het body element moet gebruiken om de achtgrondkleur van dit element aan te passen.
Dat het aan javscript duidelijk maken om welk html element het gaat als je een script maakt, minder eenvoudig wordt naarmate het document ingewikkelder wordt, en naarmate men dieper in zo'n structuur een element wil aangeven zal begrijpelijk zijn. Stel het volgende voorbeeld.
voorbeeld ( het aanspreken van een dieper gelegen html element ) :
document structuur,
html -- document -- body -- div1 -- p
html -- document -- body -- div2 -- p
html -- document -- body -- div3 -- p
stel je wilt het derde aanwezige div element een zwarte rand (border) geven, hoe kun je dat duidelijk maken...
document.body.children[2].style.border = '2px solid #000000';
Uitleg document.body.children,..
Het bovenstaande voorbeeld geeft allereerst aan dat als men een html document structuur heeft met meerdere elementen in een body element, wat bijna altijd het geval is natuurlijk men deze middels het gebruik van de javascript dom methode "children" alle eerste niveau
elementen in de body kan aanspreken, ze vormen als het waren een lijst met alle elementen die direct grenzen aan de body in een structuur.
Het eerste voorkomende element heeft het nummer 0 wat in het begin misschien even wennen is (tel altijd vanaf 0), dit heeft te maken met arrays waarmee vrijwel elke scripter veel te maken heeft, maar dat valt hier buiten het onderwerp van dit artikel.
