Articles
Introduktion till JavaScript
JavaScript och HTML

JavaScript och HTML

Den här artikeln förklarar JavaScript och HTML.

YouTube Video

Objektet window i JavaScript

window-objektet i JavaScript är det globala objektet i en webbläsarmiljö och tillhandahåller funktioner och information relaterade till webbsidan och webbläsarfönstret. Eftersom window är webbläsarens globala omfattning, blir all JavaScript-kod som körs i webbläsaren en del av window-objektet. window-objektet spelar en viktig roll när JavaScript körs i webbläsarmiljön och tillhandahåller många API:er och egenskaper.

Viktiga funktioner hos window-objektet

Egenskaper 

 1// Get and display the document's title
 2console.log(window.document.title);
 3
 4// Get and display the current URL
 5console.log(window.location.href);
 6
 7// Go back to the previous page
 8window.history.back();
 9
10// Display the browser's user agent
11console.log(window.navigator.userAgent);
12
13// Display the width and height of the viewport
14console.log(`Width: ${window.innerWidth}, Height: ${window.innerHeight}`);
  • window.document: Åtkomst till det aktuella HTML-dokumentet.
  • window.location: Hanterar den aktuella URL:en och webbläsarnavigeringen.
  • window.history: Åtkomst till webbläsarens historik och möjliggör framåt- och bakåtnavigering.
  • window.navigator: Ger information om webbläsaren och enheten.
  • window.innerWidth / window.innerHeight: Hämtar bredden och höjden på visningsområdet.

Metoder 

 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(): Visar en varningsdialog.
  • window.confirm(): Visar en dialog som ber om användarens bekräftelse och returnerar ett OK- eller Avbryt-resultat.
  • window.prompt(): Visar en dialog för att be om användarinmatning och hämtar det angivna värdet.
  • window.open(): Öppnar ett nytt fönster eller flik.
  • window.setTimeout() / window.setInterval(): Ställer in en timer för att köra en funktion efter en viss tid eller med regelbundna intervall.

Händelsehantering 

 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: En händelse som körs när sidan har laddats färdigt.
  • window.onresize: En händelse som körs när fönsterstorleken ändras.
  • window.onscroll: En händelse som triggas när användaren rullar sidan.

Roll som en global variabel 

1var myVar = 10;
2console.log(window.myVar); // 10
  • window-objektet håller globala variabler och funktioner. Med andra ord blir deklarerade variabler och funktioner automatiskt egenskaper tillhörande window.

DOM-manipulering i JavaScript

JavaScript DOM (Document Object Model)-manipulering används för att dynamiskt interagera med element på webbsidan. DOM representerar strukturen för ett HTML-dokument som ett träd, vilket kan ändras med JavaScript för att modifiera strukturen och styra sidans visning.

Grunderna i DOM

DOM behandlar HTML för en webbsida som objekt, vilket möjliggör åtkomst och ändring av element och attribut. Använd document-objektet för att komma åt HTML-dokumentet.

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Example of DOM Manipulation</title>
 5  </head>
 6  <body>
 7    <div id="content">Hello, World!</div>
 8    <button id="changeText">Change Text</button>
 9  </body>
10</html>

Hämta DOM-element

JavaScript har flera metoder för att komma åt element i DOM.

  • document.getElementById(): Hämta ett element med hjälp av id-attributet
  • document.getElementsByClassName(): Hämta element med ett klassnamn (HTMLCollection)
  • document.getElementsByTagName(): Hämta element med hjälp av taggnamn (HTMLCollection)
  • document.querySelector(): Hämta det första matchande elementet med en CSS-selektor
  • document.querySelectorAll(): Hämta alla matchande element med en CSS-selektor (NodeList)

Exempel: getElementById och querySelector 

1const content = document.getElementById('content');
2console.log(content.textContent); // "Hello, World!"
3
4const button = document.querySelector('#changeText');

DOM-manipulering

Olika operationer kan utföras på de erhållna elementen.

Ändra text

För att ändra texten på ett element, använd textContent eller innerHTML.

  • textContent: Hämta eller ändra textinnehållet för ett element. HTML-taggar tolkas inte.
  • innerHTML: Hämta eller ändra HTML-innehållet för ett element. Strängar med HTML-taggar behandlas också.
1content.textContent = 'Hello, world!';  // Change the text
2button.innerHTML = '<strong>Click to change</strong>';  // Change including HTML

Ändra attribut

Använd setAttribute() och getAttribute() för att ändra elementattribut.

1button.setAttribute('disabled', 'true');  // Disable the button
2const id = content.getAttribute('id');  // Get the "content"

Ändra CSS

Använd egenskapen style för att ändra CSS-stilar.

1content.style.color = 'red';  // Change the text color to red
2content.style.fontSize = '20px';  // Change the font size

Hantera klasser

Använd classList för att lägga till eller ta bort klasser från ett element.

  • add(): Lägg till en klass
  • remove(): Ta bort en klass
  • toggle(): Lägg till eller ta bort en klass beroende på om den finns eller ej
  • contains(): Kontrollera om en klass existerar
1content.classList.add('highlight');  // Add a class
2button.classList.toggle('active');   // Toggle a class

Skapa och ta bort DOM-element

Skapa nya element

Använd document.createElement() för att skapa ett nytt element och lägga till det i DOM.

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

Ta bort element

Använd metoden remove() för att ta bort ett element.

1newDiv.remove();  // Remove the created element

Lägga till händelser

Som en del av DOM-manipulation kan du lägga till händelsehanterare som svarar på användarinteraktioner. Använd addEventListener() för att hantera händelser som klick och tangentbordsinteraktioner.

1button.addEventListener('click', () => {
2    content.textContent = 'The text has been changed';
3});

I detta exempel ändras texten i #content-elementet när du klickar på en knapp.

Navigera i DOM-trädet

Du kan navigera i DOM för att komma åt föräldrar och syskonelement.

  • parentNode: Kom åt föräldranoden
  • childNodes: Kom åt barnnoder (av alla typer)
  • firstChild / lastChild: Första/sista barnelementet
  • nextSibling / previousSibling: Nästa syskonelement/föregående syskonelement
1const parent = content.parentNode;  // Get the parent element
2const firstChild = parent.firstChild;  // Get the first child element
3console.log(firstChild);

Exempel: Lägga till en ny post i en lista

Här är ett exempel på att lägga till ett nytt objekt i en lista.

 1<ul id="list">
 2  <li>Item 1</li>
 3  <li>Item 2</li>
 4</ul>
 5<button id="addItem">Add Item</button>
 6
 7<script>
 8    const list = document.getElementById('list');
 9    const addItemButton = document.getElementById('addItem');
10
11    addItemButton.addEventListener('click', () => {
12        const newItem = document.createElement('li');
13        newItem.textContent = 'New Item';
14        list.appendChild(newItem);
15    });
16</script>

I den här koden läggs ett nytt <li>-element till i listan när du klickar på knappen "Lägg till objekt".

Sammanfattning

  • Manipulering av JavaScript-DOM låter dig hämta, ändra, skapa och ta bort element i ett HTML-dokument.
  • Du kan hämta element med metoder som getElementById() och querySelector().
  • Använd textContent eller innerHTML för att ändra text och HTML, och setAttribute() för att manipulera attribut.
  • Använd createElement() för att skapa nya element och remove() för att ta bort dem.
  • Du kan skapa interaktiva webbsidor som svarar på användarens handlingar genom händelsehantering.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video

Generatorfunktioner i JavaScript