"JavaScript DOM Programming Art" Notes de lecture DOM Basics_javascript skills

DOM
         
DOM : modèle d'objet de document ;

Nœud

Nœuds d'éléments : Les atomes du DOM sont des nœuds d'éléments. Éléments tels que ,

,

. Les éléments peuvent contenir d'autres éléments. Le seul élément qui n'est pas contenu dans un autre élément est l'élément
Nœud de texte : dans les documents XHTML, les nœuds de texte sont toujours inclus à l'intérieur des nœuds d'élément.
Nœud d'attribut : le nœud d'attribut est utilisé pour donner une description plus spécifique de l'élément. Par exemple, presque tous les éléments ont un attribut title, et nous pouvons utiliser cet attribut pour décrire avec précision ce qui est contenu dans l'élément :
 

N'oubliez pas d'acheter ce truc.

Dans le DOM, title="un doux rappel" est un nœud d'attribut.

CSS

Obtenir l'élément
Il existe trois méthodes pour obtenir des nœuds d'éléments : getElementById, getElementsByTagName et getElementsByClassName.

GetElementsByTagName autorise un caractère générique comme paramètre, ce qui signifie que chaque élément du document aura une place dans le tableau renvoyé par cette fonction. Le caractère générique ("*") doit être placé entre guillemets pour le distinguer de l'opération de multiplication.
Vous pouvez également combiner getElementById et getElementsByTagName. Comme indiqué ci-dessous :
Copier le code Le code est le suivant :
    var shopping = document.getElementById("purchase");
    var items = shopping.getElementsByTagName("*");


De cette façon, vous pouvez obtenir le nombre d'éléments que contient l'élément avec la valeur d'attribut id de l'achat.
La méthode getElementsByClassName n'est prise en charge que par les navigateurs les 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 au getElementsByClassName suivant :
Copier le code Le code est le suivant :
Fonction getElementsByClassName(node, classname){
Si(node.getElementsByClassName){
             return node.getElementsByClassName(classname);
         }autre{
        var résultats = new Array();
            var elems = node.getElementsByTagName("*");
pour(var i=0;i Si(elems[i].className.indexOf(classname) != -1){
résultats[results.length] = elems[i];
            }
         }
         renvoyer les résultats ;
>
>


Cette fonction getElementsByClassName accepte deux paramètres. Le premier nœud représente le point de départ de l'élément de recherche dans l'arborescence DOM, et le deuxième nom de classe est le nom de la classe à rechercher.

Obtention et définition de propriétés

getAttribute est une fonction avec un seul paramètre - le nom de l'attribut que vous souhaitez interroger :
Copier le code Le code est le suivant :
objet.getAttribute(attribut)



setAttribute() nous permet de modifier la valeur du nœud d'attribut. Après avoir modifié le document via setAttribute, lorsque vous affichez le code source du document via l'option Afficher la source du navigateur, vous verrez toujours les valeurs d'attribut avant la modification. En d'autres termes, les modifications apportées par setAttribute ne changeront pas. être reflété dans le code source du document lui-même. Ce phénomène « d'incohérence entre l'apparence et l'intérieur » vient du mode de fonctionnement du DOM : le contenu statique du document est d'abord chargé, puis rafraîchi dynamiquement. Le rafraîchissement dynamique n'affecte pas le contenu statique du document. C'est là le véritable pouvoir du DOM : actualiser le contenu d'une page sans actualiser la page dans le navigateur.