Dom
DOM: modèle d'objet de document;
nœud
Nœud d'élément: l'atome du DOM est le nœud d'élément. Des éléments comme <body>, <p>, <ul>, etc. Les éléments peuvent contenir d'autres éléments. Le seul élément qui n'est pas inclus dans l'autre élément est l'élément <html>
Node de texte: Dans les documents XHTML, les nœuds de texte sont toujours inclus dans les nœuds d'élément.
Node d'attribut: les nœuds d'attribut sont utilisés pour donner des descriptions plus spécifiques des éléments. Par exemple, presque chaque élément a un attribut de titre, et nous pouvons utiliser cet attribut pour décrire avec précision ce qui est contenu dans l'élément:
<p> N'oubliez pas d'acheter ce genre de choses. </p>
Dans le DOM, Title = "A Gentle Rappel" est un nœud d'attribut.
CSS
Obtenir des éléments
GetElementById, GetElementsByTagName, GetElementsByClassName trois méthodes pour obtenir des nœuds d'élément.
GetElementsByTagname permet un joker comme paramètre, ce qui signifie que chaque élément du document aura une place dans le tableau renvoyé par la fonction. Les caractères génériques ("*") doivent être en citations, ce qui doit être différent des opérations de multiplication.
Vous pouvez également utiliser GetElementById et GetElementsByTagName. Comme indiqué ci-dessous:
La copie de code est la suivante:
var shopping = document.getElementById ("achat");
var items = shopping.getElementsByTagName ("*");
De cette façon, vous pouvez obtenir le nombre d'éléments que l'élément avec l'achat de valeur d'attribut ID contient.
La méthode GetElementsByClassName n'est prise en charge que par des navigateurs plus récents. Pour compenser cela, les programmeurs de scripts DOM doivent utiliser les méthodes DOM existantes pour implémenter leur propre GetElementsByClassName. Dans la plupart des cas, leur processus de mise en œuvre est à peu près similaire à ce suivant GetElementsByClassName:
La copie de code est la suivante:
fonction getElementsByClassName (node, className) {
if (node.getElementsByClassName) {
return node.getElementsByClassName (className);
}autre{
VAR RÉSULTATS = NOUVEAU ARRAY ();
var elems = node.getElementsByTagName ("*");
pour (var i = 0; i <elems.length; i ++) {
if (elems [i] .classname.indexof (className)! = -1) {
Résultats [result.Length] = elems [i];
}
}
Résultats de retour;
}
}
La fonction GetElementsByClassName accepte deux paramètres. Le premier nœud représente le point de départ de la recherche dans l'arborescence DOM, et le deuxième nom de classe est le nom de classe à rechercher.
Obtenir et définir des propriétés
GetAttribute est une fonction qui n'a qu'un seul paramètre - le nom de l'attribut que vous prévoyez de remettre en question:
La copie de code est la suivante:
object.getAttribute (attribut)
SetAttribute () nous permet de modifier la valeur du nœud d'attribut. Après avoir modifié le document via SetAttribute, lors de la visualisation du code source du document via l'option Source View du navigateur, ce que vous voyez sera toujours la valeur de propriété précédente, c'est-à-dire que les modifications apportées par SetAttribute ne seront pas reflétées dans le code source du document lui-même. Ce phénomène de "incohérent à l'intérieur et à l'extérieur" provient du mode de travail de DOM: Chargez d'abord le contenu statique du document, puis de rafraîchir dynamiquement, le rafraîchissement dynamique n'affecte pas le contenu statique du document. Ceci est la véritable puissance de DOM: rafraîchissant le contenu de la page sans rafraîchir la page dans le navigateur.