JavaScript en HTML
Dit artikel legt JavaScript en HTML uit.
YouTube Video
javascript-html-dom.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & HTML</title>
6 <style>
7 * {
8 box-sizing: border-box;
9 }
10
11 body {
12 margin: 0;
13 padding: 2em;
14 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
15 background-color: #f7f9fc;
16 color: #333;
17 line-height: 1.6;
18 }
19
20 .container {
21 max-width: 800px;
22 margin: 0 auto;
23 padding: 1em;
24 background-color: #ffffff;
25 border: 1px solid #ccc;
26 border-radius: 10px;
27 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
28 }
29
30 h1, h2 {
31 font-size: 1.5rem;
32 color: #007bff;
33 margin-top: 0.5em;
34 margin-bottom: 0.5em;
35 border-left: 5px solid #007bff;
36 padding-left: 0.6em;
37 background-color: #e9f2ff;
38 }
39
40 button {
41 display: block;
42 margin: 1em auto;
43 padding: 0.75em 1.5em;
44 font-size: 1rem;
45 background-color: #007bff;
46 color: white;
47 border: none;
48 border-radius: 6px;
49 cursor: pointer;
50 transition: background-color 0.3s ease;
51 }
52
53 button:hover {
54 background-color: #0056b3;
55 }
56
57 #output {
58 margin-top: 1em;
59 background-color: #1e1e1e;
60 color: #0f0;
61 padding: 1em;
62 border-radius: 8px;
63 min-height: 200px;
64 font-family: Consolas, monospace;
65 font-size: 0.95rem;
66 overflow-y: auto;
67 white-space: pre-wrap;
68 }
69
70 .highlight {
71 outline: 3px solid #ffc107; /* yellow border */
72 background-color: #fff8e1; /* soft yellow background */
73 transition: background-color 0.3s ease, outline 0.3s ease;
74 }
75
76 .active {
77 background-color: #28a745; /* green background */
78 color: #fff;
79 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
80 transition: background-color 0.3s ease, box-shadow 0.3s ease;
81 }
82 </style>
83</head>
84<body>
85 <div class="container">
86 <h1>JavaScript Console</h1>
87 <button id="executeBtn">Execute</button>
88 <div id="output"></div>
89 </div>
90
91 <div class="container">
92 <h2>HTML Sample</h2>
93 <div id="content">Hello, World!</div>
94 <button id="changeText">Change Text</button>
95 </div>
96
97 <script>
98 // Override console.log to display messages in the #output element
99 (function () {
100 const originalLog = console.log;
101 console.log = function (...args) {
102 originalLog.apply(console, args);
103 const output = document.getElementById('output');
104 output.textContent += args.map(String).join(' ') + '\n';
105 };
106 })();
107
108 document.getElementById('executeBtn').addEventListener('click', () => {
109 // Prevent multiple loads
110 if (document.getElementById('externalScript')) return;
111
112 const script = document.createElement('script');
113 script.src = 'javascript-html-dom.js';
114 script.id = 'externalScript';
115 //script.onload = () => console.log('javascript-html-dom.js loaded and executed.');
116 //script.onerror = () => console.log('Failed to load javascript-html-dom.js.');
117 document.body.appendChild(script);
118 });
119 </script>
120</body>
121</html>Het window-object in JavaScript
Het window-object in JavaScript is het globale object in een browseromgeving, dat functies en informatie biedt met betrekking tot de webpagina en browservenster. Aangezien window de globale scope van de browser is, wordt alle JavaScript-code die in de browser wordt uitgevoerd onderdeel van het window-object. Het window-object speelt een belangrijke rol bij het uitvoeren van JavaScript in de browseromgeving en biedt veel API's en eigenschappen.
Belangrijkste kenmerken van het window-object
Eigenschappen
1// Get and display the document's title
2console.log(`Title: ${window.document.title}`);
3
4// Get and display the current URL
5console.log(`URL: ${window.location.href}`);
6
7// Go back to the previous page
8// Note: this will navigate back in history, so be careful when running it
9console.log("Navigating back to the previous page...");
10window.history.back();
11
12// Display the browser's user agent
13console.log(`User Agent: ${window.navigator.userAgent}`);
14
15// Display the width and height of the viewport
16console.log(`Viewport Width: ${window.innerWidth}`);
17console.log(`Viewport Height: ${window.innerHeight}`);window.document: Toegankelijk voor het huidige HTML-document.window.location: Beheert de huidige URL en browsernavigatie.window.history: Heeft toegang tot de geschiedenisinformatie van de browser en staat vooruit- en terugnavigatie toe.window.navigator: Biedt informatie over de browser en het apparaat.window.innerWidth/window.innerHeight: Haalt de breedte en hoogte van de viewport op.
Methodes
1// Show an alert
2window.alert('Hello, this is an alert!');
3
4// Show a confirmation dialog
5if (window.confirm('Are you sure you want to proceed?')) {
6 console.log('User clicked OK');
7} else {
8 console.log('User clicked Cancel');
9}
10
11// Show a prompt dialog
12const userInput = window.prompt('Please enter your name:');
13console.log(`Hello, ${userInput}!`);
14
15// Open a new tab
16window.open('https://www.example.com', '_blank');
17
18// Display a message after 3 seconds
19window.setTimeout(() => {
20 console.log('This message appears after 3 seconds!');
21}, 3000);
22
23// Display a message every second
24const intervalId = window.setInterval(() => {
25 console.log('This message appears every second!');
26}, 1000);
27
28// Clear the interval after 5 seconds
29setTimeout(() => {
30 clearInterval(intervalId);
31 console.log('Interval cleared.');
32}, 5000);window.alert(): Toont een waarschuwingsdialoogvenster.window.confirm(): Toont een dialoogvenster waarin om gebruikersbevestiging wordt gevraagd en geeft een OK- of Annuleren-resultaat terug.window.prompt(): Toont een dialoogvenster waarin de gebruiker om invoer wordt gevraagd en haalt de ingevoerde waarde op.window.open(): Opent een nieuw venster of tabblad.window.setTimeout()/window.setInterval(): Stelt een timer in om een functie uit te voeren na een bepaalde tijd of op regelmatige intervallen.
Gebeurtenisafhandeling
1// Display a message when the page is fully loaded
2window.onload = () => {
3 console.log('Page is fully loaded!');
4};
5
6// Display a message when the window is resized
7window.onresize = () => {
8 console.log('Window resized! New size:', window.innerWidth, 'x', window.innerHeight);
9};
10
11// Display a message when the page is being scrolled
12window.onscroll = () => {
13 console.log('Page is being scrolled!');
14};window.onload: Dit evenement wordt geactiveerd wanneer de pagina volledig is geladen.window.onresize: Dit evenement wordt geactiveerd wanneer het venster van grootte verandert.window.onscroll: Dit evenement wordt geactiveerd wanneer de gebruiker door de pagina scrolt.
Rol als een Globale Variabele
1var myVar = 10;
2console.log(window.myVar); // 10
- Het
windowobject bevat globale variabelen en functies. Met andere woorden, gedeclareerde variabelen en functies worden automatisch eigenschappen vanwindow.
DOM-manipulatie in JavaScript
JavaScript DOM (Document Object Model) manipulatie wordt gebruikt om dynamisch te interageren met elementen op de webpagina. De DOM vertegenwoordigt de structuur van een HTML-document als een boom, die kan worden aangepast met JavaScript om de structuur te wijzigen en de weergave van de pagina te beheren.
Basisprincipes van de DOM
De DOM behandelt de HTML van een webpagina als objecten, waardoor toegang tot en wijziging van elementen en attributen mogelijk is. Gebruik het document object om toegang te krijgen tot het HTML-document.
DOM-elementen ophalen
JavaScript heeft een aantal methoden om toegang te krijgen tot elementen in de DOM.
document.getElementById(): Haalt een element op aan de hand van zijnid-attribuut.document.getElementsByClassName(): Haalt elementen op aan de hand van de classnaam. Retourneert eenHTMLCollection.HTMLCollectionis een live collectie die wijzigingen in de DOM in realtime weergeeft.document.getElementsByTagName(): Haalt elementen op aan de hand van de tagnamen. Retourneert eenHTMLCollection.document.querySelector(): Gebruikt een CSS-selector om het eerste overeenkomende element op te halen.document.querySelectorAll(): Gebruikt een CSS-selector om alle overeenkomende elementen op te halen. Retourneert eenNodeList.NodeListis een statische collectie die de status bij ophalen behoudt en latere wijzigingen in de DOM niet weerspiegelt.
Voorbeeld: getElementById en querySelector
1<div id="content">Hello, World!</div>
2<button id="changeText">Change Text</button>1const content = document.getElementById('content');
2console.log(content.textContent); // "Hello, World!"
3
4const button = document.querySelector('#changeText');DOM-manipulatie
Diverse operaties kunnen worden uitgevoerd op de opgehaalde elementen.
Tekst wijzigen
Om de tekst van een element te wijzigen, gebruik textContent of innerHTML.
textContent: Haal de tekstinhoud van een element op of wijzig deze. HTML-tags worden niet geïnterpreteerd.innerHTML: Haal de HTML-inhoud van een element op of wijzig deze. Strings die HTML-tags bevatten worden ook verwerkt.
1content.textContent = 'Hello, world!'; // Change the text
2button.innerHTML = '<strong>Click to change</strong>'; // Change including HTML
Attribuuten Wijzigen
Gebruik setAttribute() en getAttribute() om attributen van een element te wijzigen.
1button.setAttribute('disabled', 'true'); // Disable the button
2const id = content.getAttribute('id'); // Get the "content"
3console.log(id);CSS Wijzigen
Gebruik de style-eigenschap om CSS-stijlen te wijzigen.
1content.style.color = 'red'; // Change the text color to red
2content.style.fontSize = '20px'; // Change the font size
Klassen Manipuleren
Gebruik classList om klassen aan een element toe te voegen of te verwijderen.
add(): Voegt een klasse toe.remove(): Verwijdert een klasse.toggle(): Voegt een klasse toe of verwijdert deze, afhankelijk van of deze bestaat.contains(): Controleert of een klasse bestaat.
1content.classList.add('highlight'); // Add a class
2button.classList.toggle('active'); // Toggle a class
DOM-elementen Aanmaken en Verwijderen
Nieuwe Elementen Aanmaken
Gebruik document.createElement() om een nieuw element te maken en dit aan de DOM toe te voegen.
1const newDiv = document.createElement('div'); // Create a new div element
2newDiv.textContent = 'This is a new element';
3document.body.appendChild(newDiv); // Append to the body element
Elementen verwijderen
Gebruik de methode remove() om een element te verwijderen.
1newDiv.remove(); // Remove the created element
Gebeurtenissen Toevoegen
Als onderdeel van DOM-manipulatie kun je gebeurtenishandlers toevoegen die reageren op gebruikersinteracties. Gebruik addEventListener() om gebeurtenissen zoals klikken en toetsenbordinteracties te verwerken.
1button.addEventListener('click', () => {
2 content.textContent = 'The text has been changed';
3});In dit voorbeeld verandert klikken op een knop de tekst van het #content-element.
Door de DOM-boom Navigeren
Je kunt door de DOM navigeren om ouder- en siblingelementen te benaderen.
parentNode: Geeft toegang tot de bovenliggende node.childNodes: Geeft toegang tot de onderliggende nodes. Je hebt toegang tot alle soorten nodes, niet alleen elementnodes zoals HTML-tags, maar ook tekstnodes en commentaarnodes.firstChild/lastChild: Geeft toegang tot het eerste en laatste kindelement.nextSibling/previousSibling: Geeft toegang tot de volgende en vorige siblingelementen.
1const parent = content.parentNode; // Get the parent element
2const firstChild = parent.firstChild; // Get the first child element
3console.log(firstChild);Voorbeeld: Een Nieuw Item Aan Een Lijst Toevoegen
Hier is een voorbeeld van het toevoegen van een nieuw item aan een lijst.
1// Get the container element where the HTML will be inserted
2const content = document.getElementById('content');
3
4// Create the <ul> element with id="list"
5const list = document.createElement('ul');
6list.id = 'list';
7
8// Add initial list items
9const item1 = document.createElement('li');
10item1.textContent = 'Item 1';
11list.appendChild(item1);
12
13const item2 = document.createElement('li');
14item2.textContent = 'Item 2';
15list.appendChild(item2);
16
17// Create the <button> element with id="addItem"
18const addItemButton = document.createElement('button');
19addItemButton.id = 'addItem';
20addItemButton.textContent = 'Add Item';
21
22// Append the list and button to the content container
23content.appendChild(list);
24content.appendChild(addItemButton);
25
26// Add event listener to the button
27addItemButton.addEventListener('click', () => {
28 const newItem = document.createElement('li');
29 newItem.textContent = 'New Item';
30 list.appendChild(newItem);
31});In deze code voegt het klikken op de knop "Item toevoegen" een nieuw <li>-element toe aan de lijst.
Samenvatting
- Met JavaScript DOM-manipulatie kun je elementen in een HTML-document ophalen, wijzigen, aanmaken en verwijderen.
- Je kunt elementen ophalen met methoden zoals
getElementById()enquerySelector(). - Gebruik
textContentofinnerHTMLom tekst en HTML te wijzigen, ensetAttribute()om attributen te manipuleren. - Gebruik
createElement()om nieuwe elementen aan te maken enremove()om ze te verwijderen. - Je kunt interactieve webpagina's maken die reageren op gebruikersacties via eventhandling.
Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.