Was this page helpful?
Your feedback about this content is important. Let us know what you think.
Additional feedback?
1500 characters remaining
firstElementChild
Collapse the table of content
Expand the table of content

firstElementChild property

Retrieves a reference to the first child element, or NULL if there are no child elements.

Internet Explorer 9

 

Syntax

HRESULT value = object.get_firstElementChild(IHTMLElement** p);

Property values

Type: Object

A reference to the first child element.

Standards information

Examples

This example shows how to get the content of a list using firstElementSibling, nextElementSibling, previousElementSibling, and lastElementSibling.


 <!DOCTYPE html>
<html>
<head>
<title>IElementTraversal Example</title>
    <script>
        function GetListItems () {
            var list = document.getElementById ("girls");       // find our list 
            var results = document.getElementById("results");   // get our results line element
            var oChild = list.lastElementChild;                 // start with the last item in list
            while (oChild) {                                    // get and display each item in list
               results.innerHTML += "<br/>" + oChild.innerHTML;  
                oChild = oChild.previousElementSibling;         // get previous element in list
                }
        }        
        function GetListItems2 () {
            var list = document.getElementById ("girls");       // find our list
            var results = document.getElementById("results");   // get our results line element
            var oChild = list.firstElementChild;                // start with the first item in list 
            while (oChild) {                                    // get and display each item in list 
                results.innerHTML += "<br />" + oChild.innerHTML;   
                oChild = oChild.nextElementSibling;             // get next element in list 
                }
        }
        function refresh()                 
           {
             window.location.reload( false );           //reload our page
           }
    </script>
</head>
<body>
    <ol id="girls">
        <li>Sugar</li>
        <li>Spice</li>
        <li>Everything nice</li>
    </ol>
    <p id="results">Girls have: </p>
    <p>
    <button onclick="GetListItems ();">Get list backwards</button>
    </p>
   <p>
    <button onclick="GetListItems2 ();">Get list forwards</button>
    </p>
    <p>
      <input type="button" value="Refresh page" onclick="refresh()"   />   
    </p>  
</body>
</html>

 

 

Community Additions

ADD
Show:
© 2015 Microsoft