javascript - JQuery を使用せずに DOM で特別な html タグを検索する

Question

ページ上の特別なタグを探してその属性を取得する必要があるプロジェクトの作成に取り組んでいます。タグの例は次のようになります。

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

JQuery なしで、各 ub:widget に対して Javascript 検索を使用して、それらの属性を個別に収集するにはどうすればよいですか?

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

一般的なアプローチでフィドルを更新しました。