Πώς να χειριστείτε το DOM σε JavaScript Vanilla

Έτσι, έχετε μάθει μεταβλητές, δομές επιλογής και βρόχους. Τώρα είναι καιρός να μάθετε για το χειρισμό DOM και να αρχίσετε να κάνετε μερικά ωραία έργα JavaScript.

Σε αυτό το σεμινάριο, θα μάθουμε πώς να χειριζόμαστε το DOM με JavaScript βανίλιας. Χωρίς άλλη παραλλαγή, ας περάσουμε κατευθείαν σε αυτό.

1. Τα πρώτα πράγματα πρώτα

Πριν βυθίσουμε στην κωδικοποίηση, ας μάθουμε τι είναι πραγματικά το Dom:

Το Document Object Model (DOM) είναι μια διεπαφή προγραμματισμού για έγγραφα HTML και XML. Αντιπροσωπεύει τη σελίδα έτσι ώστε τα προγράμματα να μπορούν να αλλάξουν τη δομή, το στυλ και το περιεχόμενο του εγγράφου. Το DOM αντιπροσωπεύει το έγγραφο ως κόμβους και αντικείμενα. Με αυτόν τον τρόπο, οι γλώσσες προγραμματισμού μπορούν να συνδεθούν στη σελίδα. Πηγή

Βασικά, όταν ένα πρόγραμμα περιήγησης φορτώνει μια σελίδα δημιουργεί ένα μοντέλο αντικειμένου αυτής της σελίδας και το εκτυπώνει στην οθόνη. Το μοντέλο αντικειμένου αντιπροσωπεύεται σε μια δομή δεδομένων δέντρου, κάθε κόμβος είναι ένα αντικείμενο με ιδιότητες και μεθόδους και ο κορυφαίος κόμβος είναι το αντικείμενο εγγράφου.

Μια γλώσσα προγραμματισμού μπορεί να χρησιμοποιηθεί για πρόσβαση και τροποποίηση αυτού του μοντέλου αντικειμένου και αυτή η ενέργεια ονομάζεται χειρισμός DOM. Και θα το κάνουμε με JavaScript γιατί το JS είναι φοβερό.

2. Το πραγματικό σεμινάριο

Για το σεμινάριο, θα χρειαστούμε δύο αρχεία, ένα index.html και το άλλο manipulation.js.

  DOM Manipulation 

DOM manipulation

Tutorial

Sibling

Medium Tutorial

Out of the div

Έχουμε λοιπόν το αρχείο HTML, και όπως βλέπετε έχουμε ένα div με το αναγνωριστικό διαίρεσης. Μέσα από αυτό έχουμε ένα στοιχείο h1, και στην ίδια γραμμή, θα καταλάβετε γιατί αργότερα, έχουμε δύο στοιχεία p και την ετικέτα κλεισίματος div. Τέλος έχουμε ένα στοιχείο ap με μια κλάση κειμένου.

2.1. Πρόσβαση στα στοιχεία

Μπορούμε είτε να έχουμε πρόσβαση σε ένα στοιχείο είτε σε πολλά στοιχεία.

2.1.1. Πρόσβαση σε ένα μόνο στοιχείο

Για πρόσβαση σε ένα στοιχείο, θα εξετάσουμε δύο μεθόδους: getElementByID και 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';

Τώρα έχουμε αποκτήσει πρόσβαση σε δύο στοιχεία, το στοιχείο h1 με το id της κεφαλής και το πρώτο στοιχείο p στο div.

getElementById παίρνει ως όρισμα ένα id και το querySelector παίρνει ως όρισμα έναν επιλογέα CSS και επιστρέφει το πρώτο στοιχείο που ταιριάζει με τον επιλογέα. Όπως βλέπετε, εκχώρησα το αποτέλεσμα των μεθόδων σε μεταβλητές και μετά πρόσθεσα κάποιο στυλ στο τέλος.

2.1.2. Πρόσβαση σε πολλά στοιχεία

Κατά την πρόσβαση σε πολλά στοιχεία, επιστρέφεται μια λίστα κόμβων. Δεν είναι ένας πίνακας αλλά λειτουργεί σαν έναν. Έτσι, μπορείτε να πραγματοποιήσετε βρόχο και να χρησιμοποιήσετε την ιδιότητα μήκους για να λάβετε το μέγεθος της λίστας κόμβων. Εάν θέλετε να λάβετε ένα συγκεκριμένο στοιχείο, μπορείτε είτε να χρησιμοποιήσετε τη σημείωση του πίνακα είτε τη μέθοδο του στοιχείου. Θα τα δείτε στον κώδικα.

Για πρόσβαση σε πολλά στοιχεία πρόκειται να χρησιμοποιήσουμε τρεις μεθόδους: getElementsByClassName, getElementsByTagName και 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');

Ο κώδικας φαίνεται να είναι αυτονόητος, αλλά θα τον εξηγήσω ούτως ή άλλως γιατί είμαι καλός φίλε. :)

Αρχικά, χρησιμοποιούμε το getElementsByClassName που παίρνει ένα όνομα τάξης ως όρισμα. Επιστρέφει μια λίστα κόμβων με κάθε στοιχείο που έχει κείμενο ως κλάση. Στη συνέχεια εκτυπώνουμε τη λίστα κόμβων στην κονσόλα. Εκτυπώνουμε επίσης το τρίτο στοιχείο από τη λίστα χρησιμοποιώντας τη σημείωση του πίνακα και τη μέθοδο του αντικειμένου .

Δεύτερον, επιλέγουμε κάθε στοιχείο p χρησιμοποιώντας τη μέθοδο getElementsByTagName που παίρνει ένα όνομα ετικέτας ως όρισμα και επιστρέφει μια λίστα κόμβων αυτού του στοιχείου.

Τέλος, χρησιμοποιούμε τη μέθοδο querySelectorAll , που παίρνει ως επιχείρημα έναν επιλογέα CSS. Σε αυτήν την περίπτωση, παίρνει div p έτσι θα επιστρέψει μια λίστα κόμβων των στοιχείων p μέσα σε ένα div.

Ως πρακτική άσκηση, εκτυπώστε όλα τα στοιχεία από τη λίστα κόμβων tagName και επιλογέα και μάθετε το μέγεθός τους.

2.2. Διασχίζοντας το DOM

Μέχρι στιγμής έχουμε βρει έναν τρόπο πρόσβασης σε συγκεκριμένα στοιχεία. Τι γίνεται αν θέλουμε να αποκτήσουμε πρόσβαση σε ένα στοιχείο δίπλα σε ένα στοιχείο στο οποίο έχουμε ήδη αποκτήσει πρόσβαση ή να αποκτήσουμε πρόσβαση στον γονικό κόμβο ενός στοιχείου στο οποίο είχαμε προηγουμένως πρόσβαση; Οι ιδιότητες firstChild, lastChild, parentNode, nextSibling και previousSibling μπορούν να κάνουν αυτήν την εργασία για εμάς.

Το firstChild χρησιμοποιείται για να πάρει το πρώτο θυγατρικό στοιχείο ενός κόμβου. lastChild , όπως μαντέψατε, παίρνει το τελευταίο θυγατρικό στοιχείο ενός κόμβου. Ο γονικός κώδικας είναιχρησιμοποιείται για πρόσβαση σε έναν γονικό κόμβο ενός στοιχείου. nextSibling παίρνει για μας το στοιχείο δίπλα στο στοιχείο που έχει ήδη προσπελαστεί, και το προηγούμενοSibling λαμβάνει για μας το στοιχείο πριν από το στοιχείο που έχει ήδη προσπελαστεί.

// 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);

Ο παραπάνω κωδικός παίρνει πρώτα το στοιχείο firstChild του στοιχείου με το αναγνωριστικό διαίρεσης και στη συνέχεια το εκτυπώνει στην κονσόλα. Στη συνέχεια, παίρνει το στοιχείο LastChild από το ίδιο στοιχείο με το αναγνωριστικό διαίρεσης. Στη συνέχεια, παίρνει το γονικό στοιχείο του στοιχείου με το αναγνωριστικό διαίρεσης και το εκτυπώνει στην κονσόλα. Τέλος, επιλέγει το στοιχείο με το αναγνωριστικό της μέσης και εκτυπώνει τον επόμενο κόμβο του.

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.