document.getElementsByTagName('*') does not recognize SVG TAG and give console error

Question

the problem is simple, document.getElementsByTagName('*') does not select the SVG tag and in the console it gives an error.

But if I erase the SVG labels, works correctly.

My Code:

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>

My JsFiddle:

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

What is the problem with the SVG tag?

Answer 1

First of all, document.getElementsByTagName(...), document.querySelector(...) and document.querySelectorAll(...) all DO recognise SVG.

The error you get from your code is not because of that. The problem is because you use .trim() on an object instead of string. Well, I get the confusion.

For normal elements, .className returns a string. For SVG, however, .className returns a SVGAnimatedString object.

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>

To get the .className of SVG, there is 3 ways:

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

Please note that .classList returns an object, not a string.

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

console.log('className of svg: ', svg.classList);

<svg class="special"></svg>