通過名稱屬性javascript選擇嵌套元素（無jquery）

Question

所以我有這個HTML代碼，我需要通過它們的name屬性選擇元素。 問題是我有多個具有相同結構的元素，我需要循環拋出它們。

<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並在循環內部處理每個元素。

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

 <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>