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>

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <head> <style type="text/css"> body {background-color:#eeeeee} </style> </head> <body> <h3>通过 id 查找 HTML 元素</h3> <p id = "hw">Hello world!</p> <script> x = document.getElementById("hw"); document.write('<p>id="hw"的段落的文本是：'+x.innerHTML+'</p>'); </script> <button onclick = "setCurrentTime()">将id="hw"的文字改为当前时间</button> <script> function setCurrentTime(){ x = document.getElementById("hw"); x.innerHTML = Date() } </script> <h3>通过标签名查找 HTML 元素</h3> <div id = "mainDiv"> <p>This is a paragragph.</p> <p>This is another paragragph.</p> <p>Yes you're right! This is also paragragph.</p> </div> <script> xx = document.getElementById("mainDiv"); tagContents = xx.getElementsByTagName("p"); document.write("<p>使用Javascript查找id为mainDiv下的p标签的内容</p>"); for(i=0;;i++){ var tag = tagContents[i] if(tag!=null){ document.write("<p>"+tag.innerHTML+"</p>") }else{ document.write("<p>共有"+i+"条内容</p>") break; } } </script> <h3>修改 CSS 样式</h3> <p> <span id = "para_1">This is a test paragraph.</span> <button onclick="changeTextColor()">改变文字颜色</button> </p> <p> <span id = "para_2">This is another paragraph. <button onclick="changeTextFont()">改变字体</button> </p> <p> <span id = "para_3">This is HELLO WORLD.</span> <button onclick="changeTextSize()">改变字号</button> </p> <p> <button onclick="changeVisibility()">显示/隐藏</button> <span id = "para_4">示例文字</span> </p> <script> function changeTextColor(){ ele_1 = document.getElementById("para_1"); ele_1.style.color = "red"; } function changeTextFont(){ ele_2 = document.getElementById("para_2"); ele_2.style.fontFamily = "Arial"; } function changeTextSize(){ ele_3 = document.getElementById("para_3"); ele_3.style.fontSize = "larger"; } document.getElementById("para_4").style.visibility = "visible" function changeVisibility(){ ele_4 = document.getElementById("para_4"); if(ele_4.style.visibility.match("visible")){ ele_4.style.visibility = "hidden" }else{ ele_4.style.visibility = "visible" } } </script> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Introduction au DOM JavaScript

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]