Recherche DOM pour les balises html spéciales sans JQuery

Question

Je travaille sur la création d'un projet qui nécessite de rechercher des balises spéciales sur une page, puis d'obtenir ses attributs. Un exemple de la balise ressemble à ceci:

<ub:widget tag1="abc" tag2="doeraeme"></ub:widget:> 

SANS JQuery, comment puis-je utiliser la recherche Javascript pour chaque ub: widget et collecter leurs attributs individuellement?

Answer 1

Utilisez getElementsByTagName puis getAttribute:

window.onload = function() { 
    var elements = document.getElementsByTagName("ub:widget"); 
    for (var i = 0; i < elements.length; i++) { 
     var widget = elements[i]; 
     var tag1 = widget.getAttribute("tag1"); 
     var tag2 = widget.getAttribute("tag2"); 
     alert("Found a widget! tag1 is " + tag1 + " and tag2 is " + tag2); 
    } 
} 

Live test case.

Si vous en avez besoin à savoir plus génériques ne sont pas le nom d'étiquette prédéfini, vous pouvez itérer tous les éléments et rechercher ceux contenant « : » au nom de la balise qui signifie généralement « balise spéciale »:

window.onload = function() { 
    var elements = document.getElementsByTagName("*"); 
    for (var i = 0; i < elements.length; i++) { 
     var curElement = elements[i]; 
     var curTagName = curElement.tagName.toLowerCase(); 
     if (curTagName.indexOf(":") > 0) { 
      var widget = curElement; 
      var message = "Found a widget! Tag name is: " + curTagName; 
      if (widget.attributes.length === 0) { 
       message += " without any attributes"; 
      } else { 
       message += " with " + widget.attributes.length + " attributes: "; 
       for (var j = 0; j < widget.attributes.length; j++) { 
        var curAttribute = widget.attributes[j]; 
        message += "\n" + curAttribute.name + " = " + curAttribute.value; 
       } 
      } 
      alert(message); 
     } 
    } 
} 

Updated fiddle avec l'approche générique.