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

【问题标题】：Finding DOM element with part of attribute with vanilla Javascript使用 vanilla Javascript 查找具有部分属性的 DOM 元素
【发布时间】：2018-03-17 03:25:39
【问题描述】：

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

【问题讨论】：

标签： javascript html arrays dom

【解决方案1】：

现在我想将我的数组属性值与它的 DOM 元素配对属于并且也能够找出文本的指定部分匹配数组元素（属性）和 DOM 元素。

为什么不简单地获取那些使用 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 );
});

【讨论】：

【解决方案2】：

您想通过某些文本过滤 href 属性吗？

你可以使用.indexOf()，我看不出有什么理由。

或者您可以在开始时改进您的选择器（但已经建议）。

这是一个小提琴，显示了添加到您的代码中的 1 行代码，以便过滤出现在 href 中的某些子字符串。

fiddle

【讨论】：