javascript - 在没有 JQuery 的情况下在 DOM 中搜索特殊的 html 标签

Question

我正在制作一个需要在页面上查找特殊标签然后获取其属性的项目。标签的示例如下所示：

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

没有 JQuery，我如何使用 Javascript 搜索每个 ub:widget 然后单独收集它们的属性？

Answer 1

getElementsByTagName然后使用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);
    }
}

现场测试用例。

如果您需要它更通用，即没有预定义的标签名称，您可以迭代所有元素并查找标签名称中包含“：”的元素，这通常表示“特殊标签”：

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);
        }
    }
}

更新了通用方法的小提琴。