array of specific childnodes in javascript

Question

var fieldsettags = document.getElementsByTagName('fieldset');
textareatags = new Array();
internalarray = new Array();
for (var x = 0; x < fieldsettags.length; x++) {
  for (var y = 0; y < fieldsettags[x].childNodes.length; y++) {
    if (fieldsettags[x].getElementsByTagName('textarea')[y]) {
      internalarray.push(fieldsettags[x].getElementsByTagName('textarea')[y]);
    }
  }
  textareatags.push(internalarray);
  internalarray = [];
}

<fieldset>
  <legend>something</legend><textarea>something</textarea><span>somethings</span>
  <div>something</div>
  <legend>something</legend><textarea>something</textarea><span>somethings</span>
  <div>something</div>
  <legend>something</legend><textarea>something</textarea><span>somethings</span>
  <div>something</div>
  <legend>something</legend><textarea>something</textarea><span>somethings</span>
  <div>something</div>
  <legend>something</legend><textarea>something</textarea><span>somethings</span>
  <div>something</div>
  <legend>something</legend><textarea>something</textarea><span>somethings</span>
  <div>something</div>
</fieldset>

There are many fieldset tags inside my document, here is only one example for imagination. I want to have only textarea elements inside an array. Where am I going wrong? Remember inside each fieldset tag, the order and no. of elements is also different. Do you suggest any other method for getting them?

CertainPerformance · Answer 1 · 2020-08-22T16:11:27.290

0

Spread each fieldsets seen into an array, then map that array to each of its textarea descendants:

const textareatags = [...document.querySelectorAll('fieldset')]
  .map(fieldset => [...fieldset.querySelectorAll('textarea')]);
console.log(textareatags);

<fieldset>
  <legend>something</legend><textarea>something</textarea><span>somethings</span>
  <div>something</div>
  <legend>something</legend><textarea>something</textarea><span>somethings</span>
  <div>something</div>
  <legend>something</legend><textarea>something</textarea><span>somethings</span>
  <div>something</div>
  <legend>something</legend><textarea>something</textarea><span>somethings</span>
  <div>something</div>
  <legend>something</legend><textarea>something</textarea><span>somethings</span>
  <div>something</div>
  <legend>something</legend><textarea>something</textarea><span>somethings</span>
  <div>something</div>



</fieldset>

edited Aug 22 '20 at 16:11

answered Aug 22 '20 at 16:06

CertainPerformance

356,069
52
309
320

I want to have textarea in different fieldset tags to be in individual arrays and these arrays should be in a different array. So, in short, I want to have a 2D array. – Sameep Kulkarni Aug 22 '20 at 16:09
You only have one fieldset in your code, you may wish to update your HTML to show a more representative example – CertainPerformance Aug 22 '20 at 16:11
I have mentioned in the question that there are other fieldset tags too. Kindly, read the question neatly. – Sameep Kulkarni Aug 22 '20 at 16:15
If you have multiple fieldsets, each fieldset will correspond to an array of ``s in the `textareatags` in my snippet - the "2d array". – CertainPerformance Aug 22 '20 at 16:16

score 0 · Answer 2 · answered Aug 22 '20 at 16:17

You may want something like this:

const fieldSets= [...document.querySelectorAll('fieldset')];
const finalArray = [];

fieldSets.forEach((fieldSet) => {
    const textAreas = [...fieldSet.querySelectorAll('textarea')];
    finalArray.push(textAreas)
});
console.log(finalArray);

array of specific childnodes in javascript

2 Answers2