0

Я решил реализовал код, который переносит svg иконку, которую берёт из 'src' тега img с классом .svg. Код полностью отрабатывает, при этом есть ошибка в консоли

Uncaught TypeError: Cannot read property 'querySelector' of null at XMLHttpRequest.xhr.onreadystatechange

Вот и код:

let svg = document.querySelectorAll('.svg');
svg.forEach(element => {
  let img = element;
  let imgClass = img.getAttribute('class');
  let imgURL = img.getAttribute('src');
  let xhr = new XMLHttpRequest();
  xhr.open('GET', imgURL);
  xhr.responseType = 'document'; 
  xhr.onreadystatechange = function (data) {
    let svgi = xhr.response.querySelector('svg');
    if (typeof imgClass !== 'undefined') {
      svgi.setAttribute('class', imgClass);
    }
    img.replaceWith(svgi);
  }
  xhr.send();
})
2
  • xhr.response это просто текст добавьте его к тексту страницы Commented 6 февр. 2020 в 20:14
  • Спасибо, а вот если сделать просто таким способом, то копируются и другие элементы кроме svg. Можно сделать, чтобы брался только svg тег?
    – Vashka
    Commented 6 февр. 2020 в 20:21

1 ответ 1

4

Как правильно написали в комментах, xhr.response – это текст, и чтобы вытащить из него svg, нужно сделать следующее:

  1. создать элемент, не прикрепляя его к дереву документа: const tempContainer = document.createElement('div')

  2. поместить в него html (если в ответе действительно валидный hmtl): tempContainer.innerHTML = xhr.response (для примера: tempContainer.innerHTML = '<div><span id="test">test</span></div>')

  3. вытащить необходимую часть, в вашем случае let svgi = tempContainer.querySelector('svg'); (в примере tempContainer.querySelector('#test'))

  4. использовать её, как необходимо

(память от tempContainer освободится, когда исчезнут все ссылки на него)

PS правда, у вас ошибка гласит "Cannot read property 'querySelector' of null", а не of string, так что вам надо ещё проверить, что вы действительно получаете в ответе то, что нужно (и все эти манипуляции проводить после проверки typeof xhr.response == 'string')

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.