Explication détaillée du DOM dans les compétences JavaScript_javascript

Afin de concrétiser l'idée d'une dégradation fluide, d'une compatibilité ascendante et d'une séparation des marques, la première chose que vous faites à chaque fois que vous écrivez du code js devrait être le travail de test et d'inspection nécessaire :
Ajoutez d’abord le code suivant au fichier js pour vérification :

window.onload = function(){
if(!document.getElementsByTagName)  return false;
if(!document.getElementById) return false;
if(!document.getElementsByClassName)  return false;
if(!document.getElementById("selector"))  return false;
if(!document.getElementsByTagName("tag"))  return false;
if(!document.getElementsByClassName("selector"))  return false;
};

Fonction wrapper universelle :

var $ = function(id){
   return document.getElementBy Id (id);
}
var addEvent = function(obj,event,fn){  //obj：元素对象名字，event：绑定事件，fn：触发的回调函数
   if(obj.addEventListener){
obj.addEventListener(event,fn,false);
   }
   else if(obj.attachEvent){
obj.attachEvent("on"+event,fn);
   }
}

Pour de nombreuses fonctions qui nécessitent le chargement et l'exécution de pages, la méthode d'encapsulation window.onload est la suivante :

function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != "function")
{
window.onload = func;
}
else
{
window.onload = function()
{
oldonload();
func();
}
}
}
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

Différences JavaScript entre Firefox et IE :

1. Dans la plupart des cas, renvoyer false pour la fonction de gestionnaire d'événements peut empêcher le comportement par défaut de l'événement. Par exemple, par défaut, cliquer sur un élément a pour accéder à la page spécifiée par l'attribut href de l'élément.
return false est équivalent au terminateur et return true est équivalent à l'exécuteur.
Un résumé des trois scénarios d'utilisation du retour en js est le suivant :
return true ; renvoie le résultat de traitement correct.
return false ; renvoie le mauvais résultat du traitement ; termine le traitement ; empêche la soumission du formulaire ; empêche l'exécution de l'action par défaut ;
return; Renvoie le contrôle à la page.

2. La plupart du temps, attribuer un appel de fonction à une variable sera une bonne idée.

3. La balise noscript peut être utilisée dans les navigateurs qui peuvent reconnaître la balise script mais ne peuvent pas prendre en charge le script qu'elle contient. Si le navigateur prend en charge les scripts, il n'affichera pas le texte dans la balise noscript.

4. Lors de la définition dynamique des styles, il est préférable d'utiliser CSS autant que possible. Le plus simple est de choisir la méthode la plus simple à mettre en œuvre.

5. Dans une fonction, les objets globaux sont stockés en tant que variables locales pour réduire les recherches globales, car l'accès aux variables locales est plus rapide que l'accès aux variables globales.

6. Si vous ciblez du code qui s'exécute en permanence, vous ne devez pas utiliser setTimeout, mais setInterval, car setTimeout initialisera une minuterie à chaque fois, et setInterval initialisera uniquement une minuterie au début.

7. Si vous souhaitez connecter plusieurs chaînes, vous devez utiliser = less et essayer d'utiliser des opérateurs ternaires au lieu de branches conditionnelles lors de la création de branches conditionnelles.

8. Beaucoup de gens aiment utiliser parseInt(). En fait, parseInt() est utilisé pour convertir des chaînes en nombres, pas entre des nombres à virgule flottante et des entiers. Nous devrions utiliser Math.floor() ou Math round(). .

9. En JavaScript, toutes les variables peuvent être déclarées à l'aide d'une seule instruction var, qui est un groupe d'instructions permettant de réduire le temps d'exécution de l'ensemble du script.

10. Pour les modifications importantes du DOM, l'utilisation de innerHTML est beaucoup plus rapide que l'utilisation des méthodes DOM standard pour créer la même structure DOM.

11. Lorsque le même objet utilise la méthode d'écriture .onclick pour déclencher plusieurs méthodes, cette dernière méthode écrasera la méthode précédente, c'est-à-dire que lorsque l'événement onclick de l'objet se produit, seule la dernière liaison sera exécutée. . méthode. Avec l'écoute d'événements, il n'y aura pas d'écrasement et chaque événement lié sera exécuté.

12. Si la méthode toString() est définie pour la conversion de type, il est recommandé d'appeler toString() explicitement, car l'opération interne essaiera la méthode toString() de l'objet après avoir essayé toutes les possibilités pour voir si elle peut être converti en String, donc appeler directement cette méthode sera plus efficace.

13. Étant donné que elemet.style ne peut obtenir que des styles en ligne, element.currentStyle.width est une propriété exclusive au navigateur IE, et getComputedStyle(element, null).width est une propriété unique aux navigateurs Firefox et Chrome, donc dans l'ordre. Compatible, la méthode pour obtenir des styles internes et externes est la suivante (les styles composites, tels que background, border, ne sont pas conseillés, mais doivent être écrits sous la forme backgroundColor, borderWidth) :

function getStyle(obj,name) {
   if(obj.currentStyle) {
     return obj.currentStyle[name];
   }
   else
   {
     return getComputedStyle(obj,null)[name];
   }
}

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.