document.getElementsByTagName（'*'）无法识别SVG TAG并给出控制台错误

Question

问题很简单，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标签有什么问题？

Answer 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>

要获得SVG的.className，有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>

Answer 2

SVG的className是SVGAnimatedString而ClassName元素的HTML是string，

因此，当你尝试Object.trim()时，你最终会得到trim is not a function的错误，因为修饰方法不适用于对象

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

你可以使用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>

Answer 3

请使用<embed>标签，对我来说很好。