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

Explication détaillée de la façon de parcourir et de modifier les instances dom en JavaScript

伊谢尔伦
Libérer: 2017-07-20 13:24:07
original
1990 Les gens l'ont consulté

Traverser le DOM

On peut écrire une fonction pour parcourir le DOM


function walkDOM(n) { 
 do { 
  alert(n); 
  if (n.hasChildNodes()) { 
   walkDOM(n.firstChild) 
  }   
 } while (n = n.nextSibling) 
} 
 
walkDOM(document.body);//测试
Copier après la connexion

Modifier les nœuds
Jetons un coup d'œil à la modification des nœuds DOM.
Obtenez d’abord le nœud à modifier.


var my = document.getElementById('closer');
Copier après la connexion

Il est très simple de modifier les propriétés de cet élément. Nous pouvons changer innerHTML.


my.innerHTML = 'final';//final
Copier après la connexion

Parce que innerHTML peut écrire du HTML, modifions donc le HTML.


my.innerHTML = &#39;<em>my</em> final&#39;;//<em>my</em> fnal
Copier après la connexion

la balise em fait désormais partie de l'arbre dom. Nous pouvons le tester


my.firstChild;//<em> 
my.firstChild.firstChild;//my
Copier après la connexion

Nous pouvons également modifier la valeur via nodeValue.


my.firstChild.firstChild.nodeValue = &#39;your&#39;;//your
Copier après la connexion

Modifier le style
La plupart des nœuds modifiés peuvent être des styles modifiés. Les nœuds d'élément ont l'attribut style pour modifier le style. Il existe une correspondance biunivoque entre les attributs de style et les attributs CSS. Le code suivant


my.style.border = "1px solid red";
Copier après la connexion

De nombreuses propriétés CSS ont des tirets ("-"), comme padding-top, ce qui est illégal en javascript. Dans ce cas, veillez à omettre le tilde et à mettre en majuscule la première lettre du deuxième mot, comme suit. margin-left devient marginLeft. Et ainsi de suite


my.style.fontWeight = &#39;bold&#39;;
Copier après la connexion

On peut également modifier d'autres propriétés, que ces propriétés soient initialisées ou non.


my.align = "right"; 
my.name = &#39;myname&#39;; 
my.id = &#39;further&#39;; 
my;//<p id="further" align="right" style="border: 1px solid red; font-weight: bold;">
Copier après la connexion


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!

É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