javascript - using document.getElementById - Stack Overflow

admin管理员组

文章数量:1025278

I am having a heck of a time getting some data from a dom I want.

I have some html here:

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

I know if I say

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

I can get "something" back (though this is all in a portal so its incredibly difficult to put java script break points into this). So I am not sure how I can go further to get the string "I WANT THIS TEXT HERE " ?

I think I have to walk through childNodes but not sure how or what exactly I am getting back so I can get at that string, also getElementById didn't work for the class= would that be getElementByClass ?

New to this DOM stuff.

I am having a heck of a time getting some data from a dom I want.

I have some html here:

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

I know if I say

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

I can get "something" back (though this is all in a portal so its incredibly difficult to put java script break points into this). So I am not sure how I can go further to get the string "I WANT THIS TEXT HERE " ?

I think I have to walk through childNodes but not sure how or what exactly I am getting back so I can get at that string, also getElementById didn't work for the class= would that be getElementByClass ?

New to this DOM stuff.

• javascript
• html
• dom

Share Improve this question Follow asked Feb 27, 2013 at 18:30 CodejoyCodejoy 3,8361414 gold badges6161 silver badges104104 bronze badges 2

• can you use jquery? or are you attempting to learn the dom? – Daniel A. White Commented Feb 27, 2013 at 18:31
• ....that's why jQuery was invented. If you want to use jQuery, it is dead simple. The element is: $('#userMenu li').eq(0) – Diodeus - James MacFarlane Commented Feb 27, 2013 at 18:32

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

You can use this :

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

See MDN's documentation of querySelectorAll.

Note that this won't work on IE7. To do this kind of thing more easily in a cross-browser fashion, you can use one of the popular DOM manipulation libraries like jQuery.

---

If your HTML is different from the text you want (i.e. you have markups for example), you might use this to get the interpreted text :

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

Note that here again libraries help you deal with those inpatibilities between browsers. Jquery would let you do

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

Try this...

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

Using plain javascript and making your code more robust if the order of elements changes a little bit, you could use both the id and the class to get it like this:

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

or using tag names, it could be done like this:

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

You can scan through like this

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 would make this easier. You could do something like

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

Sorry if this is obvious, but... generally speaking, if you're going to be trying to access elements, give them IDs at the outset, it will save you lots of time.

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

Then of course

document.getElementById('ug0').innerHTML; 

I am having a heck of a time getting some data from a dom I want.

I have some html here:

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

I know if I say

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

I can get "something" back (though this is all in a portal so its incredibly difficult to put java script break points into this). So I am not sure how I can go further to get the string "I WANT THIS TEXT HERE " ?

I think I have to walk through childNodes but not sure how or what exactly I am getting back so I can get at that string, also getElementById didn't work for the class= would that be getElementByClass ?

New to this DOM stuff.

I am having a heck of a time getting some data from a dom I want.

I have some html here:

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

I know if I say

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

I can get "something" back (though this is all in a portal so its incredibly difficult to put java script break points into this). So I am not sure how I can go further to get the string "I WANT THIS TEXT HERE " ?

I think I have to walk through childNodes but not sure how or what exactly I am getting back so I can get at that string, also getElementById didn't work for the class= would that be getElementByClass ?

New to this DOM stuff.

• javascript
• html
• dom

Share Improve this question Follow asked Feb 27, 2013 at 18:30 CodejoyCodejoy 3,8361414 gold badges6161 silver badges104104 bronze badges 2

• can you use jquery? or are you attempting to learn the dom? – Daniel A. White Commented Feb 27, 2013 at 18:31
• ....that's why jQuery was invented. If you want to use jQuery, it is dead simple. The element is: $('#userMenu li').eq(0) – Diodeus - James MacFarlane Commented Feb 27, 2013 at 18:32

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

You can use this :

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

See MDN's documentation of querySelectorAll.

Note that this won't work on IE7. To do this kind of thing more easily in a cross-browser fashion, you can use one of the popular DOM manipulation libraries like jQuery.

---

If your HTML is different from the text you want (i.e. you have markups for example), you might use this to get the interpreted text :

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

Note that here again libraries help you deal with those inpatibilities between browsers. Jquery would let you do

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

Try this...

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

Using plain javascript and making your code more robust if the order of elements changes a little bit, you could use both the id and the class to get it like this:

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

or using tag names, it could be done like this:

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

You can scan through like this

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 would make this easier. You could do something like

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

Sorry if this is obvious, but... generally speaking, if you're going to be trying to access elements, give them IDs at the outset, it will save you lots of time.

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

Then of course

document.getElementById('ug0').innerHTML; 

本文标签： javascriptusing documentgetElementByIdStack Overflow