Explication détaillée de l'exemple de code du DOM javascript

Cet article présente principalement l'explication détaillée et l'exemple de code du javascript DOM. Les amis dans le besoin peuvent se référer au

résumé du DOM javascript

. J'ai toujours pensé que DOM (DocumentObjectModel) est la partie la plus simple de JS. Il est indéniable que c'est en effet très simple, car le mode de pensée du DOM est un peu fixe, et il suffit de se souvenir de certaines méthodes fixes, donc DOM peut être considéré comme le point de départ de tous les js (il s'agit ici du client js).

Récemment, alors que je faisais quelques exercices utiles au DOM, j'ai découvert que mes connaissances du DOM étaient très fragmentées (j'ai toujours pensé que j'en avais une bonne compréhension). Beaucoup d'amis peuvent penser cela. DOM s'appelle simplement Appeler quelques méthodes, ou j'utilise jQuery directement, sans avoir à considérer du tout les détails du DOM. Oui, c'est vrai. L'encapsulation du DOM par jQuery est sans précédent, mais tout comme en grandissant, vous devez être capable de marcher avant de pouvoir courir, donc je pense que vous devez avoir une compréhension plus détaillée du DOM, j'ai donc résumé ce qui suit à propos du DOM. méthodes d'utilisation.

Dans le résumé W3C des spécifications DOM, certaines sont très couramment utilisées et d'autres ne sont pas très utiles. Ici, nous discutons principalement de certaines opérations DOM (lié au DOM Les concepts de base de ne seront pas introduits ici) :

Niveau de nœud

Le soi-disant niveau de nœud fait référence à le

document html, et la relation entre les nœuds constitue une hiérarchie (en fait, elle peut être imaginée comme une structure arborescente). Une interface NODE est définie dans la spécification DOM niveau 1 du W3C. Cette interface possède quelques méthodes très utiles :

Node.ELEMENT_NODE; (nœud d'élément)

Node.TEXT_NODE; (nœud de texte)

　 Node.DOCUMENT_NODE (nœud de document)

Et chaque nœud a son propre indicateur de type de nœud, qui est l'attribut NodeType, tel que nodeType de l'élément node == ' 1';nodeType de noeud de texte == '3';nodeType de noeud de document == '9';

　1. Noeud de document

Le noeud de document est dans un document Il est représenté par l'objet document, et ses caractéristiques de base sont les suivantes :

tip one (nœud enfant du document) :

console.log(document.nodeType); // 9 
console.log(document.nodeName); // #document 
console.log(document.nodeValue); // null 
console.log(document.parentNode); // null(它已经是最顶层的节点，树的根节点)

1.document.documentElement peut obtenir l'objet html, et il peut également être obtenu via Document.childNodes[0] et document.firstchild sont obtenus. Cependant, documentElement offre un accès plus rapide et plus direct aux éléments.

deuxième conseil (informations relatives au document) :

1. Obtenez le titre du document : document.title;

2. Obtenez l'URL complète : document.URL;

　3. Obtenez le nom de domaine (ip) : document.domain;

　4. Obtenez l'URL de la page : document.referrer;

astuce trois (élément de recherche de document) :

1. Pass id: document.getElementById("xxx"); Généralement, l'identifiant de la page sera différent s'il y a plusieurs identifiants identiques, le premier élément avec cet identifiant sera récupéré.

　2. Via tagName : document.getElementsByTagName("xxx"); Renvoie la collection d'éléments avec le nom de balise "xxx" !

　3. Via nom : document.getElementByName();

Il est très simple de comprendre l'objet document, et la compatibilité est également relativement avancée.

2. Nœud d'élément

Le nœud d'élément donne accès aux noms de balises d'élément, aux sous-nœuds et aux attributs. Ses caractéristiques de base sont les suivantes :

var ele = document.getElementById("element"); //通过document取到一个标签对象 
console.log(ele.nodeType); // 1 
console.log(ele.nodeName); // 返回元素的标签名 
console.log(ele.nodeValue); //永远返回null!

astuce un (élément html) :

astuce deux (obtention, définition et suppression d'attributs) :

　<p id="myp" class="bd" title="Body text" lang="en" dir="ltr"></p>
　　　　var p = document.getElementById("p");
　　　　1. console.log(p.id); // "myp"
　　　　2. console.log(p.className); // "bd"
　　　　3. console.log(p.title); // "Body text"
　　　　4. console.log(p.lang); // "en"
　　　　5. console.log(p.dir); // "ltr"

A noter : dans les versions IE7 et inférieures, il existe des comportements anormaux dans les trois méthodes. Les attributs de classe et de style sont définis via set, en particulier lorsque l'événement

　1.p.getAttribute("id"); // "myp"
　　　　2.p.setAttribuye("id","yourp"); // id已变动
　　　　3.p.removeAttribute("id"); //id已删除

gère le programme, il n'y en a pas. L'effet est le même pour get. Par conséquent, dans le développement général, les trois méthodes ci-dessus doivent être évitées et il est recommandé de définir les caractéristiques via des attributs.

troisième astuce (nœud enfant de l'élément) :

Ce sur quoi je veux me concentrer est ici, le code suivant :

3. Texte node

<ul id="myList"> 
  <li>Item 1</li> 
  <li>Item 2</li> 
  <li>Item 3</li> 
</ul> 
 
var mL = document.getElementById("myList"); 
//很明显mL对象有三个元素节点，我们也知道用childNodes属性去找到节点数，然而陷阱随之而来 
 
console.log(mL.childNodes); // 7 
//?!怎么会有7个? 
 
//原因在于childNodes中不仅包含了元素节点，还有4个文本节点。因此需要过滤 
 
for(var i=0,len=ml.childNodes.length;i<len;i++){ 
   if(ml.childNodes[i].nodeType == "1"){ // 利用元素节点的特性 
     // .... 
   }   
}<br>//最好的方法可以这么做<br>//如果元素对象内部标签名是一样的<br>var items = ml.getElementsByTagName("li"); //能得到三个li节点对象 
　　

Les nœuds de texte contiennent du contenu en texte brut qui peut être interprété littéralement. Le texte brut peut contenir des caractères HTML échappés, mais ne peut pas contenir de codes HTML. Les caractéristiques de base des nœuds de texte sont les suivantes :

Astuce 1 :

<p id="myp">123</p> 
 
var myp = document.getElementById("myp") //取到元素节点 
var tx = myp.childNodes[0] //前面也提过childNodes的特性，这次取到了文本节点 
 
console.log(tx.nodeType) // 3 
console.log(tx.nodeName) // 所有文本节点的nodeName都是"#text"; 
console.log(tx.nodeValue) // 123(节点包含的文本)，注意元素节点是不能取到它包含的文本节点的文本的 
 
//所以其父节点显然是个元素节点.

Deux méthodes pour créer des nœuds de texte : document.createTextNode(), document.createText();

Après création, il ne sera pas directement intégré dans le document et devra être référencé.

De cette façon, une balise comme e388a4556c0f65e1904146cc1a846bee12394b3e26ee717c64999d7867364b1b4a3 apparaîtra à la fin du corps

Personnellement, je pense que DOM est définitivement le point d'entrée pour apprendre le js, mais il faut aussi beaucoup de temps pour le peaufiner. J'ai lu le DOM pas moins de trois fois, ce n'est que la spécification DOM niveau 1, et il y a quelque chose de nouveau à chaque fois. Si vous apprenez le DOM, vous devez faire attention à certains pièges et y consacrer plus de temps.

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!