Explication détaillée de la façon dont JavaScript exploite les éléments et styles HTML

Explication détaillée de la façon dont JavaScript exploite les éléments et styles HTML_Connaissances de base

WBOY

Libérer： 2016-05-16 15:35:47

original

1247 Les gens l'ont consulté

Élément JavaScript HTML DOM (nœud)
Créer un nouvel élément HTML
Pour ajouter un nouvel élément au DOM HTML, vous devez d'abord créer l'élément (nœud d'élément), puis ajouter l'élément à un élément existant.
Exemple

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

Copier après la connexion

Exemple d'analyse :
Ce code crée un nouvel élément

var para=document.createElement("p");

Copier après la connexion

Pour ajouter du texte à un élément

, vous devez d'abord créer un nœud de texte. Ce code crée un nœud de texte :

var node=document.createTextNode("This is a new paragraph.");

Copier après la connexion

Ensuite, vous devez ajouter ce nœud de texte à l'élément

para.appendChild(node);

Copier après la connexion

Enfin, vous devez ajouter le nouvel élément à un élément existant.

Ce code trouve un élément existant :

var element=document.getElementById("div1");

Copier après la connexion

Le code suivant ajoute un nouvel élément après un élément existant :

element.appendChild(para);

Copier après la connexion

Supprimer les éléments HTML existants

Ce code ajoute un nouvel élément à cet élément existant : Exemple

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

Copier après la connexion

Exemple d'analyse

Ce document HTML contient un élément

avec deux nœuds enfants (deux éléments

) :

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

Copier après la connexion

Trouver l'élément avec id="div1":

var parent=document.getElementById("div1");

Copier après la connexion

Recherchez l'élément

avec id="p1":

var child=document.getElementById("p1");

Copier après la connexion

Supprimez les éléments enfants des éléments parents :

parent.removeChild(child);

Copier après la connexion

lampe Ce serait génial si vous pouviez supprimer un élément sans référencer l'élément parent.

Mais c'est dommage. Le DOM doit connaître l'élément que vous devez supprimer et son élément parent.

Il s'agit d'une solution courante : recherchez l'élément enfant que vous souhaitez supprimer, puis utilisez sa propriété parentNode pour rechercher l'élément parent :

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

Copier après la connexion

JavaScript HTML DOM - Modification du CSS
Le HTML DOM permet à JavaScript de modifier le style des éléments HTML.
Changer le style HTML
Pour changer le style d'un élément HTML, utilisez cette syntaxe : document.getElementById(id).style.property=nouveau style
L'exemple suivant modifie le style de l'élément

Exemple

Cet exemple change le style de l'élément HTML avec id="id1" lorsque l'utilisateur clique sur le bouton :

<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

Copier après la connexion

Exemple

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
Click Me!</button>

</body>
</html>

Copier après la connexion