属性の値に応じて要素を選択するにはどうすればよいですか？

Question

DOMツリーから要素を選択する際に助けが必要です。 補間括弧==> {{someString}}を保持する属性を含むすべての要素を選択する必要があります。

V.I.Note：補間は、属性値の部分文字列である可能性があります。例えば

：

<input id="{{labelID}}"> 
<div style='background-color:{{backgroundColor}}'> 

この例では、私はいくつかのデータ構造に入力し、DIV要素を設定する必要がありますが、どのように、これらの要素を選択します。

いくつかの要素が補間ブラケットを持っている場合は、すべてのそれの先祖が 任意のヘルプを選択することになるので、私はそれはいくつかの正規表現に一致する場合は、すべてのDOMツリーの上に移動し、各要素をチェックしようとしましたが、このソリューションは動作しませんか？

// Walk starting at document body 
walk(document.body); 

function walk(element) { 
    var n; 

    // Check its attributes 
    for (n = 0; n < element.attributes.length; ++n) { 
     if (element.attributes[n].value.indexOf("{{") != -1) { 
      // **** This attribute contains {{ **** 
     } 
    } 

    // Walk its children 
    for (n = 0; n < element.children.length; ++n) { 
     walk(element.children[n]); 
    } 
} 

またはforEachを使用して：あなたは、事前に検索したい属性（複数可）の名前（複数可）がわからない場合

Answer 1

、あなたは再帰的にDOMを歩く必要があります

// Handy access to forEach 
var forEach = Array.prototype.forEach; 

// Walk starting at document body 
walk(document.body); 

function walk(element) { 
    // Check its attributes 
    forEach.call(element.attributes, function(attr) { 
     if (element.attributes[n].value.indexOf("{{") != -1) { 
      // **** This attribute contains {{ **** 
     } 
    }); 

    // Walk its children 
    forEach.call(element.children, walk); 
} 

childNodesとは異なり、childrenで唯一のエントリがElement秒であることに注意してください。

属性チェックを強化して、}}なども検索することもできますが、それは一般的な考えです。 ES2015 +で

---

：

// Walk starting at document body 
walk(document.body); 

function walk(element) { 
    // Check its attributes 
    [...element.attributes].forEach(attr => { 
     if (attr.value.includes("{{")) { 
      // **** This attribute contains {{ **** 
     } 
    }); 

    // Walk its children 
    [...element.children].forEach(walk); 
}