使用的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

回答

相關問題