不使用JQuery在DOM中搜索特殊的html标签

Question

I am working on make a project that requires looking for special tags on a page and then getting its attributes. An example of the tag looks something like this:

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

WITHOUT JQuery , how can I using Javascript search for each ub:widget and then collect their attributes individually?

Answer 1

Use getElementsByTagName then 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 .

If you need it more generic ie don't have predefined tag name you can iterate all elements and look for those containing ":" in the tag name which usually means "special tag":

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 with the generic approach.