使用的document.getElementById

我有处理时间为一个DOM我希望得到一些数据的挫折感。使用的document.getElementById

我有一些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东西的新手。

来源

2013-02-27 Codejoy

可以使用jQuery的？或者你正在试图学习dom？ – 2013-02-27 18:31:57

....这就是为什么jQuery被发明。如果你想使用jQuery，这是很简单的。元素是：$（'＃userMenu li'）。eq（0） – 2013-02-27 18:32:26

扫描通过使用普通的JavaScript，使你的代码，如果元素的顺序改变一点点更强大的，你可以使用这两个ID和类来获得这样的：

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

或使用标签名称，它可以这样做：

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

来源

2013-02-27 19:11:37 jfriend00

做到了。可能很简单，但这对每个人都有帮助！ – Codejoy 2013-02-27 20:28:37

您可以使用此：

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

见MDN's documentation of querySelectorAll。

请注意，这不适用于IE7。在跨浏览器的方式更容易做这样的事情，你可以使用像jQuery流行的DOM操作库之一。

如果您的HTML是你想要的文字不同（即你有例如标记），您可以使用这一方法得到的解释文字：

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

请注意，在这里再次库帮你处理浏览器之间的不兼容问题。 jQuery的将让你做

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

来源

2013-02-27 18:32:26

使用'textContent'（IE8的'innerText'）而不是'innerHTML'。 – 2013-02-27 18:34:09

innerHTML的优点是它适用于所有浏览器。只要文本是html，就不用担心。 – 2013-02-27 18:34:37

textContent + innerText也包含所有浏览器，*和*不包括HTML标记。 OP说“文本”，而不是“HTML”。如果元素包含HTML（元素/转义实体），那么结果不是“文本”。 – 2013-02-27 18:35:34

尝试......

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

来源

2013-02-27 18:34:04

使用'.children [0]'而不是'childNodes [0]'来确保排除文本节点。 – 2013-02-27 18:34:39

感谢您的提示！ – 2013-02-27 18:36:32

的jQuery将使它更容易些。你可以这样做

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

来源

2013-02-27 18:34:05 mockaroodev

关于SO的约定是在未指定jQuery时不提供jQuery答案。 – jfriend00 2013-02-27 19:09:05

jfriend00 - 抱歉，没有意识到 - 我应该删除这个答案吗？ – mockaroodev 2013-02-27 19:49:07

我很想用jquery作为我试图将一些js塞进一个portlet，我不认为它可用。 – Codejoy 2013-02-27 19:53:43

你可以这样

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);

来源

2013-02-27 18:35:25 Starx

对于现代的浏览器，按照提供的'querySelectorAll'使用dystroy的答案。 – Starx 2013-02-27 18:37:55

很抱歉，如果这是显而易见的，但是......一般来说，如果你要试图访问的元素，给他们的ID在开始时，它会为你节省大量的时间。

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

那当然

document.getElementById('ug0').innerHTML;

来源

2013-02-28 04:52:05

使用的document.getElementById

回答

相关问题