如何用javascript更改这个伪类?

我有以下svg元素,它与其他一些东西相关

<text x="370.9472783496851" y="141.05272165031482" text-anchor="middle" font="10px &quot;Arial&quot;" stroke="none" fill="#000000" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); text-anchor: middle; font: 10px Arial;" class="wheelnav-wheelDiv-title-basic-1" id="wheelnav-wheelDiv-title-1" transform="matrix(0.7071,-0.7071,0.7071,0.7071,8.7932,303.3224)" stroke-width="1.0360904852357105"><tspan dy="3.1620966503148225" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Multiformer II</tspan></text>

如您所见,文本元素中有一个tspan元素,我正在使用css样式表给它一个特定的样式,如下所示:

[class|=wheelnav-wheelDiv-title-basic]>tspan {
    fill: rgb(255, 255, 255);
    stroke: none;
    font-size: 100%;
    font-family: Lato;
}

它工作得很好,但我想在程序运行时更改tspan的样式。我是说,对于js,我尝试了以下几点:

for(let i=0;i<3;i++){
                        let element_class = 'wheelnav-wheelDiv-title-basic-'+i;
                        let element = document.getElementsByClassName(element_class).item(0);
                        console.log(element);
                    }

但是它告诉我HTMLCube是空的(NULL),所以没有孩子。

编辑

顺便说一下,我还有其他的元素,比如:

wheelnav-wheeldiv-title-basic-0型
wheelnav-wheeldiv-title-basic-2轮导航

发现错误

结果是,在创建dom之前,我试图从dom中获取元素,这就是它返回null的原因。