Maison > Article > interface Web > Qu'est-ce que le DOM JavaScript HTML ?

Qu'est-ce que le DOM JavaScript HTML ?

黄舟original: 2017-08-04 10:28:441319parcourir

Qu'est-ce que le JavaScript HTML DOM ?

Le DOM HTML permet d'accéder à tous les éléments d'un document HTML JavaScript.

HTML DOM (Document Object Model)

Lorsqu'une page Web est chargée, le navigateur crée le modèle d'objet de document de la page.

Grâce au modèle objet programmable, JavaScript gagne suffisamment de puissance pour créer du HTML dynamique.

Quest-ce que le DOM JavaScript HTML ?

RecommandéTutoriel JavaScriptCours d'apprentissage

1.JavaScript HTML

HTML DOM permet à JavaScript de modifier le contenu des éléments HTML.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通过脚本修改文本。</p>
</body>
</html>

Lien du cours : http://www.php.cn/code/3743.html

2. JavaScript HTML DOM - Modification du CSS

Il existe 4 façons de modifier le CSS en JavaScript :

Modifier le style du nœud (style en ligne);

Modifier la classe ou l'identifiant du nœud;

Écrire un nouveau CSS;

Remplacer la feuille de style dans la page.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1 id="id1">我的标题 1</h1>
<button type="button" onclick="document.getElementById(&#39;id1&#39;).style.color=&#39;red&#39;">
点我!</button>
</body>
</html>

Lien du cours : http://www.php.cn/code/3748.html

3. Événements JavaScript HTML DOM

HTML DOM donne à JavaScript la possibilité de réagir aux événements HTML.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
<button onclick="displayDate()">试一试</button>
<script>
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>

Lien du cours : http://www.php.cn/code/3752.html

4.JavaScript HTML DOM EventListener

<!DOCTYPE html> 
<html>
<meta charset="utf-8"> 
<body> 
<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>
 <p>点击按钮执行计算。</p>
 <button id="myBtn">点我</button> 
 <p id="demo"></p> 
 <script> 
 var p1 = 5; var p2 = 7; 
 document.getElementById("myBtn").addEventListener("click", function() { 
 myFunction(p1, p2);
 });
 function myFunction(a, b) { 
 var result = a * b; 
 document.getElementById("demo").innerHTML = result; 
 } 
 </script> 
 </body> 
 </html>

Lien du cours : http://www.php.cn/code/3755.html

5. Éléments JavaScript HTML DOM

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

<!DOCTYPE html> 
<html> 
<meta charset="utf-8">
<body>
 <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> 
</body>
 </html>

Lien du cours : http://www.php.cn/code/3757.html

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!

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：Résumé des opérations sur les tableaux JavaScriptArticle suivant：Résumé des opérations sur les tableaux JavaScript

Articles Liés

Voir plus