Une brève analyse des techniques DOM_javascript en javascript

Qu'est-ce qu'un Dom ?

1. Introduction

Le Document Object Model (DOM) est une interface de programmation standard pour le traitement des langages de balisage extensibles recommandés par l'organisation W3C. 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 à l'aide de plates-formes et de 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. en HTML. Tous les éléments sont accessibles via le. DOMAINE.

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.

2.Illustration

À propos de la fenêtre, la page ou la fenêtre entière est un objet fenêtre--------------------la fenêtre est un objet de niveau supérieur

Les variables et méthodes définies dans la page sont toutes fenêtre

window.id

document.getElementById()

Window peut être omise lors de l'utilisation des propriétés et méthodes de l'objet window.

Par exemple :

window.alert('bonjour');

peut être omis comme alert('hello');

window.document peut écrire directement un document

N'écrivez pas window si vous le pouvez. Cela peut réduire le nombre d'octets dans le fichier js.

Copier le code Le code est le suivant :

window.alert('Bonjour tout le monde !');//Boîte de dialogue d'avertissement contextuelle
window.confirm('Êtes-vous sûr de vouloir supprimer ?');//Confirmez et annulez la boîte de dialogue, retournez true ou false;
window.navigate(url);//Re-naviguez la page Web vers l'URL, prend en charge IE et Opera11.6. Non recommandé, certains navigateurs ne fonctionnent pas,

Il est recommandé d'utiliser window.location.href='url';//Prend en charge la plupart des navigateurs

Manipulation dynamique des éléments DOM

1. Obtenez DOM

getElementById(), (très couramment utilisé), obtient un objet basé sur l'ID de l'élément. L'ID ne peut pas être répété dans la page Web. Vous pouvez également référencer l'élément directement par son identifiant, mais il existe une plage valide,

getElementsByName(), obtient un objet basé sur le nom de l'élément. Étant donné que les noms des éléments de la page peuvent être répétés, comme plusieurs RadioButtons portant le même nom, la valeur de retour de getElementsByName est un tableau d'objets.

getElementsByTagName(), obtient le tableau d'éléments du nom de balise spécifié. Par exemple, getElementsByTagName("input") peut obtenir toutes les balises * signifie toutes les balises

2. Ajouter, supprimer, remplacer

document.write ne peut être créé dynamiquement que lors du chargement de la page.

Vous pouvez appeler la méthode createElement du document pour créer un objet DOM avec une balise spécifiée, puis ajouter l'élément nouvellement créé à l'élément correspondant en appelant la méthode appendChild(); //Objet d'élément parent.removeChild (objet d'élément enfant) ; supprime l'élément.

createElement('element');Créer un nœud

appendChild(node); Ajouter un nœud

removeChild(node); supprimer un nœud

replaceChild(new,old); remplacer un nœud

insertBefore(new, reference); ajouter le nœud au premier plan (insérer devant un nœud)

Méthode :

Propriétés :

premierEnfant

dernierEnfant

3. Utilisez innerHTML ou createElement(), appendChild() et removeChild() ?

Lors de la manipulation des éléments de la page, dois-je utiliser innerHTML ou createElement(), appendChild() et removeChild() ?

1. Pour un grand nombre d'opérations de nœuds, les performances de l'utilisation de innerHTML sont meilleures que les opérations Dom fréquentes (il existe des analyseurs HTML spécifiquement écrits en C ou C.). Écrivez d'abord le code HTML de la page, puis appelez innerHTML une fois au lieu d'appeler innerHTML à plusieurs reprises.

2. Pour supprimer des nœuds à l'aide de innerHTML='', il y aura des problèmes de mémoire dans certains cas. Par exemple : il existe de nombreux autres éléments sous le div, et chaque élément est lié à un gestionnaire d'événements. À ce stade, innerHTML supprime simplement l'élément actuel de l'arborescence des nœuds, mais ces gestionnaires d'événements occupent toujours de la mémoire.

style de fonctionnement js

Modifiez le style d'un élément à l'aide de l'attribut className.

(class est un mot réservé en JavaScript, les attributs ne peuvent pas utiliser de mots-clés ou de mots réservés, il devient donc className) L'effet d'allumer et d'éteindre la lumière sur la page Web.

Vous ne pouvez pas modifier le style d'un élément this.style="background-color:Red".

Pour modifier les attributs de style individuellement, utilisez "style.property name". Notez que les noms d'attribut en CSS peuvent être différents lorsqu'ils sont utilisés en JavaScript. L'accent est mis principalement sur les attributs dont les noms d'attribut contiennent -, car - ne peuvent pas être utilisés comme noms d'attribut ou de classe en JavaScript.

Lors du fonctionnement du style flotteur

IE:obj.style.styleFloat='right';

Autres navigateurs : obj.style.cssFloat='right';

Objet formulaire

Couramment utilisé : click(), focus(), blur(); // Équivalent au déclenchement des événements de clic, de focus et de perte de focus d'un élément via un programme.

L'objet formulaire est l'objet Dom du formulaire.

Méthode : submit() soumet le formulaire, mais l'événement onsubmit ne sera pas déclenché.

Implémentez la publication automatique, c'est-à-dire que la page est soumise immédiatement après que le focus quitte le contrôle, au lieu de la soumettre uniquement après la soumission du bouton de soumission. Lorsque le curseur quitte, l'événement onblur est déclenché et la méthode de soumission du formulaire. est appelé en onblur.

Après avoir cliqué sur soumettre, l'événement onsubmit du formulaire est déclenché. La vérification des données peut être effectuée dans onsubmit. S'il y a un problème avec les données, renvoyez false pour annuler la soumission

.

Ce qui précède est ma compréhension personnelle du DOM de JavaScript. J'espère que vous l'aimerez tous.