Exemple:
$(document).click(function() { blah });
// and
$('html').click(function() { blah });
4 Réponses :
Essayez de mettre l'innerhtml des deux, quel est le résultat? Je pense (mais je n'ai pas testé) que
document est vraiment le document complet, y compris et tous les éléments de celui-ci
-
html références Le -tag, donc il n'y aura donc que le et < / code> dans votre sortie, pas le -tag elle-même
Mais: Pour votre code (ajout d'un gestionnaire de clic), il n'y aurait aucune différence, car le clic sur le document sera toujours un clic sur le (tant que votre site est Valide et a an -tag)
Je vais répondre à la question en plusieurs parties.
en JavaScript (non seulement jQuery, mais tout JavaScript) Le mot clé de document est une poignée sur l'objet contenant le HTMLDOCUMENT. Vous pouvez utiliser cette poignée dans les scénarios suivants ... lorsque vous passez le document à jQuery, il analyse le document dans un objet JQuery. Lorsque vous passez le sélecteur "HTML" sur jQuery, il utilise cette chaîne pour trouver des éléments dans le modèle d'objet de document correspondant au sélecteur (dans tous les cas, il y aura un élément HTML). in réalité, vous ne remarquerez pas une différence de comportement entre ceux-ci: mais la différence technique est que le document est un objet et "html" est une chaîne utilisée pour rechercher un élément. L'objet et tous les éléments correspondants sont convertis en objets jQuery. Comme ils ajoutent tous un gestionnaire d'événements clic à la partie "visible" de la page, qui est la seule partie de la page qu'un utilisateur peut réalisablement Cliquez sur.
Merci - toujours heureux d'aider :)
Ils sélectionnent la même chose. La seule différence est la façon dont le moteur Sizzle de JQuery le trouve. Le premier cas étant un cas particulier dans la fonction d'init jQuery, le second utilisant les getelementsbytagname
Quelques différences:
document code> et code> sont des nœuds li>
-
document code> est une instance de document code> tandis que code> est une instance de élément code> li> li> li>
-
document code> inclut le code> Tag ainsi que le code> tag li>
ol> p>
// document
console.log('-----------document inheritance chain------------')
console.log(document.__proto__.constructor.name)
console.log(document.__proto__.__proto__.constructor.name)
console.log(document.__proto__.__proto__.__proto__.constructor.name)
console.log(document.__proto__.__proto__.__proto__.__proto__.constructor.name)
console.log(document.__proto__.__proto__.__proto__.__proto__.__proto__.constructor.name)
// html element
const HTML = document.getElementsByTagName('html')[0]
console.log('-----------<html> inheritance chain------------')
console.log(HTML.__proto__.constructor.name)
console.log(HTML.__proto__.__proto__.constructor.name)
console.log(HTML.__proto__.__proto__.__proto__.constructor.name)
console.log(HTML.__proto__.__proto__.__proto__.__proto__.constructor.name)
console.log(HTML.__proto__.__proto__.__proto__.__proto__.__proto__.constructor.name)
console.log(HTML.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__.constructor.name)
console.log('-----------document child-nodes------------')
console.log(document.childNodes.length);
console.log(document.childNodes[0].name);
console.log(document.childNodes[1] === HTML);
Vous devez faire une correction en premier lieu, le document n'est pas un élément. C'est juste un nœud. Vous pouvez le vérifier en exécutant cet extrait: ------------------- console.log (document.documentation.parentnode) // sortie est le document console. journal (document.documentalement.parentElement) // la sortie est NULL ---------------------------------------------------------------------------------------------------------------------------------------------- dans la deuxième cas est null parce que le parent de HTML est un document qui n'est qu'un nœud, pas un élément.
@Adityasingh; C'est vrai! Instance de document d'élément Retours FALSE Alors que instance de document de noeud renvoie true . Merci d'avoir partagé! :)
Dans le scénario ci-dessus ... Je pense que les deux sont identiques.