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="" 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>

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/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/RenatoRamosPuma/Lbj14xg7/9/

What is the problem with the SVG tag?

• javascript
• dom

• 1 Move console.log("Class > " + Master[i].className); before you try trimming it. Will see issue better – charlietfl Commented Apr 15, 2019 at 1:21
• the problen no is the console.log Is>: Master[i].className = Master[i].className.trim(); – Renato Ramos Commented Apr 15, 2019 at 1:27
• 1 Renato, @charlietfl is teaching you how to debug. – yqlim Commented Apr 15, 2019 at 1:28
• hint: Master[i].className isn't always a String - in an SVG, it's an Object – Jaromanda X Commented Apr 15, 2019 at 1:30
• may be use getElementsByTagNameNS ? developer.mozilla/en-US/docs/Web/API/Document/… – Mister Jojo Commented Apr 15, 2019 at 1:33

3 Answers 3

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>

ClassName of SVG is an SVGAnimatedString whereas ClassName of HTML elements is string,

So when you try Object.trim() you end up getting error that trim is not a function because trim is method is not available on objects

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>

You can use getAttribute and setAttribute MDN note

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>

You can use 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>

Use <embed> tag instead, works fine for me.