javascript - 使用 vanilla Javascript 查找具有部分属性的 DOM 元素

Question

假设我有一个网站，我想使用循环遍历其 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('') 查找部分文本，但它不起作用，因为它在数组中查找完整字符串。有人会这么好心帮助我吗？我不想使用任何框架。

Answer 1

Now I want to pair my array attribute value with DOM element that it belongs to and also be able to find out specified part of text that matches the array element (attribute) and DOM element.

为什么不简单地使用 contains 选择器仅获取那些匹配的元素

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