JAVASCRIPT Tutorial
DOM (Document Object Model) är en representation av HTML-dokumentet i form av ett träd. Varje nod i trädet representerar ett element i dokumentet.
Ett JavaScript-ramverk är ett bibliotek med verktyg och komponenter som förenklar utvecklingen av webbapplikationer. De hanterar vanligtvis DOM-manipulering, datahantering och routing.
Virtual DOM är en in-memory-representation av DOM som möjliggör effektivare uppdateringar. När en komponent ändras uppdateras den virtuella DOM, och de faktiska DOM-ändringarna begränsas till endast de delar som behöver ändras.
Komponentbaserad utveckling är en teknik där applikationer byggs upp av återanvändbara komponenter. Varje komponent har sin egen logik, UI och data.
Hur interagerar JavaScript-ramverk med DOM?
JavaScript-ramverk använder vanliga DOM-APIer för att manipulera DOM. De ger dock ett högre abstraktionslager som förenklar processen och gör den mer effektiv.
Låt oss använda React för att ändra ett DOM-elements färg:
import React, { useState } from 'react';
function App() {
const [color, setColor] = useState('red');
const handleClick = () => {
setColor('blue');
};
return (
<div style={{ color: color }}>
<button onClick={handleClick}>Ändra färg</button>
</div>
);
}
export default App;
I det här exemplet hanterar React DOM-manipuleringen internt. När vi klickar på knappen uppdateras den virtuella DOM, och React utför de nödvändiga ändringarna i den faktiska DOM, vilket ändrar elementets färg till blått.