Introduction au DOM JavaScript
Qu'est-ce qu'un Dom ?
Document Object Model (DOM) est une interface de programmation standard recommandée par l'organisation W3C pour le traitement des langages de balisage extensibles. L'histoire du Document Object Model remonte à la « guerre des navigateurs » entre Microsoft et Netscape à la fin des années 1990. Afin de rivaliser pour la vie ou la mort en JavaScript et JScript, les deux parties ont doté les navigateurs de fonctionnalités puissantes à grande échelle. Microsoft a ajouté de nombreux éléments propriétaires à la technologie Web, notamment VBScript, ActiveX et le format DHTML propre à Microsoft, ce qui empêche de nombreuses pages Web de s'afficher correctement sur des plates-formes et des navigateurs non Microsoft. DOM est le chef-d’œuvre brassé à cette époque.
DOM (Document Object Model) est l'interface de programmation d'application (API) du HTML et du XML. DOM planifiera la page entière dans un document composé de niveaux de nœuds.
Le soi-disant modèle d'objet de document est en fait une représentation interne de divers éléments dans le HTML d'une page Web, tels que les en-têtes, les paragraphes, les listes, les styles, les identifiants, etc. passé par la visite des DOM Come.
JavaScript doit en fin de compte faire fonctionner les pages HTML, transformant le HTML en DHtml, et le fonctionnement des pages HTML nécessite l'utilisation du DOM. DOM simule la page HTML dans un objet. Si JavaScript n'effectue que quelques calculs, boucles et autres opérations, mais ne peut pas faire fonctionner le HTML, il perdra le sens de son existence.
DOM est le modèle de la page HTML. Chaque balise est traitée comme un objet. JavaScript peut contrôler par programme les zones de texte, les calques et autres éléments de la page Web en appelant les propriétés et les méthodes du DOM. Par exemple, en manipulant l'objet DOM de la zone de texte, vous pouvez lire et définir la valeur dans la zone de texte.
JavaScript peut modifier tous les éléments HTML de la page
JavaScript peut modifier tous les attributs HTML de la page
JavaScript peut modifier tous les styles CSS de la page
JavaScript est capable de réagir à tous les événements de la page
Trouver des éléments HTML
Habituellement, avec JavaScript, vous devez manipuler des éléments HTML.
Pour ce faire, vous devez d'abord trouver l'élément. Il existe trois façons de procéder :
Rechercher l'élément HTML par identifiant
Rechercher l'élément HTML par nom de balise
Rechercher l'élément HTML par nom de classe
Le moyen le plus simple de trouver un élément HTML dans le DOM est d'utiliser l'identifiant de l'élément.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<head>
<body>
<div id="div1">
<p id="p1">
我是第一个P</p>
<p id="p2">
我是第二个P</p>
</div>
<script>
window.onload = function () {
var str = document.getElementById("p1").innerHTML;
alert(str); //弹出 我是第一个P
}
</script>
</body>
</html>Trouver un élément HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<head>
<body>
<div id="div1">
<p id="p1">
我是第一个P</p>
<p id="p2">
我是第二个P</p>
</div>
<script>
window.onload = function () {
var str = document.getElementsByTagName("p")[1].innerHTML;
alert(str); //输出 我是第二个P，因为获取的是索引为1的P，索引从0开始
}
</script>
</body>
</html>Trouver un élément HTML
par nom de classe<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<head>
<body>
<div id="div1">
<p id="p1" class="class1">
我是第一个P</p>
<p id="p2">
我是第二个P</p>
</div>
<script>
window.onload = function () {
var node = document.getElementsByClassName("class1")[0];
alert(node.innerHTML);
}
</script>
</body>
</html> 
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
