查找/检索NodeList中具有唯一ID的元素

时间:2018-06-13 19:10:25

标签: javascript nodelist htmlcollection

我使用querySelectorAll方法/函数在我的HTML页面上检索了一些具有相同id前缀的div元素,结果得到了一个 NodeList 。 据我所知getElementById不是使用 NodeList HTMLCollection 的方法,我在处理这些时不能使用该函数,但现在我需要检索一个子 - NodeList中的元素知道它有一个唯一的 id 所以...... 我在NodeList上使用querySelector方法来检索它,这里有一些示例代码来解释方案

HTML片段:

<div id="mydiv_1">
  <div id="mysubdiv1_1">
      <div id="mysubdiv1_1_unique">some</div>
  </div>
  <div id="mysubdiv1_2">
      <div id="mysubdiv1_2_unique">stuffs</div>
  </div>
  <div id="mysubdiv1_3">
      <div id="mysubdiv1_3_unique">here</div>
  </div>
  ...
</div>
<div id="mydiv_2">
  <div id="mysubdiv2_1">
      <div id="mysubdiv2_1_unique">this</div>
  </div>
  <div id="mysubdiv2_2">
      <div id="mysubdiv2_2_unique">is</div>
  </div>
  <div id="mysubdiv2_3">
      <div id="mysubdiv2_3_unique">only</div>
  </div>
  ...
</div>
...
<div id="mydiv_N">
  <div id="mysubdivN_1">
      <div id="mysubdivN_1_unique">an</div>
  </div>
  <div id="mysubdivN_2">
      <div id="mysubdivN_2_unique">example</div>
  </div>
  <div id="mysubdivN_3">
      <div id="mysubdivN_3_unique">here</div>
  </div>
  ...
</div>

JS片段:

for (let divs=document.querySelectorAll('div[id^="mydiv"]'), i=divs.length-1;i>=0;i--){
  //I need doing some stuffs here actually before going to the next loop
  for (let j=divs[i].children.length;j>0;j--){
     whatIneed=divs[i].querySelector('#mysubdiv'+i+'_'+j+'_unique');
     //I do something with the retrieved element here...
  }
}

我需要使用纯(vanilla)JavaScript。我决定使用querySelector因为我知道我将永远只有一个元素,我正在寻找那个id,而且最重要的是因为到目前为止我想不出更好的东西(所以我有点被迫这样做)...

问题确实是:我做得好还是有一种更方便的方式我没有考虑或想出可能更适合这个? 或者,在这里将其从特定情况中删除并以更一般的方式表达:是否有其他(更好)的方法来查找/检索我知道唯一 id 的元素在 NodeList HTMLCollection 中?

感谢您的帮助

0 个答案:

没有答案