Javascript，修改没有id的子元素的内容

Question

我需要修改子元素的内容。不幸的是，这个元素没有id。

结构是：

<ul id="nav">
    <li class="level0 nav5">
        <a class="top-menu">
            <span> CONTENT NEEDS MODFIED </span>

唯一的区别是李班。我可以通过CSS访问

#nav li.level0.nav-5 a span { }

但我无法通过Javascript访问。以下是错误

var str = document.getElementById("level0.nav5").innerHTML;
str.children('span').eq(0).text()

有人能指出我正确的方向吗？

谢谢！

Answer 1

您可以使用querySelector

document.querySelector('#nav li.level0 a span').innerHTML = 'Something else'

FIDDLE

Answer 2

您可以使用querySelectorAll获取元素：

var element = document.querySelectorAll("a.top-menu span");

Answer 3

尝试

而不是

<li class='level0 nav5'>

此

<li id='level0 nav5'>

因为使用getElementById（'level0 nav5'）你正在寻找level0 nav5 id，但它不存在。因此，通过将类更改为id，它应该可以工作。

如果您真的不喜欢使用id，请尝试查看jQuery，只需执行此操作即可调用它。

$('.level0 nav5')

使用jQuery可以实现很多简洁的事情。所以试着调查一下。