How to get all properties who are text in this object?

Question

[edit] it's not a dupe because every properties are string when I tried typeof list[x] I want to get only the one who are x: text

I'm trying to get all the properties who are text but I can't achieve it. I don't know why the snippet is not working I made a mistake but I don't find where... My object is like this:

document.getElementById("a").onclick = function(e){
 var list = document.getElementsByTagName("svg")[0].childNodes[1].childNodes;
  for (var x in list) {
    if (list.hasOwnProperty(x)) {
      if(list[x] === "text"){
         console.log(list[x]);
      }else{
         console.log("no text");
      }
    }
  }
  console.log(list)
}

<button id="a">click</button>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentscripttype="application/ecmascript" contentstyletype="text/css" height="555px" preserveAspectRatio="none" style="width:1181px;height:555px;" version="1.1" viewBox="0 0 1181 555" width="1181px" zoomAndPan="magnify"><defs><filter height="300%" id="f491e1k" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"></feGaussianBlur><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"></feColorMatrix><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"></feOffset><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"></feBlend></filter></defs>
<g>
<!--entity cadvisor-->
<rect fill="#FEFECE" filter="url(#f491e1k)" height="46.29" style="stroke: #A80036; stroke-width: 1.5;" width="97" x="133.675" y="8"></rect>
<rect fill="#FEFECE" height="10" style="stroke: #A80036; stroke-width: 1.5;" width="15" x="210.675" y="13"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="208.675" y="15"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="208.675" y="19"></rect>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="57" x="148.675" y="41.3027">cadvisor</text>
<path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" />

<!--entity cadvisor2-->
<rect fill="#FEFECE" filter="url(#f491e1k)" height="46.29" style="stroke: #A80036; stroke-width: 1.5;" width="104" x="433.175" y="377"></rect>
<rect fill="#FEFECE" height="10" style="stroke: #A80036; stroke-width: 1.5;" width="15" x="517.175" y="382"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="515.175" y="384"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="515.175" y="388"></rect>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="64" x="448.175" y="410.3027">cadvisor2</text>
<path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" />
</g>
</svg>

Don't you want to be checking `nodeType` not `typeof`? E.g. `if (x.nodeType === 3)` (3 is the number which represents text nodes). — evolutionxbox, Jun 01 '17 at 09:14
Possible duplicate of [How can I check if a var is a string in JavaScript?](https://stackoverflow.com/questions/6286542/how-can-i-check-if-a-var-is-a-string-in-javascript) — Mihai Alexandru-Ionut, Jun 01 '17 at 11:25

Val · Answer 1 · 2017-06-02T01:54:08.793

It shows correct text: cadvisor and cadvisor2

by changing code to svg.getElementsByTagName('text')

document.getElementById("a").onclick = function(e){
 var target = document.getElementById("target");
 var list = target.getElementsByTagName('text');
 
 for (var i=0; i<list.length; i++) {
   console.log(list[i].textContent);
 }
 
}

<button id="a">click</button>
<svg id="target" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentscripttype="application/ecmascript" contentstyletype="text/css" height="555px" preserveAspectRatio="none" style="width:1181px;height:555px;" version="1.1" viewBox="0 0 1181 555" width="1181px" zoomAndPan="magnify"><defs><filter height="300%" id="f491e1k" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"></feGaussianBlur><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"></feColorMatrix><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"></feOffset><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"></feBlend></filter></defs>
<g>
<!--entity cadvisor-->
<rect fill="#FEFECE" filter="url(#f491e1k)" height="46.29" style="stroke: #A80036; stroke-width: 1.5;" width="97" x="133.675" y="8"></rect>
<rect fill="#FEFECE" height="10" style="stroke: #A80036; stroke-width: 1.5;" width="15" x="210.675" y="13"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="208.675" y="15"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="208.675" y="19"></rect>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="57" x="148.675" y="41.3027">cadvisor</text>
<path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" />

<!--entity cadvisor2-->
<rect fill="#FEFECE" filter="url(#f491e1k)" height="46.29" style="stroke: #A80036; stroke-width: 1.5;" width="104" x="433.175" y="377"></rect>
<rect fill="#FEFECE" height="10" style="stroke: #A80036; stroke-width: 1.5;" width="15" x="517.175" y="382"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="515.175" y="384"></rect>
<rect fill="#FEFECE" height="2" style="stroke: #A80036; stroke-width: 1.5;" width="4" x="515.175" y="388"></rect>
<text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="64" x="448.175" y="410.3027">cadvisor2</text>
<path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" />
</g>
</svg>

yes it would works like this, I used an other way but it still a good approach — Jerome, Jun 01 '17 at 10:03

Nico Van Belle · Accepted Answer · 2017-06-01T09:24:49.053

1

You can check the tagName of an element which returns 'text' for text tags.

For all properties, check the Element documentation. SVGElement inherits from it.

edited Jun 01 '17 at 09:24

answered Jun 01 '17 at 09:21

Nico Van Belle

4,911
4
32
49

How to get all properties who are text in this object?

2 Answers2