web2 logo

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 = '<em>nieuw<em>';
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');
}

Toegevoegd door: Kees de Keijzer
Twitter: @kdkq

~ javascript ~

~ Onderwerpen ~

Dit is een website zonder pop-ups

~ Links ~

Design & Development by Cyberwebdesign.nl for web2.nl © 2020.