2017-06-01 85 views
0

[编辑]这不是欺骗,因为每一个属性是string当我试图typeof list[x]我想只有一个谁是x: text如何获取此对象中文本的所有属性?

我试图让所有谁是text的属性,但我无法实现它。我不知道为什么片断不工作我犯了一个错误,但我不觉得哪里... 我的目标是这样的:enter image description here

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>

+0

难道你不想检查'nodeType'而不是'typeof'吗?例如。 'if(x.nodeType === 3)'(3是表示文本节点的数字)。 – evolutionxbox

+0

@evolutionxbox,但我认为我的循环是错误的 – Jerome

+1

[我怎样才能检查一个var是JavaScript中的字符串?](https://stackoverflow.com/questions/6286542/how-can-i-check- if-a-var-is-a-string-in-javascript) –

回答

1

它显示正确的文本:cadvisorcadvisor2

通过改变代码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>

+0

它在这里不起作用,我的浏览器刚刚崩溃 – Jerome

+0

我做了更改并显示正确的文本。如果它仍然有帮助=) – Val

+1

是的,它会这样工作,我用另一种方式,但它仍然是一个好方法 – Jerome