javascript - 使用 document.getElementById

Question

我很难从我想要的 dom 中获取一些数据。

我这里有一些 html:

 <ul id="userMenu">
      <li class="userGreet devi">I WANT THIS TEXT HERE </li><li> <a href="javascript:void(0)" class="more" title="Menu">Menu</a>
      <ul> ....
            <li class="home">   
            </li>
      </ul>
      ...</li>
 </ul>

我知道如果我说

var x = document.getElementById('userMenu');  

我可以取回“某些东西”(尽管这一切都在门户中，因此很难将 Java 脚本断点放入其中)。所以我不确定如何进一步获取字符串 "I WANT THIS TEXT HERE " ?

我想我必须遍历 childNodes 但不确定我是如何或究竟得到什么，所以我可以得到那个字符串，而且 getElementById 对 class= 不起作用，那会是 getElementByClass 吗？

这个 DOM 东西的新手。

Answer 1

你可以使用这个:

var text = document.querySelectorAll('#userMenu li.userGreet.devi')[0].innerHTML;

参见 MDN's documentation of querySelectorAll .

请注意，这不适用于 IE7。要以跨浏览器的方式更轻松地执行此类操作，您可以使用流行的 DOM 操作库之一，例如 jQuery。 .

---

如果您的 HTML 与您想要的文本不同(例如，您有标记)，您可以使用它来获取解释的文本:

var element = document.querySelectorAll('#userMenu li.userGreet.devi')[0];
var text = element.innerText || element.textContent;

请注意，库再次帮助您处理浏览器之间的不兼容问题。 Jquery 会让你做

var text = $('#userMenu li.userGreet.devi').text();