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

现在我想将我的数组属性值与它的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 );
});

Answer 2

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

您可以使用.indexOf()，但我没有看到原因。

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

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

fiddle

使用vanilla Javascript查找带有部分属性的DOM元素

2 个答案: