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

user1698161 发表于 Dev

用户1698161

我正在尝试这样做：

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

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

问题是许多所需的值来自我正在使用/围绕的 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

这样的

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。