Element.getElementById() not working

Question

Basically, I'm unable to get the element text from following 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>

The inspector says the group gtext has no getElementById function

My goal is to change the content of text.

Here is CodePen Example:

Answer 1

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

That's why when you try to call getElementById as a function of some element in DOM it throws an error in console.

As ids of DOM elements should be unique inside a single document, you can use:

t = document.getElementById("text");

Working Example:

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>

---

Alternatively you can use .querySelector(). This is available as a method of global document object as well as on all element objects in DOM.

You can use the following variant:

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

t.textContent = "hello";

Working Example:

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>

---

EDIT:

Thanks to @PaulLeBeau for this:

.getElementById() is also available as a method of SVGSVGElement. We can access it if we have a reference to an SVG element inside DOM. For example:

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

However, this method is not available on any element other than SVG inside DOM.

Working Example:

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>

Answer 2

getElementById() is not a function that is available for group elements. You either need to use document.getElementById() or you can call it from an <svg> element.

var mysvg = getElementById("mysvg");
var t = mysvg.getElementById("text");

Or if you already had a reference to the group element, you could use the ownerSVGElement property to get the group's ancestor SVG element. Then call getElementById() from there.

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