javascript - 如何从 querySelectorAll() 的每个结果中获取属性

Question

我正在尝试这样做:

1. 搜索结构中的所有跨度
2. 获取每个范围的 id 值
3. 使用该文本更新父级以进行测试

这项工作的原因是我正在为应用程序进行前端自定义，并尝试获取在父元素上设置的一些 WAI-ARIA 标记值。

问题是许多所需的值来 self 正在使用/周围的 COTS 应用程序。这些所需的输入并不总是在 DOM 中按良好的顺序设置。

我一直在寻找 JS 解决方案来解决这个问题。

<div class="fluid-form-container">
<ul id="accordionGroup" class="Accordion" data-allow-multiple="">
<li class="fluid-form-group-container">
<h3 aria-labelledby="accordion1id">
<button aria-expanded="true" class="Accordion-trigger" aria-controls="sect1" id="accordion1id">
<span class="Accordion-title"><div class="fluid-form-title">
<div class="FormSection">
<span id="More_Info_Form_Section_Label">More Info</span>
</div>
</div>
</span>
</button>
</h3>
</li>
<li class="fluid-form-group-container">
<h3 aria-labelledby="accordion2id">
<button aria-expanded="true" class="Accordion-trigger" aria-controls="sect2" id="accordion2id">
<span class="Accordion-title"><div class="fluid-form-title">
<div class="FormSection">
<span id="Even_More_Info_Form_Section_Label">Even More Info</span>
</div>
</div>
</span>
</button>
</h3>
</li>
</div>

//My bad javaScript so far

var found_elements = [];

var outers = document.querySelectorAll('.FormSection');

for(var i=0; i<outers.length; i++) {
    var elements_in_outer = outers[i].querySelectorAll("span");
  var updateValue = elements_in_outer.getAttr("id");
  outers[i].closest("h3").innerHTML = updateValue;
}

预期结果:- 父标签innerHTML设置为结构中每个span的id值

实际结果:- 我收到错误，因为我不确定需要使用什么来从找到的每个范围中获取该 id

Answer 1

querySelectorAll() 返回 NodeList ，因此 elements_in_outer.getAttr("id") 不起作用，应替换为 querySelector()

没有getAttr，使用getAttribute

(我将您的 for 替换为 forEach )

var found_elements = [];

var outers = document.querySelectorAll('.FormSection').forEach(div => {
  var elements_in_outer = div.querySelector("span");
  var updateValue = elements_in_outer.getAttribute("id");
  div.closest("h3").innerHTML = updateValue;
});

<div class="fluid-form-container">
  <ul id="accordionGroup" class="Accordion" data-allow-multiple="">
    <li class="fluid-form-group-container">
      <h3 aria-labelledby="accordion1id">
        <button aria-expanded="true" class="Accordion-trigger" aria-controls="sect1" id="accordion1id">
<span class="Accordion-title"><div class="fluid-form-title">
<div class="FormSection">
<span id="More_Info_Form_Section_Label">More Info</span>
</div>
</div>
</span>
</button>
      </h3>
    </li>
    <li class="fluid-form-group-container">
      <h3 aria-labelledby="accordion2id">
        <button aria-expanded="true" class="Accordion-trigger" aria-controls="sect2" id="accordion2id">
<span class="Accordion-title"><div class="fluid-form-title">
<div class="FormSection">
<span id="Even_More_Info_Form_Section_Label">Even More Info</span>
</div>
</div>
</span>
</button>
      </h3>
    </li>
</div>