使用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 "希望在"I WANT THIS TEXT HERE " ？

我認為我必須遍歷childNodes，但不確定如何返回或確切返回什么，以便可以獲取該字符串，而且getElementById對於class =無效，那將是getElementByClass嗎？

DOM東西的新手。

Answer 1

您可以使用：

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

Answer 2

嘗試這個...

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

Answer 3

您可以像這樣掃描

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

Answer 4

如果元素的順序稍有變化，請使用普通的javascript並使代碼更健壯，您可以同時使用id和class來獲取它，如下所示：

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

或使用標簽名稱，可以這樣進行：

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

Answer 5

jQuery將使此過程變得更容易。 你可以做類似的事情

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

Answer 6

抱歉，如果這很明顯，但是...一般來說，如果您要嘗試訪問元素，請在開始時為其提供ID，這將為您節省大量時間。

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

那當然

document.getElementById('ug0').innerHTML;