Introduction détaillée au DOM en JavaScript (exemple de code)

Le contenu de cet article est une introduction détaillée (exemple de code) sur DOM en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. aide.

1. DOM : modèle d'objet de document (document). Considérez la page HTML entière comme une arborescence inversée. HTML est le nœud racine de l'arborescence, et la tête et le corps sont les nœuds enfants de l'arborescence. Le modèle DOM nécessite que chaque paire de balises en html soit traitée comme un objet nœud pour fonctionner

2 Le rôle du DOM :

. JavaScript peut modifier le contenu de la page Tous les éléments HTML

JavaScript peut modifier tous les attributs HTML de la page
JavaScript peut modifier tous les styles CSS de la page
JavaScript peut réagir à tous les événements dans la page

3.DOM recherche des objets nœud d'élément dans la page :

3.1 : Rechercher un objet nœud d'élément dans la page par identifiant
par exemple :

var ob1=document.getElementById("d1");
 //将节点对象中内容输出
 alert(ob1.innerHTML);

3.2 : Grâce aux balises Recherchez la collection ou le tableau de nœuds d'éléments dans la page par nom
par exemple :

var arr1=document.getElementsByTagName("h2");
//遍历节点对象集合，输出每个对象的内容
for(var i=0;i<arr1.length;i++){
alert(arr1[i].innerHTML);
 }

3.3 : Recherchez la collection ou le tableau de nœuds d'éléments dans la page par nom de classe
par exemple :

var arr2=document.getElementsByClassName("c1");
            //遍历节点对象集合，输出每个对象的内容
            for(var i=0;i<arr2.length;i++){
                    alert(arr2[i].innerHTML);
            }

3.4 : Rechercher la collection ou le tableau de nœuds d'éléments via l'attribut name
par exemple :

var arr3=document.getElementsByName("hobby");
            //遍历节点对象集合，输出每个对象的value属性值
            for(var i=0;i<arr3.length;i++){
                alert(arr3[i].value);
           }

4. object (contenu du texte dans l'étiquette, sous-étiquette, texte de la sous-étiquette.... ..) :
4.1 : Obtenir le contenu du nœud : node object.innerHTML
eg:

alert(ob1.innerHTML);

4.2 : Modifier le contenu du nœud : node object.innerHTML="new value" ;

par exemple :

ob1.innerHTML="哈哈";

4.3 : Effacer le contenu du nœud :
par exemple :

ob1.innerHTML="";

5. Le contenu texte de l'objet nœud d'opération DOM (dans l'étiquette Texte et texte dans les sous-balises...) :
5.1 : Obtenir le contenu texte du nœud (texte dans les balises et texte dans sub-tags) : node object.innerText
eg :

alert(ob1.innerText);

5.2 : Modifier le contenu du texte du nœud (tout le contenu de l'étiquette est modifié) : node object.innerText="new value" ; 🎜> par exemple :

ob1.innerText="呵呵";

6. Fonctionnement DOM des objets nœuds Attributs :

6.1 : Obtenir les attributs de l'objet nœud : Objet nœud. Nom de l'attribut
par exemple :

 alert(ob2.src);

6.2 : Modifier les attributs de l'objet nœud : Node object.Attribute name="value";

eg :

 ob2.src="img/img-2.jpg";

6.3 : Supprimer les attributs de l'objet nœud : node object.removeAttribute ("nom de l'attribut") ;

par exemple :

ob2.attributes.removeNamedItem("title");
ob2.removeAttribute("title");

7.Opération DOM Style de l'objet nœud :

7.1 : Définissez le style de l'objet nœud : node object.style.style name= "style value";
par exemple :

ob1.style.color="red";
ob1.style.backgroundColor="blue";

7.2 : Obtenir le style de l'objet nœud : Node object.style.Style name

par exemple :

alert(ob1.style.color);

8. Événement

8.1 : onload : événement de chargement de page.
8.2 : onclick : événement clic de souris.
8.3 : onchange : événement de changement.
8.4 : onblur : Le curseur quitte l'événement.
8.5 : onfocus : Récupère l'événement curseur.
8.6 : onmouseover : événement de passage de souris.
8.7 : onmouseout : événement de sortie de la souris.

9.Objet nœud d'opération DOM

9.1 : Créer un objet nœud :
9.1.1 : Créer un objet nœud d'étiquette : document.createElement("nom de l'étiquette");
par exemple :

//创建节点对象
var node1=document.createElement("p");

par exemple :

//创建节点对象
var node1=document.createElement("h1");
node1.innerHTML="你好<span>中国</span>";

9.1.2 : Créer un objet texte : document.createTextNode("text content");

par exemple :

//创建文本对象
var node1text=document.createTextNode("这是一个段落");

9.2 : Ajouter un objet nœud : objet nœud.appendChild (nœud enfant);

par exemple :

//将节点对象添加body中
document.getElementById("d1").appendChild(node1);

//直接向一个标签中添加子节点
document.getElementById("d2").innerHTML=document.getElementById                                
("d2").innerHTML+"<h2>哈哈</h2><p>呵呵呵</p>";

9.3 : Supprimer un objet nœud : objet nœud parent.removeChild (objet nœud enfant);

par exemple :

//获得父节点对象
var parentNode=document.getElementById("d1")
 //获得要删除的子节点对象
 var childNode=document.getElementsByTagName("p")[0];
//删除子节点对象
//parentNode.removeChild(childNode);
//删除当前节点对象，只有谷歌，火狐
childNode.remove();

9.4 : Copier l'objet nœud : node object.cloneNode(true);

par exemple :

//获得要复制的节点对象
var childNode=document.getElementsByTagName("p")[0];
//复制节点对象,true表示复制节点的同时将内容复制，false反之
var copyNode=childNode.cloneNode(true);
//将复制的节点添加到body中
document.getElementById("d1").appendChild(copyNode);

9.5 : Remplacer les nœuds enfants dans les éléments : Parent noeud object.replaceChild(newnode,oldnode);

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!