JS: удалить атрибуты в конкретном <></>

#javascript #dom

Изображение содержит атрибут class, который подставляется CMS. 




Подскажите способ удаления атрибута class="fill-content replaced-content"
чтобы тег выглядел вот так: 

Мой первый способ:

var imgRemoveClass = document.querySelectorAll("img");
    if (imgRemoveClass.hasAttribute("class")) {
        imgRemoveClass.removeAttribute("class");
    }


выдает ошибку:

Uncaught TypeError: imgRemoveClass.hasAttribute is not a function


Мой второй способ:

var imgRemoveClass = document.querySelector("img");
    if (imgRemoveClass.hasAttribute("class")) {
        imgRemoveClass.removeAttribute("class");
    }


в консоли срабатывет, но при загрузке со страницы:

Uncaught TypeError: imgRemoveClass.hasAttribute is not a function

    

Ответы

Ответ 1

в первом случае imgRemoveClass - это массив. Чтобы удалить класс, необходимо указать
индекс элемента в этом массиве. Например, imgRemoveClass[0].removeAttribute("class");
Либо же циклом.

Во втором случае, сложно сказать. Возможно скрипт загружается раньше, чем разметка.
Также, может быть, что где-то буква e, a и тп. написана в кириллической раскладке 
Попробуйте обратиться через id, например.


Ответ 2

Благодаря ответу Дмытрык
догодался о том что мой скрипт:

var imgRemoveClass = document.querySelector("img");
    if (imgRemoveClass.hasAttribute("class")) {
        imgRemoveClass.removeAttribute("class");
    }


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

Решение:

window.onload = function() {
var imgRemoveClass = document.querySelector("img");
        if (imgRemoveClass.hasAttribute("class")) {
            imgRemoveClass.removeAttribute("class");
        }
}


теперь скрипт исполняется только после полной загрузки документа и работает по назначению.