javascript - Element.getElementById() 不工作

Question

基本上，我无法获取元素 text来自以下 SVG:

panel =  document.getElementById("panel");
g = panel.getElementById("gtext");
t = g.getElementById("text");

t.textContent = "hello";

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink" width="80" height="80" id="panel">    
    <g id="gtext" transform="translate(0,48) scale(1 1)">
        <text id="text">
           XXXXXXXXXXXXXXXXXXX
        </text>    
    </g>
</svg>

检查员说组 gtext没有 getElementById功能

我的目标是更改 text 的内容.

这里是 CodePen Example :

Answer 1

来自 Documentation :

Unlike some other similar methods, getElementById is only available as a method of the global document object, and not available as a method on all element objects in the DOM. Because ID values must be unique throughout the entire document, there is no need for "local" versions of the function.

这就是为什么当您尝试调用 getElementById 时作为 DOM 中某些元素的函数，它会在控制台中引发错误。

如 id s 的 DOM 元素在单个文档中应该是唯一的，您可以使用:

t = document.getElementById("text");

工作示例:

t = document.getElementById("text");

t.textContent = "hello";

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink" width="80" height="80" id="panel">    
    <g id="gtext" transform="translate(0,48) scale(1 1)">
        <text id="text">
           XXXXXXXXXXXXXXXXXXX
        </text>    
    </g>
</svg>

或者，您可以使用 .querySelector() .这可作为全局 document 的一种方法使用。对象以及 DOM 中的所有元素对象。

您可以使用以下变体:

panel =  document.querySelector("#panel");
g = panel.querySelector("#gtext");
t = g.querySelector("#text");

t.textContent = "hello";

工作示例:

panel =  document.querySelector("#panel");
g = panel.querySelector("#gtext");
t = g.querySelector("#text");

t.textContent = "hello";

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink" width="80" height="80" id="panel">    
    <g id="gtext" transform="translate(0,48) scale(1 1)">
        <text id="text">
           XXXXXXXXXXXXXXXXXXX
        </text>    
    </g>
</svg>

编辑:

感谢@PaulLeBeau:
.getElementById()也可作为 SVGSVGElement 的方法使用.如果我们在 DOM 中有对 SVG 元素的引用，我们就可以访问它。例如:

var svg = document.getElementById('my-svg');
var t = svg.getElementById("text");

但是，此方法不适用于 SVG 以外的任何元素。 DOM 内部。

工作示例:

var svg = document.getElementById('my-svg');
var t = svg.getElementById("text");

t.textContent = 'hello';

<svg id="my-svg" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink= "http://www.w3.org/1999/xlink" width="80" height="80" id="panel">    
    <g id="gtext" transform="translate(0,48) scale(1 1)">
        <text id="text">
           XXXXXXXXXXXXXXXXXXX
        </text>    
    </g>
</svg>