Javascript 如何从querySelectorAll（）的每个结果中获取属性

我正在尝试这样做：

搜索我的结构中的所有跨度

从每个跨度中获取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;
}

更多信息


更多信息

//到目前为止，我的javaScript很糟糕
var发现_元素=[]；
var outers=document.querySelectorAll（'.FormSection'）；
对于（var i=0；i如果您事先知道您将只使用具有id的span元素，那么在queryselectoral选择器中同样使用[id]

document.querySelectorAll('span[id]')

如果将其用作数组，则需要

[... document.querySelectorAll('span[id]')]

分配新值的方式如下：

[... document.querySelectorAll('span[id]')].forEach(s => s.closest("h3").innerHTML = s.id)

如果您事先知道您将只使用具有id的span元素，那么在querySelectorAll选择器中使用[id]

document.querySelectorAll('span[id]')

如果将其用作数组，则需要

[... document.querySelectorAll('span[id]')]

分配新值的方式如下：

[... document.querySelectorAll('span[id]')].forEach(s => s.closest("h3").innerHTML = s.id)

queryselectoral（）
返回a，因此外部.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；
})；



更多信息


更多信息

queryselectoral（）
返回a，因此外部.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；
})；



更多信息


更多信息

javascript有一个
closest（）
方法？或者你把jQuery方法和javascript搞混了？有一个最近的方法，它使用一个选择器，就像querySelector一样。这个方法有多新？它已经在DOM规范中，并且受到所有现代浏览器的支持（当然，IE不再是浏览器了）javascript有一个
closest（）
方法？或者你把jQuery方法和javascript混淆了吗？有一个最近的方法，它使用一个选择器，就像querySelector所做的那样。这个方法有多新？它已经在DOM规范中，并且受到所有现代浏览器的支持（当然，IE不再是浏览器了）