После getElementById getElementByClass не связывается с DOM

Question

У меня проблема со странным поведением в JavaScript, которое я не понимаю:

Если я получу элемент (например, строку в таблице), как это:

var someElement = document.getElementById("row1");

А затем попробуйте найти элемент за классом из этого элемента (например, столбец) и изменить innerHTML, ничего не происходит:

someElement.getElementsByClassName("column1").innerHTML = "new text";

Но если я вместо этого сделаю это:

someElement.childNodes[0].innerHTML= "new text";

Элементы innerHTML изменяются и отображаются в DOM. Почему это происходит так? Я думаю, что классная вещь создаст для меня более чистый код прямо сейчас, так есть ли способ заставить метод класса работать так, как я думаю?

Я использую новейшую версию Chrome.

Answer 1

Здесь нет getElementByClassName() должно быть getElementsByClassName() (Обратите внимание s в конце elements,

Но главная проблема возникает, когда вы пытаетесь вызвать свойство объекта innerHTML на результат getElementsByClassName() которые возвращают массивоподобный объект всех дочерних элементов, которые имеют все заданные имена классов.

Во всяком случае, я предлагаю использовать querySelector() или же querySelectorAll() вместо этого, как:

someElement.querySelector(".column1").innerHTML = "new text";
//Or
someElement.querySelectorAll(".column1")[0].innerHTML = "new text";

В противном случае вы можете просто указать на первый элемент возвращаемого результата, например:

someElement.getElementsByClassName("column1")[0].innerHTML = "new text";

Answer 2

Дело в том, что идентификатор уникален, класс может использоваться на нескольких элементах, поэтому функция называется getElementsByClassName, обратите внимание на S в элементах, чтобы изменить что-либо с классом, вы должны пройти через цикл, так что вы можете использовать это, например,

    var a = document.getElementsByClassName("example"); 

    for( let i = 0; i< a.length;i++)
         a[i].style.top = "50px";

Обратите внимание: это только пример, используйте ваш innerhtml или все, что вам нужно