Possible Duplicate:
Access DIV element from JavaScript
I have a HTML code like :
<div id="headerlist" >
<h3> Enrollment Efficiency</h3>
</div>
I have to access element Enrollment Efficiency
I am trying with :
var headerlist = document.getElementsById('headerlist');
alert("the value of headerlist is "+ headerlist.firstChild);
But its not working.
Just a typo. It is getElementById() (no plural s there).
var headerlist = document.getElementById('headerlist');
An id should be unique throughout the document, hence only one element should be returned by this functions. If there could be more than one element matched, like with getElementsByName(), there is a plural s.
EDIT
As mentioned by @Cerbrus: The firstChild attribute, just points to first child element, and not to its contents.
To remarks here:
The firstChild in your example is just a whitespace text node. if you want the next non-whitespace node use firstElementChild (supported in most modern browswers).
To display the contents, use something like innerHTML or textContent.
firstChild isn't going to get the desired result, like I did.firstElementChild is not widely supported yet. Sorry for nagging :P You still have my +1
Function getElementByid is singular, not plural.
getElementsByClassName which is pluralLike others have said, remove the s from getElementsById --> getElementById.
Also, firstChild will return the textNode seperating the div and h3. Try this:
function getFirstChild(element) {
do {
element = element.firstChild;
} while (element && element.firstChild!== 1);
return element;
}
// Usage: getFirstChild(headerlist);
Resulting in:
var headerlist = document.getElementById('headerlist');
console.log("the value of headerlist is ", getFirstChild(headerlist).innerHTML);
Probably you want to access the data of inner HTML elements. So here is your code how you can achieve it
you can access all child of parent element in following manner.
<!DOCTYPE html>
<html>
<body>
<div id="amu">
<div id="a"> aa </div>
<h1>aaaa </h1>
<h3> bbbb </h3>
</div>
<div onclick="check()"> click Me </div>
</body>
<script>
function check() {
var childNodeArray = document.getElementById('amu').getElementsByTagName('*');
alert(childNodeArray.length);
for (i=0; i < childNodeArray.length; i++)
alert(childNodeArray[i].innerHTML);
}
</script>
</html>
=/= good. At least, not always. Let people get the basics of JS first, before tossing them a library. Especially if they don't ask for jQuery.