Écrit par Chimezie Innocent✏️
Une page Web fluide qui fonctionne de manière dynamique avec les actions des utilisateurs lorsqu'ils parcourent leur boutique en ligne préférée ou un autre site est essentielle pour offrir la meilleure expérience possible. Mais sur quoi repose la base permettant aux utilisateurs d’accéder à tout ce contenu important à la demande ?
Les fichiers texte écrits en HTML indiquent aux navigateurs Web comment afficher le contenu dynamique attendu par les utilisateurs, et la manière dont le contenu de la page Web est consulté et modifié est appelée modèle d'objet de document ou DOM :
Le DOM comble le fossé entre votre structure HTML et JavaScript, vous permettant de modifier et d'interagir avec vos pages Web de manière dynamique. Certaines méthodes peuvent être utilisées pour modifier et interagir avec le DOM, et ces méthodes sont appelées méthodes DOM. Les méthodes DOM sont cruciales pour le développement frontend car elles permettent une interaction dynamique avec les pages Web, offrant ainsi aux utilisateurs une expérience de navigation Web plus fluide.
La maîtrise des méthodes DOM spécifiques fournies dans cet article vous permettra de créer une expérience utilisateur riche. Il existe de nombreuses méthodes DOM, mais cet article explorera uniquement les méthodes DOM essentielles pour le développement frontend et leurs cas d'utilisation associés. De plus, j'ai fourni un tableau au bas de l'article avec les noms, syntaxes et fonctions des méthodes DOM abordées ici.
Certaines méthodes DOM sont utilisées pour des tâches similaires, donc les regrouper nous aidera à mieux comprendre ce qu'elles font. Nous examinerons également des cas d'utilisation de ces méthodes DOM pour voir la meilleure façon de les utiliser.
Ces méthodes DOM sont utilisées pour rechercher et accéder à des éléments spécifiques dans l'arborescence DOM ou HTML.
Le premier sur la liste des méthodes de requête est le querySelector. Cette méthode sélectionne le premier élément qui correspond à un sélecteur CSS ou à un groupe de sélecteurs spécifié. Si aucune correspondance n'est trouvée, il renvoie une valeur nulle. Il utilise tous les sélecteurs CSS valides pour trouver un élément.
Regardons l'exemple ci-dessous :
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
<div class="first">
<p>This is a paragraph</p>
</div>
<div class="first">
<p>This is a paragraph</p>
</div>
<div id="second">
<p>Another paragraph</p>
</div>
</body>
<script src="/script.js"></script>
</html>
Le code ci-dessus affiche une page avec une balise h1, trois éléments div et trois balises p de paragraphe. Nous utiliserons cet exemple de code pour la majorité de nos exemples de cas d’utilisation.
Si vous avez remarqué, deux des divs ont un attribut de classe et également le même nom de classe tandis que l'autre a un attribut ID.
Comme nous l'avons expliqué précédemment, un querySelector trouve le premier élément qui correspond au sélecteur CSS. Cela signifie que nous pouvons utiliser la classe, l'ID et même leurs balises pour trouver un élément avec cette méthode. Voir ci-dessous :
// script.js
const element = document.querySelector("h1").textContent;
console.log(element);
const element2 = document.querySelector(".first").innerHTML;
console.log(element2);
const element3 = document.querySelector("#second").innerHTML;
console.log(element3);
À partir de ce qui précède, nous trouvons des éléments utilisant les attributs de nom de balise, de classe et d'ID. Les sorties résultantes sur la console seront : 
Nous n'avons obtenu le « Hello World » que parce que nous enregistrons le contenu du texte, comme vu ci-dessus, tout en obtenant le HTML interne complet des divs. De plus, nous avons deux div avec le même nom de classe, mais un seul est affiché dans le journal de notre console. En effet, querySelector récupère uniquement le premier élément avec le sélecteur CSS spécifié.
Encore une chose : on pourrait aller plus loin et utiliser des sélecteurs complexes avec la méthode querySelector. Puisque toutes les chaînes de sélecteur CSS sont valides, nous pouvons même utiliser des sélecteurs de négation. Consultez le cas d'utilisation ci-dessous pour voir comment nous pouvons apporter une légère modification à notre code HTML :
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello World</h1>
<div class="first">
<p class="paragraph main">This is a paragraph</p>
</div>
<div class="first">
<p class="paragraph">This is a second paragraph</p>
</div>
<div id="second">
<p>Another paragraph</p>
</div>
</body>
<script src="/script.js"></script>
</html>
Nous avons ajouté un paragraphe d'attribut de classe aux balises p dans les premiers divs et une autre classe principale à la première balise p :
// script.js
const element = document.querySelector("div p").textContent;
console.log(element);
const element2 = document.querySelector("div.first .paragraph:not(.main)").textContent;
console.log(element2);
Voici le résultat résultant : 
Puisque nous pouvons accéder aux éléments enfants du DOM en spécifiant d'abord l'élément parent, puis en approfondissant la hiérarchie DOM, nous pouvons accéder au premier paragraphe en utilisant div p, div étant le nœud parent. et p étant le nœud enfant.
De plus, dans la deuxième requête, nous avons cette fois obtenu le deuxième paragraphe au lieu du premier. En effet, dans notre sélecteur CSS, nous obtenons le premier élément qui n'est pas la classe principale.
Le deuxième sur la liste des méthodes de requête est querySelectorAll. Cette méthode DOM obtient ou renvoie une NodeList statique contenant tous les éléments DOM qui correspondent au ou aux groupes de sélecteurs spécifiés. Cette méthode est utile pour sélectionner ou interroger plusieurs éléments de la même classe.
Remarque : une NodeList est simplement une collection de nœuds. querySelectorAll() renvoie une NodeList statique, ce qui signifie que toute modification dans le DOM n'affecte pas le contenu de la collection.
Regardez le cas d'utilisation ci-dessous :
// script.js
const element = document.querySelectorAll("div");
console.log(element);
const element2 = document.querySelectorAll(".first");
console.log(element2);
console.log(typeof element)
As explained, querySelectorAll() will return a node list of all the divs. Additionally, we are checking what type of primitive the returned element is, and as expected, when we console log the element’s type, it returns an object: 
After getting the node list, we can loop through the elements using any of the loops like map, forEach, and so on to make whatever changes we want:
// script.js
const element = document.querySelectorAll(".first");
element.forEach(paragraph => paragraph.innerHTML="This is great")
The below image shows how we are just changing the text content of the p tags — nothing fancy: 
This DOM method retrieves the element with a specific ID. This is best used when you need to select a single unique element quickly since IDs are required to be unique if specified. Unlike the querySelector and querySelectorAll, you don’t need to add the # selector when using the getElementById() method:
// script.js
const element = document.getElementById("second").textContent;
console.log(element);
This will return the element with the ID specified. The output of the console will be: 
This DOM method returns an array-like object containing all the child elements with the specified class names. Each element in the object can be accessed by its index:
// script.js
const element = document.getElementsByClassName("first");
console.log(element)
This will return all elements with the class name first. The output on the console will be: 
Similar to the querySelectorAll, this method is useful when you want to apply changes to multiple elements with the same class name. Let’s change the color:
// script.js
const element = document.getElementsByClassName("first");
Array.from(element).map((el) => (el.style.color = "red"));
In your webpage, the output becomes: 
This method is ideal for operations on a specific element as it returns an HTML collection of elements with specified tag names.
// script.js
const element = document.getElementsByTagName("p");
console.log(element)
On the console, the output will be logged as the following: 
Also, since element returns an array-like object, you can perform multiple changes at once by using any of the loop operators. Each element can also be accessed by its index, which starts at 0.
// script.js
const element = document.getElementsByTagName("p");
Array.from(element).map((el) => (el.style.color = "red"));
const last_item = element[2].textContent
console.log(last_item); // Another paragraph
The output results in the below: 
These DOM methods accomplish two uses — they help us retrieve information from elements and allow us set the content dynamically.
This method retrieves and sets the HTML content of an element. It specifically retrieves the HTML inside the element, including text and tags, and can also replace the HTML.
Let’s employ one h1 tag for this use case:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 id="h1">Hello World</h1>
</body>
<script src="/script.js"></script>
</html>
Next, we’ll write the following in our script:
// script.js
const element = document.getElementById("h1");
console.log(element.innerHTML);
element.innerHTML = "<h5>New Content</h5>";
console.log(element.innerHTML);
In our console, we will get the “Hello World” since we are retrieving the HTML content. Next, we’ll change the HTML tag to an h5 tag with new content. When we retrieve the new element, we see it has changed: 
As the name implies, this method gets and sets the text content of the node and its descendants. The best use case for this method is for getting and replacing the text content of an element without the HTML tags.
Let’s look at the use case below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 id="h1">This is <span>some</span> text!</h1>
</body>
<script src="/script.js"></script>
</html>
The above code renders a h1 tag with the text: “This is some text”
// script.js
const element = document.getElementById("h1");
console.log(element.textContent);
// change the content
element.textContent = "This is a new text";
console.log(element.textContent);
In our script.js file, we use the query method getElementById to retrieve the h1 tag. Next, we use the textContent method to change the content of our h1 text to “This is a new text”.
The output becomes the following: 
This group includes methods that allow you to modify DOM elements' attributes, properties, and content.
This method adds a specified class to an element’s class list. You can use the add method to toggle CSS classes to change an element’s appearance.
In our HTML, let’s add a style:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.newClass {
color: green;
}
</style>
</head>
<body>
<h1 id="h1">This is <span>some</span> text!</h1>
</body>
<script src="/script.js"></script>
</html>
The result is just a class with a green text color. Nothing happens when we load our page because we haven’t assigned the style to any element yet. Next, let’s assign the style to our h1 element using the add method:
// script.js
let element = document.getElementById('h1');
element.classList.add('newClass');
Reload your page and you will see that the header’s color has changed: 
This method removes a specified class from an element’s class list. The remove method takes out a CSS class to change the element’s appearance back to default.
// script.js
let element = document.getElementById('h1');
element.classList.remove('newClass');
This method creates a new HTML element with the specified tag name (e.g., div, p) and is essential for dynamically building elements on the page. You can create new paragraphs, buttons, or any other HTML element as needed:
// script.js
let newDiv = document.createElement('div');
This method inserts a child element as the last child of a parent element and adds newly created elements (with the createElement method) to an existing element in the DOM; this allows us to build complex structures dynamically. After a child element or node has been created, use appendChild to add the new element to the end of the list of children of the specified node.
See example below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 id="h1">This is <span>some</span> text!</h1>
<div id="div"></div>
</body>
<script src="/script.js"></script>
</html>
This is what we have before we append any new element: 
Next, let’s create a new element and add it to the empty div above.
// script.js
const parentNode = document.getElementById("div");
const textElement = document.createTextNode("This is a text node");
const pTag = document.createElement("p");
const newElement = pTag.appendChild(textElement);
parentNode.appendChild(newElement);
We included a text node and appended it to a p tag that we created using the createElement method. Next, we append the p tag to our div, which we have targeted using the getElementById method. The output then shows on our page as seen below: 
This method sets a specific style property on an element (e.g., color, font-size) and provides granular control over element styles. This lets you dynamically change the appearance of elements based on user interactions and other conditions.
The syntax of the setProperty method is:
element.style.setProperty(propertyName, value)
Where propertyName is the CSS property we want to target, and value indicates the values of the CSS property.
Look at the example below:
// script.js
const element = document.getElementById("h1");
element.style.setProperty("color", "red");
In the code above, we retrieve our element using its id: h1. Next, we use our setProperty method to change or set the color of the text content to red.
On our page, the output of the code is as shown: 
Event methods handle and manipulate events, enabling interactivity in webpages. The essential methods under this category include addEventListener() and removeEventListener().
This is one of the most important DOM methods that you will use. The method attaches an event listener to an element, allowing the element to respond to specific user interactions. An event is anything that happens in your system, program, or webpage. An event could be a click, a load, a focus, a keydown, or keyup event, and so on.
The addEventListener attaches to an element, a listener that listens to any of these events, and when the events happen, the listener triggers a specified interaction with that element.
The syntax for the addEventListener is the following:
addEventListener(type, listener)
Where type is the type of event you want to listen to, listener is the object that receives a notification or implements the event you want.
In our HTML, let’s add a button element:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button>Click Me!</button>
</body>
<script src="/script.js"></script>
</html>
In our JavaScript file, let’s add a listener that shows a “Hello World” alert whenever the button is clicked:
// script.js
const buttonElement = document.querySelector("button");
buttonElement.addEventListener("click", () => {
alert("Hello World");
});
Using the querySelector, we get the button element. Then, we attach a click event to it. Whenever the button is clicked, our listener function is executed:
The output becomes:
Similar to the addEventListener, this method removes an event listener from an element.
The syntax for this method is below:
removeEventListener(type, listener)
Where type is the type of event you are listening to and listener is the function that implements the event you want.
Let’s see a real-world use case to see this method in action. Copy and replace your HTML with the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Canvas Drawing</h1>
<canvas
id="drawingCanvas"
width="500"
height="500"
style="border: 2px solid black"
></canvas>
<div>
<button id="startDrawingBtn">Start Drawing</button>
<button id="stopDrawingBtn">Stop Drawing</button>
</div>
</body>
<script src="/script.js"></script>
</html>
It’s nothing fancy — we have a canvas element we can draw on and two buttons that allow us to draw on the canvas or not. The main interactivity comes in our JavaScript below:
// script.js
let startButton = document.getElementById("startDrawingBtn");
let stopButton = document.getElementById("stopDrawingBtn");
let canvas = document.getElementById("drawingCanvas");
let ctx = canvas.getContext("2d");
let drawing = false;
// draw function
function draw(event) {
if (!drawing) return;
ctx.lineWidth = 5;
ctx.lineCap = "round";
ctx.strokeStyle = "blue";
ctx.lineTo(
event.clientX - canvas.offsetLeft,
event.clientY - canvas.offsetTop
);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(
event.clientX - canvas.offsetLeft,
event.clientY - canvas.offsetTop
);
}
// mousedown handler
function handleMouseDown(event) {
drawing = true;
ctx.beginPath();
canvas.addEventListener("mousemove", draw);
}
// mouseup handler
function handleMouseUp() {
drawing = false;
ctx.beginPath();
canvas.removeEventListener("mousemove", draw);
}
// Function to start drawing
function startDrawing() {
canvas.addEventListener("mousedown", handleMouseDown);
canvas.addEventListener("mouseup", handleMouseUp);
}
// Function to stop drawing
function stopDrawing() {
drawing = false;
canvas.removeEventListener("mousedown", handleMouseDown);
canvas.removeEventListener("mouseup", handleMouseUp);
}
// Our event listeners
startButton.addEventListener("click", startDrawing);
stopButton.addEventListener("click", stopDrawing);
We get our button and canvas elements using the getElementById method. Next, we have three events: mouseup, mousedown, and mousemove. These events will be used for our canvas drawing.
We define two functions to handle our drawing state:
Finally, we attach click events to our buttons to trigger startDrawing or stopDrawing event functions when clicked.
The output becomes the following: 
Below is a summary of the different DOM methods we have seen so far in this article. The table includes the syntax and function of each method:
| Name | Syntax | Function |
|---|---|---|
| Query or Select methods | document.querySelector(selector) | Selects the first element that matches the specified CSS selector. |
| document.querySelectorAll(selector) | Selects all element that matches the specified CSS selector. Returns a `NodeList`. | |
| document.getElementById(id) | Selects an element by its ID. | |
| document.getElementsByClassName(className) | Selects all elements that have the specified class name. Returns an HTMLCollection. | |
| document.getElementsByTagName(tagName) | Selects all elements that have the specified tag name. Returns an HTMLCollection. | |
| Get Content Methods | element.innerHTML | Gets or sets the HTML content of an element. |
| element.textContent | Gets or sets the text content of an element. | |
| Attribute and Style Manipulation Methods | element.classList.add(className) | Adds a class to the class list of an element. |
| element.classList.remove(className) | Removes a class from the class list of an element. | |
| document.createElement(tagName) | Creates a new element with the specified tag name. | |
| element.appendChild(childNode) | Adds or inserts a child element/node as the last child of a parent element. | |
| element.style.setProperty(propertyName, value) | Sets a new value to a specific style property on an element. | |
| Event Handling methods | element.addEventListener(event, handleFunction) | Attaches an event listener to an element, allowing the element to respond to specific user interactions. |
| element.removeEventListener(event, handleFunction) | Removes an event handler that has been attached to an element. |
Nous avons examiné les méthodes DOM essentielles et vu des cas d'utilisation pour chacune. La maîtrise de ces méthodes DOM est non seulement cruciale pour tout développeur frontend, mais cela vous permet également de créer des applications Web dynamiques et interactives. L'interrogation des éléments DOM, la manipulation du contenu et des attributs, ainsi que la gestion des événements et des styles fournissent tous les outils fondamentaux nécessaires pour contrôler et améliorer efficacement l'expérience utilisateur.
Le débogage du code est toujours une tâche fastidieuse. Mais plus vous comprenez vos erreurs, plus il est facile de les corriger.
LogRocket vous permet de comprendre ces erreurs de manière nouvelle et unique. Notre solution de surveillance front-end suit l'engagement des utilisateurs avec vos frontends JavaScript pour vous donner la possibilité de voir exactement ce que l'utilisateur a fait qui a conduit à une erreur.
LogRocket enregistre les journaux de la console, les temps de chargement des pages, les traces de pile, les requêtes/réponses réseau lentes avec en-têtes + corps, les métadonnées du navigateur et les journaux personnalisés. Comprendre l'impact de votre code JavaScript n'aura jamais été aussi simple !
Essayez-le gratuitement.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Comment désactiver le centre de sécurité Windows
Solution d'erreur MySQL 1171
Supprimer les fichiers Internet temporaires
utilisation de la fonction de longueur
La relation entre js et vue
Busyboxv1.30.1 ne peut pas démarrer
Comment réparer le système Win7 s'il est endommagé et ne peut pas être démarré
Comment acheter du Ripple en Chine
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
