JavaScript DOM-zelfstudie met voorbeeld

Waar zit DOM in JavaScript?

JavaScripts hebben toegang tot alle elementen op een webpagina door gebruik te maken van het Document Object Model (DOM). De webbrowser maakt namelijk een DOM van de webpagina aan wanneer de pagina wordt geladen. Het DOM-model wordt opgebouwd als een boomstructuur van objecten, zoals dit:

Elk HTML-element op een pagina wordt een knooppunt in deze boomstructuur. Browsers groeperen DOM-knooppunten in een paar kerntypen: elementknooppunten vertegenwoordigen tags zoals <p> or <div>Tekstknooppunten bevatten de zichtbare woorden binnen een tag, attribuutknooppunten slaan waarden op zoals id or classen commentaarknooppunten behouden <!-- --> opmaak. Het bovenste knooppunt is altijd de document elk object, en elk ander element is daarvan een afstammeling.

Met behulp van de DOM, JavaScript Het kan meerdere taken uitvoeren. Het kan nieuwe elementen en attributen creëren, bestaande elementen en attributen wijzigen en zelfs bestaande elementen en attributen verwijderen. JavaScripts kunnen ook reageren op bestaande gebeurtenissen en nieuwe gebeurtenissen op de pagina creëren. De onderstaande secties beschrijven hoe je elementen selecteert, wijzigt en gebeurtenisafhandelaars koppelt aan praktische, uitvoerbare voorbeelden.

Het is belangrijk om te onthouden dat de DOM niet hetzelfde is als het HTML-bronbestand. De HTML die een browser downloadt, is statische tekst, maar de DOM die daaruit wordt opgebouwd, is een levend, dynamisch objectmodel. Elke wijziging JavaHet script dat aan de DOM wordt toegevoegd, verschijnt direct op het scherm, zonder dat het originele HTML-bestand ooit wordt aangeraakt.

Hoe selecteer je DOM-elementen in JavaScript

Voor JavaEen script kan alles op een pagina wijzigen, maar moet eerst het doelelement selecteren. De DOM biedt verschillende selectiemethoden, elk geschikt voor verschillende situaties:

• getElementById(): retourneert het enige element dat overeenkomt met de gegeven waarde. id attribuut.
• getElementsByClassName(): Retourneert een live HTMLCollection van alle elementen die een bepaalde klasse dragen.
• getElementsByTagName(): retourneert een live HTMLCollection van elk element met een bepaalde tagnaam, zoals bijvoorbeeld p or li.
• querySelector(): Retourneert het eerste element dat overeenkomt met een CSS-selector.
• querySelectorAll(): Retourneert een statische NodeList met alle elementen die overeenkomen met een CSS-selector.

De onderstaande tabel vergelijkt de vier meest gebruikte selectiemethoden, zodat u de juiste methode voor uw specifieke situatie kunt kiezen.

`querySelector` en `querySelectorAll` accepteren elke geldige CSS-selector, waardoor ze de meest flexibele keuze zijn voor moderne code. Probeer het onderstaande codefragment in een pagina die een element bevat met id="title" en diverse elementen met class="item":

const heading = document.getElementById("title");
const itemsByClass = document.getElementsByClassName("item");
const firstItem = document.querySelector(".item");
const allItems = document.querySelectorAll(".item");
console.log(heading.textContent, itemsByClass.length, allItems.length);

getElementById en getElementsByClassName blijven sneller voor eenvoudige zoekopdrachten, terwijl querySelector en querySelectorAll de voorkeur genieten wanneer de selectielogica de kracht van de volledige CSS-syntaxis vereist, zoals bij attribuut- of afstammingsselectoren.

Hoe DOM-elementen te wijzigen, aan te maken en te verwijderen

Zodra een element is geselecteerd, JavaEen script kan zijn inhoud, attributen en zelfs zijn bestaan ​​in de DOM-structuur lezen of herschrijven. Met behulp van DOM kan het script de inhoud, attributen en zelfs zijn positie in de DOM-structuur wijzigen. JavaMet een script kunnen nieuwe elementen en attributen worden aangemaakt, bestaande elementen en attributen worden gewijzigd en bestaande elementen en attributen volledig worden verwijderd.

Wijzig de inhoud met getElementById en innerHTML

1. getElementById: Om toegang te krijgen tot elementen en attributen waarvan de id is ingesteld.
2. innerHTML: Om toegang te krijgen tot de inhoud van een element.

Probeer dit voorbeeld zelf eens:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1 id="one">Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p>This is the technology section.</p>
<script type="text/javascript">
var text = document.getElementById("one").innerHTML;
alert("The first heading is " + text);
</script>
</body>
</html>

Het waarschuwingsvenster bevestigt dat getElementById de koptekst heeft gevonden en dat innerHTML de daarin opgeslagen tekst heeft geretourneerd.

Lees elke alinea met getElementsByTagName

getElementsByTagName: Voor toegang tot elementen en attributen met behulp van de tagnaam. Deze methode retourneert een reeks van alle items met dezelfde tagnaam.

Probeer dit voorbeeld zelf eens:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p id="second">This is the technology section.</p>
<script type="text/javascript">
var paragraphs = document.getElementsByTagName("p");
alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
document.getElementById("second").innerHTML = "The orginal message is changed.";
</script>
</body>
</html>

Omdat getElementsByTagName een live collectie retourneert, verwijst paragraphs[1] naar de tweede alinea in het document, en het bijwerken van innerHTML overschrijft onmiddellijk de tekst ervan op het scherm.

Elementen maken en verwijderen met createElement en removeChild.

Naast het wijzigen van de bestaande inhoud van de pagina, kun je met de DOM ook geheel nieuwe elementen toevoegen of bestaande elementen verwijderen:

• createElement(): Bouwt een nieuw elementknooppunt in het geheugen.
• appendChild(): Voegt een knooppunt toe als laatste kindelement van een ouderelement.
• setAttribute(): voegt een attribuut toe of werkt het bij, zoals class or href, op een element.
• removeChild(): Verwijdert een specifiek kindknooppunt uit zijn ouder.

Het onderstaande voorbeeld maakt een nieuw lijstitem aan, geeft het tekst en een klasse, voegt het toe aan een bestaande lijst en verwijdert vervolgens het allereerste item uit diezelfde lijst:

const list = document.getElementById("myList");
const newItem = document.createElement("li");
newItem.textContent = "Freshly added item";
newItem.setAttribute("class", "highlight");
list.appendChild(newItem);
list.removeChild(list.firstElementChild);

De methode createElement() alleen geeft niets weer, omdat het knooppunt alleen in het geheugen bestaat. Het verschijnt pas wanneer appendChild(), of een vergelijkbare methode zoals prepend(), het ergens in de zichtbare boomstructuur plaatst. Moderne browsers ondersteunen ook een kortere node.remove() methode, waarmee een element direct wordt verwijderd zonder een verwijzing naar het bovenliggende element nodig te hebben, in tegenstelling tot de oudere parent.removeChild(node) syntax.

Hoe om te gaan met gebeurtenissen in JavaScript

Een gebeurtenis is elke actie die de browser kan detecteren, zoals een klik, een toetsaanslag of het laden van een pagina. Je kunt op twee manieren een gebeurtenisafhandelaar aan een specifiek element toevoegen.

Koppel een handler met onclick of addEventListener.

De eerste, oudere methode wijst een functie rechtstreeks toe aan de on-event-eigenschap van een element:

document.getElementById(id).onclick=function()
{
lines of code to be executed
}

OF, met behulp van de modernere en flexibelere addEventListener()-methode:

document.getElementById(id).addEventListener("click", functionname)

De methode `addEventListener()` heeft over het algemeen de voorkeur omdat je hiermee meerdere handlers aan dezelfde gebeurtenis op hetzelfde element kunt koppelen. Bovendien accepteert deze methode een optioneel derde argument dat het vastleggen van gebeurtenissen regelt, wat later in dit gedeelte aan bod komt. De methode wordt ook gecombineerd met `removeEventListener()`, waarmee een handler wordt verwijderd wanneer deze niet langer nodig is, iets wat de `onclick`-eigenschap op zichzelf niet kan.

HTML ondersteunt ook een derde stijl: een inline handler die direct in de tag wordt geschreven, zoals bijvoorbeeld <button onclick="clicked()">Click Me</button>Inline handlers combineren markup met logica en worden snel moeilijk te onderhouden, daarom gebruiken de meeste JavaScriptontwikkelaars gebruiken ze meestal voor snelle demo's en vertrouwen op addEventListener() voor echte applicaties.

Probeer het eens: een compleet voorbeeld van een klikgebeurtenis

Probeer dit voorbeeld zelf eens:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<input type="button" id="btnClick" value="Click Me!!" />
<script type="text/javascript">
document.getElementById("btnClick").addEventListener("click", clicked);
function clicked()
{
alert("You clicked me!!!");
}
</script>
</body>
</html>

Door op de knop te klikken wordt de functie clicked() geactiveerd, die een trigger activeert. JavaEen scriptwaarschuwingsvenster bevestigt dat de gebeurtenisafhandelaar succesvol is uitgevoerd.

Het gebeurtenisobject

Elke gebeurtenishandler ontvangt automatisch een gebeurtenisobject als eerste argument. Dit object bevat nuttige details over wat er is gebeurd, waaronder event.target (het exacte element waarop de actie is gestart), event.type (de naam van de gebeurtenis, zoals 'klik') en methoden zoals event.preventDefault(), waarmee het standaardgedrag van een browser, zoals het volgen van een link of het verzenden van een formulier, wordt gestopt.

document.getElementById("btnClick").addEventListener("click", function(event) {
console.log("Clicked element: " + event.target.id);
});

Het event-object wordt compleet gemaakt met nog twee eigenschappen: event.current.Target `event.target` verwijst altijd naar het element waaraan de listener is gekoppeld, zelfs als `event.target` een genest kindelement rapporteert, en `event.stopPropagation()` stopt een gebeurtenis voordat deze verder kan worden doorgegeven of vastgelegd. Samen met `preventDefault()` geven deze tools een handler nauwkeurige controle over wat er vervolgens gebeurt.

Evenementen BubblInvoeren, vastleggen en delegeren

Wanneer een gebeurtenis plaatsvindt op een genest element, stopt het daar niet. In de borrelen In deze fase reist de gebeurtenis omhoog vanaf het doelelement via elke voorouder, helemaal tot aan het document. capturing In de eerste fase, die optioneel is, reist de gebeurtenis van het document naar het doel voordat het 'bubben' begint. {capture: true} als derde argument aan addEventListener() om te luisteren tijdens de opnamefase.

Evenementdelegatie Maakt gebruik van bubbling: in plaats van een aparte listener aan elk kindelement te koppelen, koppel je één listener aan een gedeeld ouderelement en inspecteer je event.target om te bepalen welk kindelement de listener heeft geactiveerd. Dit gebruikt minder geheugen en dekt automatisch elementen die later aan de pagina worden toegevoegd.

const list = document.getElementById("myList");
list.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    alert("You clicked " + event.target.textContent);
  }
});

Delegatie, samen met bubbling en capturing, geeft je nauwkeurige controle over hoe DOM en gebeurtenissen in JavaHet script reageert naarmate een pagina interactiever wordt.

Veelgestelde vragen