Accessing HTML elements in the Array

Question

When using the script, I am breaking a table of <tr> with elements <td>. Some of the <tr> has the red and yellow background. My Script isolates this element in the vector sla. Each vector element gets a text from <tr>, full of <td>. I don’t know how to do it, but I’d like to break the <td> and make a vector of the isolated values of each <td>. How to do?

const chamados = Array.from(document.querySelectorAll('tr'));
const sla = [];
for(i=0;i < chamados.length;i++){
  if(chamados[i].style.backgroundColor == "red" || chamados[i].style.backgroundColor == "yellow"){
    sla.push(chamados[i]);
    for(j=0; j < sla.length; j++){
      console.log(sla[j]);
    }
    console.log(i);
  }
}

Answer 1

The example of @Noface using Chidren to get the child elements solves the problem, but I would suggest a more functional and declarative approach.

To understand more about the Destructuring using in the function parametre trVermineOuAmarelo you can take a look here: Destructuring assignment. Basically it obtains a property that is inside the object.
About how the filter here: Array.prototype.filter().
About the map and flatMap here: Array.prototype.flatMap(). Basically the flatMap takes arrays within an array and turns into one thing only, if I have [[1,2],3], using flatMap I will have [1,2,3].

const chamados = Array.from(document.querySelectorAll('tr'));

const trVermelhoOuAmarelo = ({ style: { backgroundColor }}) => 
  backgroundColor === 'red' || backgroundColor === 'yellow';
  
const obterInnerText = (element) => element.innerText;
const obterFilhos = (element) => Array.from(element.children);

const sla = chamados
  .filter(trVermelhoOuAmarelo)
  .flatMap(obterFilhos)
  .map(obterInnerText);

console.log(sla);

<table>
  <tr style="background:red;">
      <td>0.0 red</td>
      <td>0.1 red</td>
      <td>0.2 red</td>
  </tr>
  <tr style="background:green;">
      <td>1.0 green</td>
      <td>1.1 green</td>
      <td>1.2 green</td>
  </tr>
  <tr style="background:yellow;">
      <td>2.0 yellow</td>
      <td>2.1 yellow</td>
      <td>2.2 yellow</td>
  </tr>
</table>

You can still make things simpler by just filtering out the red and yellow elements in querySelector, for example:

const expression = "tr:not([style*='green'])";
const chamados = Array.from(document.querySelectorAll(expression));

const sla = chamados
  .flatMap(x => Array.from(x.children))
  .map(x => x.innerText);

console.log(sla);

<table>
  <tr style="background:red;">
    <td>0.0 red</td>
    <td>0.1 red</td>
    <td>0.2 red</td>
  </tr>
  <tr style="background:green;">
    <td>1.0 green</td>
    <td>1.1 green</td>
    <td>1.2 green</td>
  </tr>
  <tr style="background:yellow;">
    <td>2.0 yellow</td>
    <td>2.1 yellow</td>
    <td>2.2 yellow</td>
  </tr>
</table>

Answer 2

First of all this is not necessary Array.from.

Use the children to take the child elements of this tr, that these children are the td. If td has the backgroundColor == 'red' or backgroundColor == 'yellow' it will store the text that is on td that tr travelling one by one.

const chamados = document.querySelectorAll('tr')
const sla = []

for (let i = 0; i < chamados.length; i++){
  if (chamados[i].style.backgroundColor == 'red' || chamados[i].style.backgroundColor == 'yellow'){
  for (let j = 0; j <chamados[i].children.length; j++)
  sla.push(chamados[i].children[j].innerText)
  }
}
console.log(sla)

<table>
<tr style="background:red;">
    <td>tr0 td0 red</td>
    <td>tr0 td1 red</td>
    <td>tr0 td2 red</td>
</tr>
<tr style="background:green;">
    <td>tr1 td0 green</td>
    <td>tr1 td1 green</td>
    <td>tr1 td2 green</td>
</tr>
<tr style="background:yellow;">
    <td>tr2 td0 yellow</td>
    <td>tr2 td1 yellow</td>
    <td>tr2 td2 yellow</td>
</tr>
</table>

I hope I’ve helped