3
votes

document.getElementsByTagName ('*') ne reconnaît pas SVG TAG et donne une erreur de console

le problème est simple, document.getElementsByTagName ('*') ne sélectionne pas la balise SVG et dans la console cela donne une erreur.

Mais si j'efface les étiquettes SVG, ça marche correctement.

Mon code:

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

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

Mon JsFiddle:

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

Quel est le problème avec la balise SVG?

javascript dom

7 commentaires

Déplacez console.log ("Class>" + Master [i] .className); avant d'essayer de le découper. Verra mieux le problème

le problème est maintenant le console.log Is>: Master [i] .className = Master [i] .className.trim ();

Renato, @charlietfl vous apprend à déboguer.

astuce: Master [i] .className n'est pas toujours une chaîne - dans un SVG, c'est un objet

peut être utilisé getElementsByTagNameNS ? developer.mozilla.org/en-US/docs/Web/ API / Document /…

@RenatoRamosPuma à droite ... et lorsque vous vous connectez avant que les erreurs ne se produisent , vous voyez que ce n'est pas une chaîne que vous pouvez couper

Merci à tous pour votre aide. Je vais éditer mon jsfiddle

3 Réponses :

0
votes

Utilisez la balise à la place, cela fonctionne très bien pour moi.

0 commentaires

5
votes

Tout d'abord, document.getElementsByTagName (...) , document.querySelector (...) et document.querySelectorAll (...) tous reconnaissent SVG.

L'erreur que vous obtenez de votre code n'est pas à cause de cela. Le problème est que vous utilisez .trim () sur un objet au lieu de string . Eh bien, je comprends la confusion.

Pour les éléments normaux, .className renvoie une chaîne. Pour SVG, cependant, .className renvoie un Objet SVGAnimatedString .

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

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

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

Pour obtenir le .className de SVG, il y a 3 façons:

1: .className.baseVal

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

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

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

2: .getAttribute ('class')

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

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

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

3: .classList

Veuillez noter que .classList renvoie un objet, pas une chaîne.

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

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

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

2 commentaires

ou .classList , qui devrait de toute façon être préféré même pour HTML

Merci les gars, je vais essayer d'implémenter la solution dans un for () {}.

2
votes

ClassName de SVG est une SVGAnimatedString alors que ClassName des éléments HTML est une chaîne,

Alors quand vous essayez Object.trim () vous finissez par obtenir l'erreur que trim n'est pas une fonction parce que la méthode de trim n'est pas disponible sur les objets

<svg class="any"></svg>
<div class='someclass'></div>

console.log('svg element',document.querySelector('svg').classList)
console.log('HTML element',document.querySelector('div').classList)

Vous pouvez utiliser getAttribute et setAttribute Note MDN

<svg class="any"></svg>
<div class='someclass'></div>

console.log('svg element',document.querySelector('svg').getAttribute('class'))
console.log('svg element',document.querySelector('div').getAttribute('class'))

Vous pouvez utiliser classList

<svg id='svg' class="any"></svg>
<div id='div' class='someclass'></div>

console.log('svg element',document.getElementById('svg').className)
console.log('HTML element',document.getElementById('div').className)

2 commentaires

ou .classList , qui devrait de toute façon être préféré même pour HTML

@Kaiido ouais vrai,