Question

所以我有这个HTML代码，我需要按名称属性选择元素。问题是我有多个具有相同结构的元素，我需要用循环抛出它们。

<div class="res">
    <h4 name="title">title</h4>
    <span name="span1"></span>
    <span name="span2"></span>
    <p name="p1"></p>
    <p name="p2"></p>
</div>

我需要按名称选择.res div元素中的每个元素（或者如果有更好的解决方案，我希望你）。

Answer 1

document.getElementsByName("res");
document.getElementsByName("title");
document.getElementsByName("span");

如果您不想对名称进行硬编码，也可以遍历这些元素。

Answer 2

您可以使用.querySelector()之类的：

document.querySelector('[name="xxxxxx"]');

如果您要遍历所有res个容器，可以使用.querySelctorAll()，如：

var containers = document.querySelectorAll('.res');

for( var i = 0; i < containers.length; i++) {
    console.log( containers[i].querySelector('[name="title"]').textContent );
}

Answer 3

您可以在纯JavaScript中使用DOM Element.children属性

var children = res.children;
for (var i = 0; i < children.length; i++) {
  var child = children[i];
  // Do stuff
}

Answer 4

您可以使用querySelectorAll和内部循环处理每个元素。

＆＃13;

const elements = document.querySelectorAll(".res > *");

elements.forEach(element => {
  console.log(element);
});

＆＃13;

<div class="res">
    <h4 name="title">title</h4>
    <span name="span1"></span>
    <span name="span2"></span>
    <p name="p1"></p>
    <p name="p2"></p>
</div>

＆＃13;

按名称属性javascript（无jquery）选择嵌套元素

4 个答案: