HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

JS-zelfstudie

JS HOME JS Introductie JS Waarheen? JS-uitgang JS-verklaringen JS-syntaxis JS-opmerkingen JS-variabelen JS Let JS Const JS-operators JS Rekenen JS-opdracht JS-gegevenstypen JS-functies JS-objecten JS-evenementen JS-snaren JS String-methoden JS String zoeken JS String-sjablonen JS-nummers JS-nummermethoden JS-arrays JS-array-methoden JS-array sorteren JS-array-iteratie JS Array Const JS-datums JS-datumnotaties JS Datum Ophaalmethoden Methoden voor het instellen van JS-datum JS Math JS Willekeurig JS Booleans JS-vergelijkingen JS-voorwaarden JS-schakelaar JS Loop For JS-lus voor binnen JS Loop For Of JS-lus terwijl JS Break JS-iteraties JS-sets JS-kaarten JS Typeof JS Type conversie JS Bitwise JS RegExp JS-fouten JS-bereik JS Hijsen JS strikte modus JS dit trefwoord JS-pijlfunctie JS-lessen JS JSON JS-foutopsporing JS-stijlgids JS-best practices JS-fouten JS-prestaties JS Gereserveerde Woorden

JS-versies

JS-versies JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS-geschiedenis

JS-objecten

Objectdefinities Objecteigenschappen Objectmethoden Objectweergave Objectaccessoires Objectconstructeurs Objectprototypes Object-Iterables Objectsets Objectkaarten Objectreferentie

JS-functies

Functiedefinities Functieparameters: Functie-aanroep Functie-oproep: Functie Toepassen Functie Sluitingen

JS-lessen

Klas Intro Klasse Overerving Klasse Statisch

JS Asynchrone

JS-callbacks JS asynchroon JS belooft JS Async/Wachten

JS HTML DOM

DOM Intro DOM-methoden DOM-document DOM-elementen DOM HTML DOM-formulieren DOM-CSS DOM-animaties DOM-evenementen DOM-gebeurtenisluisteraar DOM-navigatie DOM-knooppunten DOM-collecties DOM-knooppuntlijsten

JS-browserstuklijst

JS-venster JS-scherm JS-locatie JS-geschiedenis JS-navigator JS pop-upwaarschuwing JS-timing JS-koekjes

JS Web API's

Introductie web-API Web Forms API Webgeschiedenis-API Webopslag-API Web Worker-API Web Fetch-API Webgeolocatie-API

JS AJAX

Ajax-intro AJAX XMLHttp Ajax-verzoek Ajax-reactie AJAX XML-bestand AJAX PHP Ajax ASP AJAX-database AJAX-toepassingen Ajax-voorbeelden

JS JSON

JSON-intro JSON-syntaxis JSON versus XML JSON-gegevenstypen JSON ontleden JSON Stringify JSON-objecten JSON-arrays JSON-server JSON PHP JSON HTML JSON JSONP

JS versus jQuery

jQuery-kiezers jQuery HTML jQuery CSS jQuery DOM

JS-graphics

JS-graphics JS Canvas JS Plotly JS Chart.js JS Google-kaart JS D3.js

JS-voorbeelden

JS-voorbeelden JS HTML DOM JS HTML-invoer JS HTML-objecten JS HTML-evenementen JS-browser JS-editor JS-oefeningen JS-quiz JS-certificaat

JS-referenties

JavaScript-objecten HTML DOM-objecten


JavaScript HTML DOM-elementen

❮ Vorig Volgende ❯

Deze pagina leert u hoe u HTML-elementen in een HTML-pagina kunt vinden en openen.

HTML-elementen zoeken

Vaak wil je met JavaScript HTML-elementen manipuleren.

Om dit te doen, moet je eerst de elementen vinden. Er zijn verschillende manieren om dit te doen:

  • HTML-elementen zoeken op id
  • HTML-elementen zoeken op tagnaam
  • HTML-elementen zoeken op klassenaam
  • HTML-elementen zoeken met CSS-selectors
  • HTML-elementen zoeken op HTML-objectverzamelingen

HTML-element zoeken op id

De eenvoudigste manier om een ​​HTML-element in de DOM te vinden, is door de element-id te gebruiken.

Dit voorbeeld vindt het element met id="intro":

Voorbeeld

const element = document.getElementById("intro");

Als het element wordt gevonden, retourneert de methode het element als een object (in element).

Als het element niet wordt gevonden, bevat het element null.

HTML-elementen zoeken op tagnaam

Dit voorbeeld vindt alle <p>elementen:

Voorbeeld

const element = document.getElementsByTagName("p");

Dit voorbeeld vindt het element met id="main", en vindt vervolgens alle <p>elementen binnenin "main":

Voorbeeld

const x = document.getElementById("main");
const y = x.getElementsByTagName("p");

HTML-elementen zoeken op klassenaam

Als u alle HTML-elementen met dezelfde klassenaam wilt vinden, gebruikt u getElementsByClassName().

Dit voorbeeld retourneert een lijst van alle elementen met class="intro".

Voorbeeld

const x = document.getElementsByClassName("intro");

HTML-elementen zoeken met CSS-kiezers

Als u alle HTML-elementen wilt vinden die overeenkomen met een opgegeven CSS-selector (id, klassenamen, typen, attributen, waarden van attributen, enz.), gebruikt u de querySelectorAll()methode.

Dit voorbeeld retourneert een lijst van alle <p>elementen met class="intro".

Voorbeeld

const x = document.querySelectorAll("p.intro");

HTML-elementen zoeken op basis van HTML-objectverzamelingen

In dit voorbeeld wordt het formulierelement gevonden met id="frm1", in de formulierenverzameling, en worden alle elementwaarden weergegeven:

Voorbeeld

const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
  text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

De volgende HTML-objecten (en objectverzamelingen) zijn ook toegankelijk:

Test jezelf met oefeningen

Oefening:

Gebruik de getElementByIdmethode om het <p>element te vinden en verander de tekst in "Hallo".

<p id="demo"></p>

<script>
 = "Hello";
</script>

❮ Vorig Volgende ❯