Tutoriel de base Javascript?: Comprendre DOM
Qu'est-ce que le DOM??
Document Object Model DOM Abréviation anglaise : Document Object Model, définit une méthode standard d'accès et de traitement des documents HTML. DOM présente les documents HTML sous forme d'arborescence (arbre de n?uds) avec des éléments, des attributs et du texte
Cette déclaration est très officielle, mais tout le monde quand même en désaccord clair.
Par exemple?: nous avons un morceau de HTML, alors comment accéder au premier n?ud de la deuxième couche et comment déplacer le dernier n?ud vers le premier n?ud??
DOM définit la norme sur la manière d'effectuer des opérations similaires. Par exemple, utilisez getElementById pour accéder aux n?uds et insertBefore pour insérer des n?uds.
Lorsque le navigateur chargera du HTML, il générera l'arborescence DOM correspondante.
En bref, DOM peut être compris comme un standard d'implémentation pour accéder ou utiliser diverses balises HTML.
Pour un HTML, le n?ud de document Document (invisible) est son n?ud racine, et l'objet correspondant est l'objet document (à proprement parler, il s'agit d'un objet HTMLDocument de sous-classe. Le type Document sera présenté séparément ci-dessous. souligné).
En d'autres termes, il existe un n?ud de document Document, puis il a des n?uds enfants. Par exemple, via document.getElementsByTagName("html"), vous pouvez obtenir l'élément html de type element node.
Chaque balise HTML peut être représentée par un n?ud correspondant, par exemple :
Les éléments HTML sont représentés par des n?uds d'élément, les commentaires sont représentés par des n?uds de commentaire, les types de documents sont représentés par des n?uds de type de document, etc.
Au total, 12 types de n?uds sont définis, et ces types héritent tous du type Node.
Parlons donc d’abord du type Node, car les méthodes de ce type sont héritées par tous les n?uds.
Le code suivant?:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM</title> </head> <body> <h2><a href="ipnx.cn">Javascript DOM</a></h2> <p>對html元素進行操作，可添加，改變或移除css樣式等</p> <ul> <li>Javascript</li> <li>DOM</li> <li>css</li> </ul> </body> </html>
Décomposez le code HTML en un diagramme hiérarchique de n?uds DOM?:
Le document HTML peut être considéré comme une collection de n?uds. Les n?uds DOM sont?:
1. Les n?uds d'élément?: <html>, <body>, <p>, etc. dans l'image ci-dessus sont tous le n?ud de l'élément, c'est-à-dire l'étiquette.
2. N?ud de texte?: contenu affiché à l'utilisateur, tel que JavaScript, DOM, CSS et autres textes en <li>...</li>.
3. N?ud d'attribut?: attribut d'élément, tel que l'attribut de lien href="http://ipnx.cn" de la balise <a>
Par exemple, la balise a dans le code ci-dessus
une balise ------- n?ud d'élément
href= "www. php.cn"--------N?ud d'attribut
javascript DOM ---------- N?ud de texte
