Découvrez ensemble la programmation javascript dom et enregistrez des notes sur l'expérience pratique

J'ai récemment appris la programmation JavaScript dom. J'ai peur de l'oublier à l'avenir, alors j'ai spécialement résumé et organisé ce que j'ai appris. Qu'est-ce que le fonctionnement dom ? Le mode objet document est un standard du w3c.

1. JavaScript est un langage de programmation qui rend les pages Web interactives.

2. La méthode de définition des propriétés du navigateur est appelée BOM

3. La dénomination des cas Camel (myMood) est le format de dénomination préféré pour les noms de fonctions, les noms de méthodes et les noms d'attributs d'objet. .

4. Lorsque vous nommez des variables, vous pouvez utiliser des traits de soulignement pour séparer chaque mot, et lorsque vous nommez des fonctions, utilisez la dénomination en casse chameau.

5. La fonction doit se comporter comme un script autosuffisant Lors de la définition d'une fonction, nous devons déclarer explicitement toutes ses variables internes comme variables locales.

6. Les objets prédéfinis par le navigateur sont appelés objets hôtes. Les objets hôtes incluent De, Image, document, etc.

7.DOM (modèle objet de document).

8. Il existe des nœuds d'éléments (étiquettes) dans le DOM (chaque élément du document est un objet), des nœuds de texte (contenu) et des nœuds d'attribut (attributs).

9. Même si cette balise n'a qu'un seul élément dans l'ensemble du document, getElementsByTagName renvoie un tableau et la longueur du tableau est de 1.

10.getElementsByClassName renvoie un tableau d'éléments avec le même nom de classe.

11. Lorsque vous utilisez getElemntsByClassName pour spécifier plusieurs noms de classe, il vous suffit de séparer les multiples noms de classe par des espaces
dans les paramètres.
12.getElementsById renvoie un objet, qui correspond à un nœud d'élément spécial
dans le document.
13. Les fonctions getAttribute et setAttribute ne peuvent être utilisées que pour les nœuds d'éléments.

14. Mode de fonctionnement DOM : chargez d'abord le contenu statique du document, puis actualisez-le dynamiquement. L'actualisation dynamique n'affecte pas le contenu statique du document. L'actualisation du contenu de la page ne nécessite pas d'actualiser la page. le navigateur.

15. Après avoir ajouté un gestionnaire d'événement à un élément, une fois l'événement survenu, le code JavaScript correspondant sera exécuté. Le code JavaScript appelé peut renvoyer une valeur qui est transmise au gestionnaire d'événements. Supposons que la fonction de traitement d'événement soit spécifiée dans la balise a onclick. Lorsque cette fonction renvoie un vrai, l'événement onclick pensera que le lien dans la balise a a été cliqué. S'il renvoie faux, il sera considéré comme le lien 2. n'a pas été cliqué. Par conséquent, si vous ne souhaitez pas déclencher le comportement par défaut dans la balise a, ajoutez un return false dans onclick.

<li><a href="img/1.png" onclick="showpic(this);return false;">1</a> </li>

16. L'attribut childNodes peut être utilisé pour obtenir tous les éléments enfants de n'importe quel élément. Il s'agit d'un tableau contenant tous les éléments enfants de cet élément.

17. Si vous souhaitez connaître le type d'un nœud, vous pouvez utiliser nodeType pour afficher le type de nœud
nodeType=1 Le nœud est un nœud d'élément

           =2            属性节点
           =3            文本节点

18. .window.open() Ouvre une nouvelle fenêtre de navigateur.

function popUrl(winURL) {
        window.open(winURL,"popup","width:320px,height:400px");
    }
    popUrl('canvas.html');

19. Dégradation douce (lorsque le navigateur ne prend pas en charge le code js, cela n'affecte pas le fonctionnement normal de la page Web.)

20. 1) Visitez le moins possible le DOM : chaque fois que vous effectuez une requête sur certains éléments du DOM, le navigateur recherche dans toute l'arborescence du DOM des éléments correspondants possibles. En d'autres termes, l'intégralité de l'arborescence DOM sera parcourue à chaque fois que getElementBy* est utilisé, il est donc préférable de l'utiliser une fois pour obtenir l'élément et stocker l'élément dans une variable.
(2) Utilisez le moins de balises possible : trop d'éléments inutiles ne feront qu'augmenter la taille de l'arborescence DOM, augmentant ainsi le temps nécessaire pour parcourir l'arborescence DOM pour trouver des éléments spécifiques.
(3) La meilleure façon d'inclure des scripts est d'utiliser des fichiers externes et de fusionner plusieurs fichiers js ensemble. Cela réduit le nombre de requêtes envoyées lors du chargement d’une page.
(4) Placez toutes les balises Script à la fin du document, avant la fin de la balise body, pour rendre la page plus rapide.
(5) Compresser le script : supprimez tous les octets inutiles, tels que les espaces et les commentaires, dans le texte du script pour atteindre l'objectif de compression du fichier.

21. Spécification du protocole HTTP, le navigateur peut télécharger jusqu'à deux fichiers du même nom en même temps.

22. Si vous souhaitez utiliser JavaScript pour ajouter un comportement à une page Web, vous ne devez pas laisser le code JavaScript dépendre de la structure de la page Web.

23. Si une fonction a plusieurs sorties, disposez ces sorties au début de la fonction.

24. Boucle pour déterminer le traitement js effectué après avoir cliqué sur un groupe de balises

function prepareGallery() {
    if (!document.getElementById) return false;
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById('imagegallery')) return false;
    var gallery = document.getElementById('imagegallery');
    var links  = gallery.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++){
        links[i].onclick = function () {
            showpic(this);
            return false;
        }
    }
}

25. addLoadEvent() : Écrivez votre propre fonction de script pour ajouter ce qui est nécessaire lorsque le. la page est chargée La fonction de traitement

function addLoadEvent(func) {
  var onload = window.onload;
  if (typeof window.onload !=func){
  window.onload = func;
  }else {
  window.onload = function (ev) {
  oldload();
  func();
  }
  }
}

26.createTextNode est utilisée pour créer des nœuds de texte

var txt =  document.createTextNode("hello world");

27.js Lorsque vous souhaitez insérer du contenu dans le document, vous devez partir de le point de vue de dom. Par exemple, insérez un paragraphe p dans p :

Insérez un p dans js

var p = document.createElement("p");
var txt = document.creatTextNode('hello world');
var p = document.getElementById("myp");
p.appendChild(p);
p.appendChild(txt);

28.insertBefore (), : Insérez un élément devant l'élément,

Articles associés :

"Java Script DOM Programming Art" Notes de lecture

"JavaScript Notes de lecture de DOM Programming Art : Compétences DOM basics_javascript

Vidéos associées :

Tutoriel vidéo JavaScript&DOM

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!