Невозможно стилизовать элементы, используя DOM-манипуляции, когда новый класс добавлен методом element.classList.add () в javascript

Question

Я пытаюсь стилизовать таблицу, подобную этой

  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td >Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td >Jackson</td>
    <td>94</td>
  </tr>
</table> 

, в которой есть код Javascript, создающий классы, показанные ниже

td.classList.add("col");

Однако я не понимаю, почему стилизация с использованиемэтот класс не будет работать с кодом ниже

const tabl= document.getElementsByClassName("col");

    for (var i = 0; i < tabl.length; i++) {
      tabl[i].style.backgroundColor="red";
    } 

Answer 1

Итак, я не могу понять, в чем дело, из небольшого кода, который вы представили. Я заполнил пропуски как можно лучше, чтобы это работало, и оно добавляет для меня красный цвет.

//Get NodeList of all tds
let tds = document.querySelectorAll('td');

//Convert NodeList to Array
tds = Array.from(tds);

//Add class 'col' to each td
tds.map((td) => td.classList.add('col'));

//Get all '.col' elements
const tabl= document.getElementsByClassName("col");

//Programmatically set style attribute on each .col
for (var i = 0; i < tabl.length; i++) {
  tabl[i].style.backgroundColor="red";
} 

Обычно считается плохой практикой напрямую, программно устанавливать стиль элемента таким образом. ;Лучше добавить класс и обработать стиль через файл CSS. Поскольку вы уже добавляете класс, почему бы просто не установить этот класс для установки background-color: red в любом случае в CSS-файле?

В любом случае, вы можете проверить StackBlitz здесь, чтобы увидеть, как он работает и работает: https://stackblitz.com/edit/js-2zm68n

Answer 2

Зачем использовать имя класса? Пожалуйста, попробуйте это. Надеюсь, что это может помочь

var elements = document.getElementsByTagName('td')
var tds = Array.from(elements)
tds.map(element => {
  element.setAttribute('class', 'classname')
})

// check
console.log('finded tds: ' + document.getElementsByClassName('classname').length)

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td >Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td >Jackson</td>
    <td>94</td>
  </tr>
</table>