Qu'est-ce que DOM?
1. Introduction
Le modèle d'objet de document (DOM) est une interface de programmation standard recommandée par les organisations W3C pour gérer les langages de logo extensibles. Le modèle d'objet de document remonte à la "bataille du navigateur" entre Microsoft et Netscape à la fin des années 1990. Afin de combattre la vie et la mort avec JScript en JavaScript, les deux parties ont donné au navigateur des fonctions puissantes à grande échelle. Microsoft a ajouté de nombreuses choses exclusives à la technologie des pages Web, notamment VBScript, ActiveX et le format DHTML de Microsoft, qui rend de nombreuses pages Web incapables d'afficher normalement à l'aide de plates-formes et de navigateurs non microsoft. Dom est un chef-d'œuvre qui a été brassé à l'époque.
DOM (Document Object Model) est une interface de programme d'application (API) pour HTML et XML. Le DOM planifiera toute la page dans un document composé de niveaux de nœud.
Le modèle d'objet dit de document est en fait une représentation interne de divers éléments dans la page Web HTML, tels que les en-têtes, les paragraphes, les listes, les styles, les identifiants, etc. dans HTML. Tous les éléments sont accessibles via DOM.
JavaScript doit finalement faire fonctionner la page HTML et transformer le HTML en DHTML, et DOM est nécessaire pour faire fonctionner la page HTML. DOM doit simuler la page HTML dans un objet. Si JavaScript effectue uniquement des calculs, des boucles et d'autres opérations et ne peut pas fonctionner HTML, il perdra son sens.
Dom est le modèle de la page HTML. Chaque balise est utilisée comme objet. JavaScript peut contrôler programmatiquement des zones de texte, des calques et d'autres éléments de la page Web en appelant des propriétés et des méthodes dans le DOM. Par exemple, en exploitant l'objet DOM de la zone de texte, vous pouvez lire les valeurs dans la zone de texte et définir les valeurs dans la zone de texte.
2. Illustration
About window the entire page or window is a window object----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Les variables et méthodes définies dans la page sont la fenêtre
window.id
document.getElementById ()
Lorsque vous utilisez des propriétés et des méthodes d'objets de fenêtre, la fenêtre peut être omise.
Par exemple:
Window.Alert ('Hello');
Peut être omis pour alerte («bonjour»);
Window.Document peut être écrit directement avec un document
Si vous ne pouvez pas écrire une fenêtre, ne l'écrivez pas, car cela peut réduire le nombre d'octets dans le fichier JS.
La copie de code est la suivante:
Window.Alert («Bonjour à tous!»); // La boîte de dialogue d'avertissement apparaît
window.confirm («Êtes-vous sûr de vouloir le supprimer?
window.navigate (url); // re-navire la page Web à URL, en prenant en charge IE et OPERA11.6. Non recommandé, certains navigateurs ne fonctionnent pas,
Il est recommandé d'utiliser Window.Location.Href = 'URL'; // Prise en charge de la plupart des navigateurs
Opérer dynamiquement les éléments DOM
1. Obtenez le dom
getElementById (), (très couramment utilisé), obtenir l'objet en fonction de l'ID de l'élément, et l'ID dans la page Web ne peut pas être répété. Vous pouvez également vous référer aux éléments directement via l'ID de l'élément, mais il y a une portée valide.
getElementsByName (), obtenez l'objet en fonction du nom de l'élément. Étant donné que les noms des éléments de la page peuvent être répétés, tels que les noms de plusieurs radiobuttons, la valeur de retour de GetElementsByName est un tableau d'objets.
getElementsByTagName (), obtenez un tableau d'éléments avec le nom de balise spécifié. Par exemple, GetElementsByTagName ("entrée") peut obtenir toutes les balises <prening>. * Indique toutes les étiquettes
2. Ajouter, retirer, remplacer
Document.Write ne peut être créé dynamiquement que lors du chargement des pages.
Vous pouvez appeler la méthode CreateElelement du document pour créer un objet DOM avec la balise spécifiée, puis ajouter l'élément nouvellement créé à l'élément correspondant en appelant l'AplendChild (); Méthode d'un certain élément. // Parent Element object.reMoveChild (Child Element Object); supprimer l'élément.
createElement ('élément'); Créer un nœud
APPENDCHILD (NODE); Ajouter un nœud
RemoveChild (nœud); RemoveChild (nœud); Supprimer un nœud
RemplaceChild (nouveau, ancien); remplacer un nœud
Insèrefore (nouveau, se référer à); Ajouter le nœud à l'avant (insérer à l'avant d'un nœud)
méthode:
propriété:
premier child
dernier
3. Utilisez InnerHtml ou CreateElement (), APPENDCHILD () et RemoveChild ()?
Lors de la manipulation des éléments de la page, devrions-nous utiliser InnerHTML, CreateElement (), APPENDCHILD () et RemoveChild ()?
1. Lors de l'exécution d'un grand nombre d'opérations de nœud, les performances de l'utilisation de l'InnerHTML sont meilleures que les opérations DOM fréquentes (il existe des analyseurs HTML spécialement écrits en C ou C ++.). Écrivez d'abord le code HTML de la page, puis appelez InnerHTML une fois, au lieu d'appeler à plusieurs reprises InnerHTML.
2. Pour la suppression des nœuds en utilisant 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. À l'heure actuelle, InnerHTML supprime simplement l'élément actuel de l'arborescence du nœud, mais ces gestionnaires d'événements occupent toujours de la mémoire.
Style d'opération JS
Le style de l'élément est la propriété ClassName.
(La classe est un mot réservé dans JavaScript. L'attribut ne peut pas utiliser les mots clés ou les mots réservés, il devient donc ClassName) l'effet des lumières de commutation de la page Web.
Modifier le style de l'élément ne peut pas être this.style = "background-Color: Red".
Utilisez "Style. Nom d'attribut" pour modifier séparément les attributs du style. Notez que lorsque les noms d'attribut sont opérés dans JavaScript dans CSS, les noms d'attribut peuvent être différents, se concentrant principalement sur les attributs contenant - dans les attributs, car - ne peut pas être utilisé dans JavaScript.
Lors de l'exploitation du style de flotteur
Ie: obj.style.stylefloat = 'droite';
Autres navigateurs: obj.style.cssfloat = 'droite';
Former des objets
Couramment utilisé: cliquez (), focus (), blur (); // l'équipement est l'événement qui déclenche le clic d'un élément, obtient Focus et perd Focus via un programme.
L'objet de forme est un objet DOM de la forme.
Méthode: soumise () soumet le formulaire, mais l'événement onSubmit ne sera pas déclenché.
Implémentez AutoPost, c'est-à-dire que la page est soumise immédiatement après que le foyer ait quitté le contrôle, au lieu de soumettre uniquement après la soumission du bouton Soumettre. Lorsque le curseur quitte, l'événement OnBlur est déclenché et la méthode de soumission du formulaire est appelée ONBLUR.
Après avoir cliqué sur Soumettre, l'événement ONSUMMIT 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, revenez false pour annuler la soumission
Ce qui précède est ma compréhension personnelle du DOM de Javascript, et j'espère que tout le monde pourra l'aimer.