/ /バニラJavascriptを使用して属性の一部を持つDOM要素を検索する-javascript、html、配列、dom

vanilla Javascriptを使用して属性の一部を持つDOM要素を見つける - javascript、html、配列、dom

ウェブサイトがあり、使いたいとしましょうDOM要素をループして、指定されたテキストの一部が属性に含まれている要素を指摘するスクリプト。 DOM要素のすべての必要な属性を見つけてそこから配列を作成する単純なループを作成できました。次に、配列の属性値を、それが属するDOM要素とペアにし、テキストの指定された部分を見つけることもできるようにしますこれは、配列要素(属性)およびDOM要素と一致します。

var getAll = document.getElementsByTagName("*");
var myArray = [];

for (var i=0; i<getAll.length; i++) {
getHref = getAll[i].getAttribute("href");
if (getHref !== null) {
myArray.push(getHref);
}
}

属性をDOMにリンクする方法がわかりません要素。 indexOf( "")を使用してテキストの一部を検索しようとしましたが、配列内の完全な文字列を検索するため機能しません。誰かがとても素敵で私を助けてくれるでしょうか?フレームワークを使いたくありません。

回答:

回答№1は0

ここで、配列の属性値とそのDOM要素をペアにします に属し、テキストの指定された部分を見つけることができる 配列要素(属性)およびDOM要素に一致します。

単純に、一致する要素のみを取得して、 含まれる セレクタ

var getAll = document.querySelectorAll("[href*="text-to-be-matched"]");

これは NodeList これで反復できます for-loop そして、あなたが見つけたものでDOM要素にインデックスを付けます。

var attributeValToDOMMap = {};
getAll.forEach( function( element ){
var hrefVal = element.getAttribute( "href" );
attributeValToDOMMap[ hrefVal ] =  attributeValToDOMMap[ hrefVal ] || []; //in case one href value is common with multiple DOM elements
attributeValToDOMMap[ hrefVal ].push( element );
});

回答№2の場合は0

テキストでhref属性をフィルタリングしますか?

あなたは使うことができます .indexOf()、理由がわかりません。

または、最初にセレクターを改善することもできます(ただし、これは既に提案されています)。

これは、hrefに表示される部分文字列をフィルタリングするためにコードに追加された1行のコードです。

フィドル