document.getElementsByTagName('*')不识别SVG标记并给出控制台错误
问题很简单，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标签有什么问题？
回答 3
Stack Overflow用户
发布于 2019-04-15 01:36:30
首先，document.getElementsByTagName(...)、document.querySelector(...)和document.querySelectorAll(...)都承认SVG。
您从代码中得到的错误并不是因为这一点。问题在于您在object而不是string上使用了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，有三种方法：
var svg = document.querySelector('svg');
console.log('className of svg: ', svg.className.baseVal);<svg class="special"></svg>
var svg = document.querySelector('svg');
console.log('className of svg: ', svg.getAttribute('class'));<svg class="special"></svg>
3: .classList
请注意，https://developer.mozilla.org/en-US/docs/Web/API/Element/classList返回一个对象，而不是字符串。
var svg = document.querySelector('svg');
console.log('className of svg: ', svg.classList);<svg class="special"></svg>
Stack Overflow用户
发布于 2019-04-15 01:36:51
ClassName of SVG是SVGAnimatedString，而ClassName of HTML元素是字符串，
因此，当您尝试Object.trim()时，您最终会得到trim is not a function错误，因为trim is方法在对象上不可用。
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>
Stack Overflow用户
发布于 2019-04-15 01:31:45
用<embed>标记代替，对我来说很好。
https://stackoverflow.com/questions/55681506
复制相似问题
腾讯云开发者
