Présentation de plusieurs méthodes courantes du DOM js
Obtenir les nœuds d'éléments getElementById getElementsByTagName getElementsByClassName
Écrivez d'abord une page Web simple pour les tests :
/* test.html */ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <p id="contentId" style="width:500px; height: 30px;background-color: #ccc">这段的id是contentId。</p> <p class="contentClass" style="width:500px; height: 30px;background-color: #ccc">这段的class name是contentClass。</p> </body> </html>
1. 🎜>
1. Définissez d'abord la variable var contentId = document.getElementById("contentId"); 2. Sortez ensuite l'objet contentId et renvoyez l'objet élément avec l'identifiant contentId (Voir l'image ci-dessous :
2. getElementsByTagName 1. Définissez d'abord la variable var contentTag = document.getElementsByTagName("p");2. Ensuite, je génère contentTag, qui renvoie HTMLCollection [
,
3. Continuez contentTag[0] et la sortie
contentTag[ 1] Sortie
De cela, nous pouvons voir getElementsByTagName Ce qui est renvoyé est un tableau !
3. getElementsByClassName
1. var contentClass = document.getElementsByClassName("contentClass");
2. sortie contentClass HTMLCollection [
3. contentClass[0] sortie
Nous utilisons également couramment les méthodes getAttribute, setAttribute, ChildNodes, nodeType, nodeValue, firstChild et lastChild pour obtenir certaines informations.
4. Utilisez getAttribute et setAttribute pour obtenir et définir les attributs respectivement :
Après avoir modifié l'attribut de style :
5. Ensuite, voici les childNOdes :
C'est-à-dire,
Il existe un caractère de nouvelle ligneEt si c'était
?
Il existe 12 types de valeurs nodeType, et il y en a trois couramment utilisées : 1 représente le nœud d'élément, 2 représente le nœud d'attribut et 3 représente le nœud de texte.
nodeValue peut non seulement obtenir la valeur du nœud de texte, mais également modifier la valeur du nœud de texte.
Ce qui précède est l'intégralité du contenu de cet article. J'espère que le contenu de cet article pourra apporter une certaine aide aux études ou au travail de chacun. J'espère également soutenir le PHP. Site chinois !
Pour des explications plus détaillées sur les méthodes DOM couramment utilisées en js, veuillez faire attention au site Web PHP chinois !