Блог

Главная - Вопросы по программированию - document.getElementsByTagName(‘*’) не распознает ТЕГ SVG и выдает ошибку консоли

document.getElementsByTagName(‘*’) не распознает ТЕГ SVG и выдает ошибку консоли

#javascript #dom

#javascript #dom

Вопрос:

проблема проста, document.getElementsByTagName('*') не выбирает тег SVG и в консоли выдает ошибку.

Но если я сотру метки SVG, работает правильно.

Мой код:

 var Master = document.getElementsByTagName('*');

/* NOT WORKING TOO 
var Master = document.getElementsByTagName('body')[0].getElementsByTagName('*');
var Master = document.querySelectorAll('*');
*/

var Vector = [];

for (var i=0; i < Master.length; i  ){
  Master[i].className = Master[i].className.trim();
  console.log("Class > "   Master[i].className);
  if (Master[i].className != ""){
    var chaps = Master[i].className.split(/s /);
    for (var j=0; j < chaps.length; j  ){
      Vector.push(chaps[j]);
    }
  }
}

//console.log(Vector); 
 <section class="classMaster">
  <h1 class="title-1"><b>Title:</b> Anyone</h1>
  <h2 class="title-2">Title T2</h2>
  <p class="parrafe"><b>Strong:</b> Year 2019.<p/>
  <p class="parrafe"><b>Text:</b> Everybody.</p>
  <p><b>by: </b>StackOverflow</p>
</section>

<svg></svg>
<svg className="any"></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
</svg>

Мой JsFiddle:

https://jsfiddle.net/RenatoRamosPuma/Lbj14xg7/9/

В чем проблема с тегом SVG?

Комментарии:

1. Переместите console.log("Class > " Master[i].className); , прежде чем пытаться обрезать его. Проблема будет видна лучше

2. проблема не в консоли. журнал — это>: Master[i].className = Master[i].className.trim();

3. Ренато, @charlietfl учит вас отлаживать.

4. подсказка: Master[i].className это не всегда строка — в SVG это объект

5. может быть, использовать getElementsByTagNameNS ? developer.mozilla.org/en-US/docs/Web/API/Document /…

Ответ №1:

Прежде всего, document.getElementsByTagName(...) , document.querySelector(...) и document.querySelectorAll(...) все ОНИ распознают SVG.

Ошибка, которую вы получаете из своего кода, не из-за этого. Проблема в том, что вы используете .trim() object вместо string . Ну, я понимаю путаницу.

Для обычных элементов .className возвращает строку. Однако для SVG .className возвращает SVGAnimatedString объект.

 var div = document.querySelector('div');
var svg = document.querySelector('svg');

console.log('className of div: ', div.className);
console.log('className of svg: ', svg.className); 
 <div class="normal"></div>
<svg class="special"></svg>

Чтобы получить .className из SVG, есть 3 способа:

1: .className.baseVal 

 var svg = document.querySelector('svg');

console.log('className of svg: ', svg.className.baseVal); 
 <svg class="special"></svg>

2: .getAttribute('class') 

 var svg = document.querySelector('svg');

console.log('className of svg: ', svg.getAttribute('class')); 
 <svg class="special"></svg>

3: .classList

Обратите внимание, что .classList возвращает объект, а не строку.

 var svg = document.querySelector('svg');

console.log('className of svg: ', svg.classList); 
 <svg class="special"></svg>

Комментарии:

1. или .classList , который в любом случае должен быть предпочтительным даже для HTML

2. Спасибо, ребята, я постараюсь реализовать решение в for(){} .

Ответ №2:

Имя_класса SVG является SVGAnimatedString , тогда ClassName как из HTML элементов является строкой,

Поэтому, когда вы пытаетесь Object.trim() , вы в конечном итоге получаете сообщение об ошибке, trim is not a function поскольку метод trim недоступен для объектов

 console.log('svg element',document.getElementById('svg').className)
console.log('HTML element',document.getElementById('div').className) 
 <svg id='svg' class="any"></svg>
<div id='div' class='someclass'></div>

Вы можете использовать getAttribute и setAttribute MDN примечание

 console.log('svg element',document.querySelector('svg').getAttribute('class'))
console.log('svg element',document.querySelector('div').getAttribute('class')) 
 <svg class="any"></svg>
<div class='someclass'></div>

Вы можете использовать classList

 console.log('svg element',document.querySelector('svg').classList)
console.log('HTML element',document.querySelector('div').classList) 
 <svg class="any"></svg>
<div class='someclass'></div>

Комментарии:

1. или .classList , который в любом случае должен быть предпочтительным даже для HTML

2. @Kaiido да, верно,

Ответ №3:

<embed> Вместо этого используйте тег, у меня все работает нормально.

Метки: