Sådan manipuleres DOM i Vanilla JavaScript

Så du har lært variabler, udvælgelsesstrukturer og sløjfer. Nu er det tid til at lære om DOM-manipulation og begynde at lave nogle seje JavaScript-projekter.

I denne vejledning lærer vi, hvordan man manipulerer DOM med vanille JavaScript. Uden yderligere ado, lad os hoppe lige ind i det.

1. Første ting først

Før vi dykker ned i kodning, lad os lære, hvad Dom egentlig er:

Document Object Model (DOM) er en programmeringsgrænseflade til HTML- og XML-dokumenter. Det repræsenterer siden, så programmer kan ændre dokumentstruktur, stil og indhold. DOM repræsenterer dokumentet som noder og objekter. På den måde kan programmeringssprog oprette forbindelse til siden. Kilde

Dybest set, når en browser indlæser en side, opretter den en objektmodel af den side og udskriver den på skærmen. Objektmodellen er repræsenteret i en treddatastruktur, hver node er et objekt med egenskaber og metoder, og den øverste node er dokumentobjektet.

Et programmeringssprog kan bruges til at få adgang til og ændre denne objektmodel, og denne handling kaldes DOM-manipulation. Og det gør vi med JavaScript, fordi JS er fantastisk.

2. Den aktuelle vejledning

Til vejledningen skal vi bruge to filer, den ene index.html og den anden manipulation.js.

  DOM Manipulation 

DOM manipulation

Tutorial

Sibling

Medium Tutorial

Out of the div

Så der har vi vores HTML-fil, og som du kan se, har vi en div med id'et for division. Inde i det har vi et h1-element, og i samme linje vil du forstå hvorfor senere, vi har to p-elementer og div-lukkemærket. Endelig har vi et ap-element med en klasse tekst.

2.1. Adgang til elementerne

Vi kan enten få adgang til et enkelt element eller flere elementer.

2.1.1. Adgang til et enkelt element

For at få adgang til et enkelt element vil vi se på to metoder: getElementByID og querySelector.

// the method below selects the element with the id ofheadlet id = document.getElementById('head');
// the code below selects the first p element inside the first divlet q = document.querySelector('div p');
/* Extra code */// this changes the color to redid.style.color = 'red';// give a font size of 30pxq.style.fontSize = '30px';

Nu har vi fået adgang til to elementer, h1-elementet med id'et på hovedet og det første p- element inde i div.

getElementById tager som argument et id, og querySelector tager som argument en CSS-vælger og returnerer det første element, der matcher vælgeren. Som du kan se, tildelte jeg metodens resultat i variabler, og derefter tilføjede jeg nogle styling i slutningen.

2.1.2. Adgang til flere elementer

Når du får adgang til flere elementer, returneres en nodeliste. Det er ikke et array, men det fungerer som et. Så du kan løbe igennem det og bruge længdeegenskaben til at få størrelsen på nodelisten. Hvis du vil hente et bestemt element, kan du enten bruge matrixnotationen eller elementmetoden. Du vil se dem i koden.

For at få adgang til flere elementer skal vi bruge tre metoder: getElementsByClassName, getElementsByTagName og querySelectorAll.

// gets every element with the class of textlet className = document.getElementsByClassName('text');
// prints the node listconsole.log(className);
/* prints the third element from the node list using array notation */console.log(className[2]);
/* prints the third element from the node list using the item function */console.log(className.item(2));
let tagName = document.getElementsByTagName('p');let selector = document.querySelectorAll('div p');

Koden ser ud til at være selvforklarende, men jeg vil alligevel forklare den, fordi jeg er en dejlig fyr. :)

Først bruger vi getElementsByClassName, der tager et klassens navn som et argument. Det returnerer en nodeliste med hvert element, der har tekst som klasse. Derefter udskriver vi nodelisten på konsollen. Vi trykker også det tredje element fra listen ved hjælp af matrix notation og elementet metode .

For det andet vælger vi hvert p- element ved hjælp af getElementsByTagName-metoden, der tager et tagnavn som et argument og returnerer en nodeliste over dette element.

Endelig bruger vi querySelectorAll- metoden, der tager et CSS-vælger som argument. I dette tilfælde tager det div p, så det returnerer en nodeliste med p- elementer inde i en div.

Som en øvelse kan du udskrive alle elementerne fra tagName og listen over vælgerknuder og finde ud af deres størrelse.

2.2. Kører gennem DOM

Indtil videre har vi fundet en måde at få adgang til specifikke elementer. Hvad hvis vi vil have adgang til et element ved siden af ​​et element, som vi allerede har fået adgang til, eller få adgang til overordnet knudepunkt for et element, der tidligere er åbnet? Egenskaberne firstChild, lastChild, parentNode, nextSibling og previousSibling kan få dette job udført for os.

firstChild bruges til at hente det første underordnede element i en node. lastChild , som du gættede, får det det sidste underordnede element i en node. parentNode erbruges til at få adgang til et overordnet knudepunkt for et element. nextSibling får for os elementet ved siden af ​​det element, der allerede er tilgået, og previousSibling får for os elementet forud for det allerede tilgængelige element.

// gets first child of the element with the id of divisionlet fChild = document.getElementById('division').firstChild;console.log(fChild);
// gets the last element from element with the id of divisionlet lChild = document.querySelector('#division').lastChild;
// gets the parent node of the element with the id divisionlet parent = document.querySElector('#division').parentNode;console.log(parent);
// selects the element with the id of middlelet middle = document.getElementById('middle');// prints ond the console the next sibling of middleconsole.log(middle.nextSibling);

Koden ovenfor får først elementets firstChild- element med divisions-id'et og udskriver det derefter på konsollen. Derefter får det lastChild- elementet fra det samme element med divisions-id'et. Derefter får det parentNode på elementet med id'et for division og udskriver det på konsollen. Endelig vælger det elementet med id'et til midten og udskriver dets nextSibling- knude.

Most browsers treat white spaces between elements as text nodes, which makes these properties work differently in different browsers.

2.3. Get and Updating element content

2.3.1. Setting and getting text Content

We can get or set the text content of elements. To achieve this task we are going to use two properties: nodeValue and textContent.

nodeValue is used to set or get the text content of a text node. textContent is used to set or get the text of a containing element.

// get text with nodeValuelet nodeValue = document.getElementById('middle').firstChild.nodeValue;console.log(nodeValue);
// set text with nodeValuedocument.getElementById('middle').firstChild.nodeValue = "nodeValue text";
// get text with textContentlet textContent = document.querySelectorAll('.text')[1].textContent;console.log(textContent);
// set text with textContentdocument.querySelectorAll('.text')[1].textContent = 'new textContent set';

Did you notice the difference between nodeValue and textContent?

If you look carefully at the code above, you will see that for us to get or set the text with nodeValue, we first had to select the text node. First, we got the element with the middle id, then we got its firstChild which is the text node, then we got the nodeValue which returned the word Tutorial.

Now with textContent, there is no need to select the text node, we just got the element and then we got its textContent, either to set and get the text.

2.3.2. Adding and Removing HTML content

You can add and remove HTML content in the DOM. For that, we are going to look at three methods and one property.

Let’s start with the innerHTML property because it is the easiest way of adding and removing HTML content. innerHTML can either be used to get or set HTML content. But be careful when using innerHTML to set HTML content, because it removes the HTML content that is inside the element and adds the new one.

document.getElementById('division').innerHTML =`
      
  • Angular
  • Vue
  • React
`;

If you run the code, you will notice that everything else in the div with the id of division will disappear, and the list will be added.

We can use the methods: createElement(), createTextNode(), and appendChild() to solve this problem.

createElement is used to create a new HTML element. creatTextNode used to create a text node, and appendChild is used to append a new element into a parent element.

//first we create a new p element using the creatElementlet newElement = document.createElement('p');/* then we create a new text node and append the text node to the element created*/let text = document.createTextNode('Text Added!');newElement.appendChild(text);
/* then we append the new element with the text node into the div with the id division.*/document.getElementById('division').appendChild(newElement);

There is also a method called removeChild used to remove HTML elements.

// first we get the element we want to removelet toBeRemoved = document.getElementById('head');// then we get the parent node, using the parentNOde propertylet parent = toBeRemoved.parentNode;/* then we use the removeChild method, with the element to be removed as a parameter.*/parent.removeChild(toBeRemoved);

So first we get the element that we want to remove, and then we get its parent node. Then we called the method removeChild to remove the element.

2.4. Attribute node

Now we know how to handle elements, so let’s learn how to handle the attributes of these elements. There are some methods like GetAttribute, setAttribute, hasAttribute, removeAttribute, and some properties like className and id.

getAttribute as its name may suggest, it is used to get an attribute. Like the class name, the id name, the href of a link or any other HTML attribute.

setAttribute is used to set a new attribute to an element. It takes two arguments, first the attribute and second the name of the attribute.

hasAttribute used to check if an attribute exists, takes an attribute as an argument.

removeAttribute used to remove an attribute, it takes an attribute as an argument.

Id this property is used to set or get the id of an element.

ClassName is used to set or get the class of an element.

// selects the first divlet d = document.querySelector('div');// checks if it has an id attribute, returns true/falseconsole.log('checks id: '+d.hasAttribute('id'));// set a new class attributed.setAttribute('class','newClass');// returns the class nameconsole.log(d.className);

I know I am a good dude, but that code is just self-explanatory.

Conclusion

That is it! We have learned so many concepts, but there is more to learn about DOM manipulation. What we have covered here gives you a good foundation.

Go ahead and practice, and create something new to cement this new knowledge.

Good day, good coding.