web2 logo

Artikel Links Notities

Het document object

Het document object bevat een model van de webpagina. Ieder HTML element is een node. Elementen kunnen attribuut nodes hebben, dat zijn geen kind elementen, maar ze zijn onderdeel van die HTML elementen. Elementen kunnen ook tekst nodes hebben. Tekst nodes zijn kind elementen van de HTML elementen waar ze in staan. Tekst nodes kunnen zelf geen kind nodes hebben. HTML elementen als em en strong zijn geen kind elementen van de tekst nodes, maar van de HTML elementen waar ze in voorkomen. Al die nodes kunnen met javascript gemanipuleerd worden. Om via javascript een webpagina aan te passen moet je eerst de nodes die je wilt veranderen lokaliseren. Na het lokaliseren kun je ze bewerken.

Methoden en eigenschappen voor het lokaliseren van elementen

Methoden die meer als één element kunnen teruggeven, geven altijd een NodeList, dit is een verzameling nodes, zelfs als er maar 1 resultaat gevonden wordt. De eigenschap length is te gebruiken om te achterhalen hoeveel elementen een NodeList bevat. Elementen van een NodeList kunnen aangesproken worden via het indexnummer, het tellen begint bij nul. Dat kan via de methode item() of via de vierkante haken van de array syntax (is sneller): var elementen = document.getElementsByClassName('actueel'); var eersteItem = elementen.item(0); var eerste = elementen[0];

getElementById()
selecteren via het id attribuut van het element, voorbeeld: getElementById('reclame')
getElementsByClassName()
selecteert alle elementen met die class, deze methode geeft een NodeList die automatisch mee verandert als de pagina wordt aangepast, voorbeeld: getElementsByClassname('actueel')
getElementsByTagName()
selecteert alle elementen met die tag, deze methode geeft een NodeList die automatisch mee verandert als de pagina wordt aangepast, voorbeeld: getElementsByTagname('li')
querySelector()
selecteren via een css selector, geeft het eerst gevonden element, voorbeeld: querySelector('li.actueel')
querySelectorAll()
selecteren via een css selector, geeft alle gevonden elementen, deze methode geeft een NodeList die niet automatisch mee verandert als de pagina wordt aangepast, voorbeeld: querySelectorAll('li.actueel') nog een voorbeeld: querySelectorAll('li[id]') dit geeft alle li-elementen die een id hebben, ongeacht de waarde van die id.

De volgende eigenschappen kunnen gebruikt worden om een node te selecteren, niet om deze aan te passen. Als de selectie geen node bevat, dan wordt null teruggegeven. Sommige browsers geven extra tekst nodes als ze spaties en/of regeleinden tegenkomen, wat tot onverwachte resultaten kan leiden.

parentNode
selecteert het ouder element van het huidige element
previousSibling
selecteert het vorige broertje/zusje van het huidige element
nextSibling
selecteert het volgende broertje/zusje van het huidige element
firstChild
selecteert het eerst kind element van het huidige element
lastChild
selecteert het laatste kind element van het huidige element

Methoden en eigenschappen voor het aanpassen van elementen

Als je een element toewijst aan een variabele, dan sla je de lokatie van dat element op, de inhoud van dat element pas je aan via een methode van het object.

nodeValue
eigenschap van een tekst element, inhoud kan gelezen of aangepast worden. Een HTML element kan hier niet mee aangepast worden, alleen het tekst element dat een kind is van het HTML element.
innerHTML
eigenschap die toegang geeft tot alle inhoud, ook de kind elementen Voorbeeld: document.getElementById('navigatie').firstChild.innerHTML = 'emnieuwem';
innerText
een niet-standaard eigenschap (daarom beter niet gebruiken) die toegang geeft tot alleen de zichtbare tekst, br elementen worden meegenomen als nieuwe regel tekens
textContent
eigenschap die toegang geeft tot alleen de tekst, tekst die tussen opmaakelementen zoals em of strong staat hoort hier ook bij, br elementen worden genegeerd
createElement()
nieuw element aanmaken dat later met appendChild in de pagina wordt gezet
createTextNode()
nieuw tekst element aanmaken dat aan een HTML element kan worden toegevoegd
appendChild()
kind element toevoegen Voorbeeld: var nieuwElement = document.createElement('li'); var nieuwTekst = document.createTextNode('alternatieven'); nieuwElement.appendChild(nieuwTekst); var plaats = document.getElementById('navigatie'); plaats.appendChild(nieuwElement);
removeChild()
kind element verwijderen Voorbeeld: var teVerwijderen = document.getElementsByClassName('actueel')[1]; var ouder = teVerwijderen.parentNode; ouder.removeChild(teVerwijderen);
insertBefore
voegt net als appendChild een element toe, maar dan voor het aangegeven element Voorbeeld: var lijst = document.getElementsByTagName('ul')[0]; var nwEerste = document.createElement('li'); var nwTekst = document.createTextNode('actie'); nwEerste.appendChild(nwTekst); lijst.insertBefore(nwEerste, lijst.firstChild);
className
toegang tot attribuut className, voorbeeld: var el = document.getElementById('4'); el.className = 'oud'; Een voorbeeld met een NodeList: var aanTePassen = document.getElementsByClassName('actueel'); if (aanTePassen.length > 0) { // controleren of er nodes gevonden zijn for (var i=0; i < aanTePassen.length; i++) { aanTePassen[i].className = 'oud'; } }
id
toegang tot attribuut id
hasAttribute()
kijkt of het attribuut bestaat Voorbeeld: var atr = 'bestaat niet'; var element = document.getElementById('3'); if (element.hasAttribute('class')) { atr = element.getAttribute('class'); } // de variabele atr is nu de naam van de class als die bestaat, anders is atr 'bestaat niet'
getAttribute()
geeft de waarde van het attribuut
setAttribute()
past de waarde van het attribuut aan Voorbeeld: var eersteLijst = document.getElementsByTagName('ul')[0]; var eerstePunt = eersteLijst.firstChild; eerstePunt.setAttribute('class','oud');
removeAttribute()
verwijdert het attribuut Voorbeeld: var element = document.getElementById('3'); if (element.hasAttribute('class')) { element.removeAttribute('class'); }

naar boven

term zoeken

Notitieruimte