En JavaScript, les méthodes d'utilisation du DOM pour traiter les éléments d'un document HTML incluent : l'obtention d'éléments (tels que getElementById, getElementsByTagName, querySelector), des éléments d'exploitation (tels que innerHTML, externalHTML, textContent), la création de nouveaux éléments (tels que createElement, createTextNode) , l'ajout ou la suppression d'éléments (tels que appendChild, insertBefore, RemoveChild) et la gestion des événements (tels que addEventListener, re
Comment gérer les éléments DOM en JavaScript ?
Réponse : En JavaScript, vous pouvez utiliser DOM (Document Object Model) Pour traiter des éléments dans des documents HTML
Méthodes de traitement spécifiques :
1. Obtenir des éléments
-
getElementById(id) : Obtenez un seul élément en fonction de son attribut id.
- getElementsByTagName(tagName) : obtenez l'ensemble de tous les éléments correspondants en fonction du nom de balise de l'élément
- getElementsByClassName(className) : obtenez l'ensemble de tous les éléments correspondants en fonction du nom de classe de l'élément .
- querySelector(selector) : utilisez le sélecteur CSS pour obtenir la correspondance.
- querySelectorAll(selector) : utilisez le sélecteur CSS pour obtenir l'ensemble de tous les éléments correspondants
2.
innerHTML- : obtient ou définit le code HTML en ligne de l'élément
outerHTML- : obtient ou définit le contenu HTML complet de l'élément, y compris lui-même. l'élément, à l'exclusion des éléments enfants.
value- : obtient ou définit la valeur de l'élément de formulaire (comme une zone de texte ou une liste déroulante).
style- : obtient ou définit l'attribut de style de l'élément. , prend en charge le style en ligne
- 3. Créez un nouvel élément
createElement(tagName) : Créez un nouvel élément HTML
createTextNode(text)- : Créez un nouveau nœud de texte .
- 4. Ajouter ou supprimer des éléments
appendChild(child) : Ajouter un élément enfant à l'élément parent à la fin
insertBefore(newChild, refChild)- : Insérer le nouvel élément enfant avant le. élément enfant spécifié.
removeChild(child)- : supprime l'élément enfant spécifié de l'élément parent.
- 5. Gestion des événements
addEventListener(type, handler) : ajoutez un écouteur d'événement à l'élément.
removeEventListener(type, handler)- : Supprime un écouteur d'événement.
- Exemple :
<code class="javascript">// 获取元素
const element = document.getElementById("my-element");
// 设置元素文本
element.textContent = "Hello World!";
// 添加事件监听器
element.addEventListener("click", function() {
alert("Element clicked!");
});
// 创建新元素
const newElement = document.createElement("p");
// 设置新元素文本
newElement.textContent = "New element";
// 附加新元素
element.appendChild(newElement);</code>
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!
Déclaration:Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn