10
votes

Diagramme d'objet Dom JavaScript

Je cherche un bon diagramme d'objet Dom à utiliser par JavaScript.
Je sais qu'une recherche de JavaScript Dom Object Diagram donne beaucoup d'entre eux, comme celui-ci semble très clair:

Entrez la description de l'image ici

L'un d'entre vous en avez-vous un qui montre une relation plus complète entre DOM et JavaScript?


4 commentaires

Relation entre dom et javascript? Voulez-vous dire quelque chose qui dit parentnode de x, y, z?


@AustinCheney c'est-à-dire! Quelque chose qui montre dans un diagramme le DOM et les moyens de renvoyer leurs éléments via JavaScript (ECMAScript).


+1 Je cherche la même chose. La liste complète de ce que JS peut accéder.


Mais chaque page a sa propre structure dom. Référence de MDN Gecko DOM est un bon endroit pour trouver des informations sur les propriétés de différents types de noeuds. Le L'élément d'élément sur l'ancien site "blooberry" est également Très intéressant, bien que daté.


3 Réponses :


1
votes

Dans JavaScript natif, vous êtes limité aux propriétés DOM XML:

  • Parentnode
  • Nextsibling
  • Précédent membre
  • FirstChild
  • lastchild
  • nodename
  • NODEVALUE
  • enfantNODES
  • Attributs

    Étant donné que les propriétés sont peu et limitées, il n'y a pas vraiment de besoin de diagramme. Si vous avez besoin d'un degré élevé de spécificité et de contrôle de l'accès au nœud relatif, vous souhaiterez peut-être regarder XPath.


13 commentaires

Ce n'est pas vraiment vrai du tout si on parle de la DOM du document HTML (et, étant donné le diagramme dans la question qui semble être le cas).


Il y a beaucoup plus de propriétés sur élément


Il existe d'autres propriétés qui ne font pas partie de la spécification DOM, telle que Scrollheight et ClientHeight, etc. Les propriétés répertoriées sont celles disponibles auprès du DOM Standard.


@AustinCheney NODE a plus. IE propriétaireDocument , textContent , oldetype , etc. élément a aussi un tas de plus.


@Raynos éventuellement, mais la question concerne le DOM et non sur les propriétés de Defacto en dehors du DOM.


@AustinCheney Le DOM est défini dans la norme, allez lire la norme. Ce que vous parlez est probablement "l'ensemble des propriétés appliquées sur un élément dans la plupart des implémentations du DOM". Les implémentations du DOM n'ont cependant rien à voir avec le DOM.


Le DOM est sa propre norme: w3.org /Tr/rec-dom-level-1/level-one-core.html examine spécifiquement le nœud d'interface de section, attributs


+1 Je suis d'accord avec vous qu'un diagramme mentionnant ces propriétés il devrait être souhaitable.


@AustinCheney votre référencement DOM 1 Noyau au lieu de DOM4. S'il vous plaît faire référence à la dernière norme.


DOM NIVEAU 4 n'est pas une norme. La dernière norme est DOM Niveau 3, qui est une extension du niveau 2 DOM et non une mise à jour de celle-ci.


@AustinCheney Dites-vous cela parce que DOM4 est un projet de travail plutôt achevé? Ne pouviez-vous pas dire la même chose pour HTML5, HTML5 n'est pas une norme. Ou qu'en est-il de Whawg HTML le document de vie, c'est un document vivant, donc jamais fini, donc pas une norme?


J'ai toujours dit que sur HTML5. Whatwg HTML n'est pas reconnu comme une norme officielle de HTML.


@AustinCheney "non reconnu". Par qui? Whatwg est les vendeurs de navigateur pour tout ce que je sais, et je pense que les fournisseurs de navigateurs Care de et reconnaître la spécification HTML.



1
votes

Si vous voulez savoir sur les interfaces exposées par le DOM, lisez ensuite le Spécification DOM

Un bref aperçu est que document est une instance de document et vous passez essentiellement de là.


3 commentaires

Ce serait génial avoir un CV dans un diagramme. Si vous ne remplissez pas au moins une liste complète de ce que JS peut accéder à comme indique Anubhav-Saini.


@Nomikos Je peux dessiner une telle liste complète. Ceci est une tâche fastidieuse beaucoup non triviale.


+1 Oui, comme vous commentez la réponse de AustinCheney semble que, alors oubliez la liste complète ... . Comme vous le voyez, cette question semble également partagée par d'autres utilisateurs. Je pense qu'un diagramme est nécessaire où nous pouvons voir comment JS interagit avec le DOM. Telle est la question. Propriétés telles que parentnode et Nextsibling doit être mentionné. Merci!



4
votes

donné une très petite partie d'un arbre DOM: xxx

même si vous ne laissez que des propriétés (aucune méthode) et seules les propriétés qui pointent sur noeud S (Aucun attributs, styles, sans propriétés de texte ni de numéro), excluez les API spécifiques à HTML (telles que celles de votre diagramme) et omettez certaines propriétés, vous obtiendrez toujours un diagramme compliqué (excusez mes compétences médiocres graphviz):

Entrez la description de l'image ici

(Ici, des objets sont des objets, étiquetés après leur le nom de l'interface DOM du plus dérivé, les bords sont étiquetés après des propriétés).

Il pourrait être intéressant de produire plusieurs "feuilles de triche" pour différentes catégories d'API DOM, mais vous pourriez élaborer plus sur pourquoi et dans quelles situations Le diagramme dont vous parlez soit utile.

moi-même, je trouve le développeur. La référence DOM de Mozilla.org , les spécifications correspondantes et http://docs.jquery.com pour JQuery assez.


P.s. La source du diagramme GRAPHVIZ au cas où quelqu'un en a besoin: xxx


0 commentaires