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（ '0级nav5'）你正在寻找的0级nav5 ID，但它不存在。所以通过将类更改为一个id它应该工作。

如果你真的不喜欢使用id，可以尝试通过简单地调用jQuery来调用它。

$('.level0 nav5') 

使用jQuery，你可以实现很多简洁的事情。所以试着看看。