Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée des méthodes DOM couramment utilisées dans js

高洛峰
Libérer: 2017-02-06 09:16:06
original
1535 Les gens l'ont consulté

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>
Copier après la connexion

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 :

 js常用DOM方法详解

2. getElementsByTagName

1. Définissez d'abord la variable var contentTag = document.getElementsByTagName("p");

2. Ensuite, je génère contentTag, qui renvoie HTMLCollection [ , ] au total. L'un commence par # pour représenter l'identifiant et l'autre commence par . nom.

3. Continuez contentTag[0] et la sortie

contentTag[ 1] Sortie

 js常用DOM方法详解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 [ Un tableau d'objets élément, même s'il n'y en a qu'un.

3. contentClass[0] sortie

 js常用DOM方法详解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 :

 js常用DOM方法详解Après avoir modifié l'attribut de style :

 js常用DOM方法详解5. Ensuite, voici les childNOdes :

 js常用DOM方法详解C'est-à-dire,

Il existe un caractère de nouvelle ligne
et le navigateur le traitera comme un nœud de texte lors de la recherche de nœuds enfants. On peut également voir sur la figure que childNodes renvoie également un tableau.

Et si c'était  ?

 js常用DOM方法详解 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.

 js常用DOM方法详解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 !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal