Introduction au HTML DOM et nouvelles fonctionnalités

Introduction

Dans le noyau DOM, les propriétés et méthodes fournies peuvent déjà faire fonctionner des pages Web. Pourquoi avons-nous besoin de HTMLDOM ?
Si le niveau du nœud dans la page Web est très profond dans le DOM principal, il sera très difficile d'accéder à ce nœud.
Ensuite, HTMLDOM fournit une méthode pour rechercher les nœuds directement par ID, au lieu de partir du nœud racine HTML.

Nouvelles fonctionnalités de HTMLDOM

Chaque balise HTML correspond à un objet élément. Par exemple : <img> correspond à un objet image
Les attributs de chaque balise HTML correspondent aux attributs de l'objet élément correspondant dans une correspondance biunivoque.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
        <script type="text/javascript">
        window.onload = function(){
            //获取网页中id=img01的图片对象
            var imgObj = document.getElementById("img1");
            //修改图片的属性的值，图片标记的属性，元素对象也能用。
            imgObj.src = "/upload/course/000/000/009/580af7f52278b486.jpg";
            imgObj.width = 400;
            imgObj.border = 2;
            imgObj.style = "cursor:pointer";
            imgObj.title = "唯美图片";
            //核心DOM中的属性方法，元素对象都能用
            imgObj.parentNode.bgColor = "#f0f0f0";
        }
        </script>
    </head>
    <body >
        <img id="img1" src="/upload/course/000/000/009/580ae23c4a88a881.jpg" />
    </body>
</html>

Formation continue

nouveau fichier

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <script type="text/javascript"> window.onload = function(){ //获取网页中id=img01的图片对象 var imgObj = document.getElementById("img1"); //修改图片的属性的值，图片标记的属性，元素对象也能用。 imgObj.src = "/upload/course/000/000/009/580af7f52278b486.jpg"; imgObj.width = 400; imgObj.border = 2; imgObj.style = "cursor:pointer"; imgObj.title = "唯美图片"; //核心DOM中的属性方法，元素对象都能用 imgObj.parentNode.bgColor = "#f0f0f0"; } </script> </head> <body > <img id="img1" src="/upload/course/000/000/009/580ae23c4a88a881.jpg" /> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Introduction au HTML DOM et nouvelles fonctionnalités

É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]