HTML DOM-Modification
Modifier HTML = modifier les éléments, les attributs, les styles et les événements.
Modifier des éléments HTML
Modifier le DOM HTML signifie beaucoup de choses différentes :
Changer le contenu HTML
Changer le style CSS
Modifier l'attribut HTML
Créer un nouvel élément HTML
Supprimer les éléments HTML existants
Modifier l'événement (gestionnaire)
Dans le chapitre suivant, nous en apprendrons davantage sur la modification des méthodes HTML courantes du DOM.
Création de contenu HTML
Le moyen le plus simple de modifier le contenu d'un élément est d'utiliser la propriété innerHTML.
L'exemple suivant modifie le contenu HTML d'un élément <p> :
Exemple
<html><!DOCTYPE html>
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>Exécutez l'exemple »
Cliquez sur le bouton « Exécuter l'exemple » pour afficher l'exemple en ligne
 | 我们将在下面的章节为您解释例子中的细节。 |
|---|
Changer le style HTML
Via le DOM HTML , vous pouvez accéder à l'objet de style des éléments HTML.
L'exemple suivant modifie le style HTML d'un paragraphe :
Exemple
<html><!DOCTYPE html>
<html>
<body>
<p id="p1">Hello world!</p>
<p id="p2">Hello world!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
</body>
</html>Exécuter l'exemple»
Cliquez sur le bouton « Exécuter l'exemple » pour afficher l'exemple en ligne
Créer un nouvel élément HTML
Pour ajouter un nouvel élément au DOM HTML, vous devez créez d’abord l’élément (nœud d’élément), puis ajoutez-le à l’élément existant.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
