using document.getElementById

using document.getElementById

本文关键字：getElementById document using      更新时间：2023-09-26

我有一个时间从我想要的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没有工作的类=会是getElementByClass吗?

新的DOM的东西

你可以这样做:

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

请参阅MDN的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();

试试这个…

document.getElementById('userMenu').children[0].innerHTML

如果元素的顺序发生了一点变化，使用纯javascript并使代码更加健壮，您可以使用id和类来获得如下内容:

var text = document.getElementById('userMenu').getElementsByClassName("userGreet")[0].innerHTML;

或者使用标签名，可以这样做:

var text = document.getElementById('userMenu').getElementsByTagName("li")[0].innerHTML;

你可以像这样浏览

var x = document.getElementById('userMenu');  
var xChilds = x.childNodes;
var requiredElement = null;
for(var i = 0; i < xChilds.length; i++) {
   if(xChilds[i].className.indexOf('usergreet devi') !== -1) {
      requiredElement = xChilds[i];
      break;
   }
}
console.log(requireElement);

jQuery将使这更容易。你可以这样写

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

很抱歉，如果这是显而易见的，但是…一般来说，如果您打算访问元素，那么在一开始就给它们指定id，这将为您节省大量时间。

<li id="ug0" class="userGreet devi">...</li>

当然

document.getElementById('ug0').innerHTML;
相关文章：