Qu'est-ce que le DOM JavaScript HTML ?-js tutoriel-php.cn

Qu'est-ce que le DOM JavaScript HTML ?

黄舟

Libérer： 2017-08-04 10:28:44

original

1328 Les gens l'ont consulté

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>

Copier après la connexion

Lien du cours : //m.sbmmt.com/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>

Copier après la connexion

Lien du cours : //m.sbmmt.com/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>

Copier après la connexion

Lien du cours : //m.sbmmt.com/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>

Copier après la connexion

Lien du cours : //m.sbmmt.com/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>

Copier après la connexion

Lien du cours : //m.sbmmt.com/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!