Explication détaillée des méthodes DOM couramment utilisées dans js-js tutoriel-php.cn

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 !