Document Object Model , abrégé DOM, chinois :文档对象模型, est标准编程接口recommandée par l'organisation W3C pour le traitement des langages de balisage extensibles.
DOM Tree fait référence à解析de la page HTML via DOM et生成de树状结构HTML tree et访问方法correspondante . Avec l'aide de DOM Tree, nous pouvons utiliser directement et简易chaque contenu de balisage sur la page HTML, comme le code HTML suivant
<. html><tête>
<title>Jouer avec Dom</title></head><body>
<p>Je suis un nœud dom</p>
<p>
<p>p p</p>
</p></body></html> Résumé dans l'arborescence DOM comme suit : 
du
DOM, comment modifier le DOM et comment supprimer le DOM
Il existe de nombreuses API pour obtenir du DOM, mais elles sont toutes très simples, allez.
:
document.getElementById("id name"); Exemple :
<body>
<p id="p">Je suis un nœud p</p>
<script>
var p = document.getElementById("p");
console.log(p);
</script></body> 
Ouvrez la console et vous pouvez voir que vous avez obtenu avec succès
:
document.getElementsByTagName("tag name"); Exemple :
<body>
<p>Je suis un nœud p</p>
<p>Je suis aussi un nœud p</p>
<script>
var p = document.getElementsByTagName("p");
console.log(p);
pour (soit i = 0; i < p.length; i++) {
console.log(p[i]);
}
</script></body> 
Remarque : utilisez la méthode getElementsByTagName() pour renvoyer une collection d'objets avec des noms de balises spécifiés. Étant donné que ce qui est obtenu est une collection d'objets, nous devons parcourir si nous voulons faire fonctionner les éléments à l'intérieur. Remarque : les objets éléments obtenus en utilisant ceci. la méthode est dynamique de
:
document.getElementsByClassName("class name"); Exemple :
<body>
<p class="p">Je suis un nœud p</p>
<p class="p">Je suis un nœud p</p>
<script>
var p = document.getElementsByClassName("p");
console.log(p);
pour (soit i = 0; i < p.length; i++) {
console.log(p[i]);
}
</script></body> 
C'est aussi très simple, rappelez-vous-en
la syntaxe [recommandée] via la nouvelle API HTML5 :
document.querySelector("Voir les exemples pour plus de détails"); document.querySelectorAll
("Voir les exemples pour lesdétails
");
<p class="p">Je suis un nœud p</p>
<p class="name">Fleur de poirier</p>
<p id="info">Informations</p>
<script>
// Récupère la variable par nom de balise p = document.querySelector("p");
// Obtention via le nom de la classe, n'oubliez pas d'ajouter var qname = document.querySelector(".name");
// Récupère par identifiant, n'oubliez pas d'ajouter #
var info = document.querySelector("#info");
// Récupère tous les éléments correspondants et renvoie le tableau var all = document.querySelectorAll("p");
console.log(p);
console.log(qname);
console.log(infos);
pour (soit i = 0; i < all.length; i++) {
console.log(all[i]);
}
</script></body> 
Comme vous pouvez le constater, l'utilisation de la nouvelle API HTML5 est très flexible, c'est pourquoi j'aime beaucoup l'utiliser et je vous recommande d'en utiliser
. De plus, certains éléments spéciaux ont leurs propres méthodes d'acquisition, telles que . en tant que corps, l'élément html
Syntaxe de l'élément :
document.body
Exemple :
<body>;
<script>
var body = document.body;
console.log(corps);
</script></body> 
Comme vous pouvez le constater, tout le contenu de l’élément body a été obtenu avec succès.
la syntaxe
exemple de
document.documentElement:
<body>;
<script>
var html = document.documentElement;
console.log(html);
</script></body> 
Comme vous pouvez le voir, l'intégralité du code HTML de la page Web a été obtenue. OK, jusqu'à présent, l'acquisition de DOM est terminée. Commençons maintenant à créer et à ajouter dynamiquement du dom. Apprenez
à
opérer dom revient à jouer avec des données, ajouter, supprimer, modifier et vérifier, et créer et ajouter équivaut à ajouter. Lorsque nous ajoutons des données, nous devons d'abord avoir les données, puis les ajouter. Opérations DOM. Tout d'abord, nous devons créer le DOM, puis lui indiquer où l'ajouter. Enfin, l'opération est terminée. Apprenons ci-dessous comment créer un dom et comment ajouter un dom
. n'ayez pas peur, haha
Syntaxe :
document.createElement("Element Name" Exemple
:
Si vous souhaitez créer dynamiquement un élément p , vous pouvez l'écrire comme ceci. Il en va de même pour d'autres choses. Appliquer des inférences
p
= document.createElement("p"); .Utilisez-les selon la situation.L'un est dans l'élément parent.Ajouter à la fin de l'élément enfant, l'autre doit être ajouté après l'élément enfant spécifié.Syntaxe
d'
ajout
node.appendChild
(child);
<p>
<a href="">Baidu</a>
</p>
<script>
var p = document.createElement("p");
p.innerText = "Je suis p"
var p = document.querySelector("p");
p.appendChild(p);
</script></body> 
Créez dynamiquement la balise de paragraphe de l'élément p et écrivez le texte "Je suis p". Enfin, obtenez l'élément p et ajoutez p en tant qu'enfant de p. Cette méthode d'ajout est ajoutée à la fin, l'effet est donc celui indiqué dans la figure. ci-dessus.
Syntaxe :
node.insertBefore(child, selected element)
Exemple :
<body>;
<p>
<a href="">Baidu</a>
<span>Je suis mon petit frère span</span>
</p>
<script>
var p = document.createElement("p");
p.innerText = "Je suis p"
var p = document.querySelector("p");
var a = document.querySelector("a");
//Créez p sous p, avant l'élément a p.insertBefore(p, a);
</script></body> 
Est-ce la fin ? Oui, qu'en pensez-vous ? N'est-ce pas très simple ? Simple suffit. Il ne reste plus qu'à s'entraîner davantage. OK, passons à l'étape suivante : Comment modifier le DOM ?
se résume ainsi :
Exemple 1 : Récupérez la balise p de la page et modifiez le contenu en "Zhou Qiluo"
<body>
<p>
<p></p>
</p>
<script>
var p = document.querySelector("p");
p.innerText = "Zhou Qiluo";
</script></body> Exemple 2 : Cliquez sur le bouton pour générer un lien hypertexte Baidu
<body>
<p>
<button onclick="createBaidu()">Cliquez pour générer un lien hypertexte Baidu</button>
</p>
<script>
fonction createBaidu() {
var p = document.querySelector("p");
var a = document.createElement("a");
a.href = "https://www.baidu.com" ;
a.innerText = "Recherchez simplement Baidu et vous saurez" ;
p.append(a);
}
</script></body> 
Exemple 3 : cliquez sur le bouton, la couleur du texte dans la balise p devient verte et la tête du chien
<body>est modifiée manuellement.
<p>
<button onclick="changeColor()">Cliquez pour devenir vert</button>
<p>Je deviendrai vert dans un instant</p>
</p>
<script>
fonction changeColor() {
var p = document.querySelector("p");
p.style.color = "vert";
}
</script></body> 
La méthode node.removeChild() supprime un nœud enfant du DOM et renvoie le nœud supprimé
Syntaxe
:
node.removeChild(
child) ;
<p>
<button onclick="removeP()">Cliquez pour supprimer p</button>
<p>Je suis p, le temps sera écoulé dans un instant</p>
</p>
<script>
fonction supprimerP() {
var p = document.querySelector("p");
var p = document.querySelector("p");
p.removeChild(p);
}
</script></body> 