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

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

WBOYoriginal: 2016-05-16 15:35:471192parcourir

É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>

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

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

Pour ajouter du texte à un élément e388a4556c0f65e1904146cc1a846bee, 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.");

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

para.appendChild(node);

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

Ce code trouve un élément existant :

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

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

element.appendChild(para);

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>

Exemple d'analyse

Ce document HTML contient un élément dc6dce4a544fdca2df29d5ac0ea9906b avec deux nœuds enfants (deux éléments e388a4556c0f65e1904146cc1a846bee) :

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

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

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

Recherchez l'élément e388a4556c0f65e1904146cc1a846bee avec id="p1":

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

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

parent.removeChild(child);

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);

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 e388a4556c0f65e1904146cc1a846bee 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>

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>

Déclaration：

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

Article précédent：Une brève discussion sur la programmation asynchrone asynchrone dans node.js_node.jsArticle suivant：Une brève discussion sur la programmation asynchrone asynchrone dans node.js_node.js

Articles Liés

Voir plus