JavaTutoriel sur le script DOM avec exemple
James Hartmann
Qu'est-ce que DOM dans JavaScénario?
JavaLe script peut accéder à tous les éléments d'une page Web en utilisant le modèle d'objet de document (DOM). En fait, le navigateur Web crée un DOM de la page Web lorsque la page est chargée. Le modèle DOM est créé sous la forme d'une arborescence d'objets comme ceci :
Comment utiliser DOM et les événements
En utilisant DOM, JavaUn script peut effectuer plusieurs tâches. Il peut créer de nouveaux éléments et attributs, modifier les éléments et attributs existants et même supprimer des éléments et attributs existants. Javascénario peut également réagir aux événements existants et créer de nouveaux événements dans la page.
getElementById, exemple innerHTML
- getElementById : pour accéder aux éléments et attributs dont l'identifiant est défini.
- innerHTML : Pour accéder au contenu d'un élément.
Essayez cet exemple vous-même :
<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1 id="one">Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p>This is the technology section.</p>
<script type="text/javascript">
var text = document.getElementById("one").innerHTML;
alert("The first heading is " + text);
</script>
</body>
</html>
Exemple getElementsByTagName
getElementsByTagName : pour accéder aux éléments et aux attributs à l'aide du nom de la balise. Cette méthode renverra un tableau de tous les éléments portant le même nom de balise.
Essayez cet exemple vous-même :
<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p id="second">This is the technology section.</p>
<script type="text/javascript">
var paragraphs = document.getElementsByTagName("p");
alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
document.getElementById("second").innerHTML = "The orginal message is changed.";
</script>
</body>
</html>
Exemple de gestionnaire d'événements
- createElement : Pour créer un nouvel élément
- RemoveChild : Supprimer un élément
- Vous pouvez ajouter un gestionnaire d'événements à un élément particulier comme celui-ci :
document.getElementById(id).onclick=function()
{
lines of code to be executed
}
OR
document.getElementById(id).addEventListener("click", functionname)
Essayez cet exemple vous-même :
<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<input type="button" id="btnClick" value="Click Me!!" />
<script type="text/javascript">
document.getElementById("btnClick").addEventListener("click", clicked);
function clicked()
{
alert("You clicked me!!!");
}
</script>
</body>
</html>
