Element.getElementById() 不起作用 [英] Element.getElementById() not working

问题描述

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

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>

检查员说 gtext 组没有 getElementById 函数

The inspector says the group gtext has no getElementById function

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

My goal is to change the content of text.

这是CodePen 示例:

推荐答案

来自 文档:

与其他一些类似的方法不同，getElementById 仅作为全局document 对象的方法可用，而不能作为 DOM 中所有元素对象的方法.因为 ID 值在整个文档中必须是唯一的，所以不需要函数的本地"版本.

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 中某个元素的函数调用时，它会在控制台中引发错误.

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

由于DOM元素的ids在单个文档中应该是唯一的，你可以使用:

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

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 中的所有元素对象的方法.

Alternatively you can use .querySelector(). This is available as a method of global document object as well as on all element objects in 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:

Thanks to @PaulLeBeau for this:

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

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

但是，此方法不适用于 DOM 中除 SVG 之外的任何元素.

However, this method is not available on any element other than SVG inside 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>

这篇关于Element.getElementById() 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！