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:441269parcourir
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.
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('id1').style.color='red'"> 点我!</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!