Converting Nodelist to Array and appending new class to each Node

Question

I've looked through the plethora of articles about making an array from a NodeList (in this case, document.getElementsByClassName()) in order to iterate and modify the className property on each node...however I cannot accomplish any kind of change. Seems a bit ridiculous, but here is the code:

EDIT: The problem appears to be related to creating an Array from document.getElementsByClassName. It's creating something that looks like an array, but isn't truly an Array. See screenshot below.

var cols = document.getElementsByClassName('cell symmetry');
[].forEach.call(cols, (node) => {
    node.className += ' transiting';
    console.log(node.className);
});

cols returns an array of table cells. But using the assignment operator or trying to append another class onto the node does nothing. have tried document.querySelector, while loops, for loops, Array.prototype.slice.call..., but no dice.

Screenshot of the console:

Answer 1

Details are commented extensively in the demo

Demo

/* 
|>.querySelectorAll()
|| Collect all .cell into a "static" NodeList

|>Array.from()
|| Convert NodeList into an array

|~.getElementsByClassName() 
|| Does the same as .querySelectorAll({.class})
|| except that gEBCN() returns a "Live Collection"
|| which means that it changes in real time so
|| that there's a good chance you may end up with
|| half the expected length of the collection.
|| 99% of the time .qSA() is the better choice
|| because it returns a "static" NodeList.
*/
var cellArray = Array.from(document.querySelectorAll('.cell'));

/*
|>.forEach()
|| Iterate through array and invoke a function on 
|| each node.
*/
cellArray.forEach(function(node, idx) {

  /*
  |>.classList.add()
  || Adds a class to a node's list of classes
  */
  node.classList.add('transiting');
});

table {
  width: 50%
}

.cell {
  border: 1px solid blue;
  background:blue;
}

.transiting {
  border: 5px solid red;
}

<table>
  <tr>
    <td class='cell'>&nbsp;</td>
    <td class='cell'>&nbsp;</td>
    <td class='cell'>&nbsp;</td>
  </tr>
  <tr>
    <td class='cell'>&nbsp;</td>
    <td class='cell'>&nbsp;</td>
    <td class='cell'>&nbsp;</td>
  </tr>
  <tr>
    <td class='cell'>&nbsp;</td>
    <td class='cell'>&nbsp;</td>
    <td class='cell'>&nbsp;</td>
  </tr>
  <tr>
    <td class='cell'>&nbsp;</td>
    <td class='cell'>&nbsp;</td>
    <td class='cell'>&nbsp;</td>
  </tr>
</table>

Answer 2

There doesn't seem to be anything wrong with your example as you've described it. Notice below that all of mine turn blue, which means the new d class is getting added.

var cols = document.getElementsByClassName('cell symmetry');
[].forEach.call(cols, (node) => {
    node.className += ' transiting';
    console.log(node.className);
});

.transiting {
  color: #00F;
}

 <p class="cell symmetry">A</p>
 <p class="cell symmetry">B</p>
 <p class="cell symmetry">C</p>

I think something else may be going on beyond your snippet though. Your nodes should not have a className outputting of td.cell.symmetry. The className should be along the lines of cell symmetry transitioning.

Is there any more code, possibly some other place you are setting node.className to something? It's possible it may be getting it in a funky state that is then messing with this bit of code.

You might also try console.log(node.className) before you try to change it.