JS - element properties - firstChild

example list:

• Coffee
• Tea

The HTML content of the list's first child node is:

Whitespace between elements is considered text nodes. If there is a whitespace before the first "li" element, the result will be "undefined".

Click the button to get the text of the first child node of the select element.

try it

Select AudiBMWSaabVolvo

code:

                <div>
                    <p>example list:</p>
                    <ul id="myList"><li>Coffee</li><li>Tea</li></ul>
                    <p>The HTML content of the list's first child node is:</p>
                    <p id="prop"></p>
                    <p style="font-size:0.9vw;">Whitespace between elements is considered text nodes.
                    If there is a whitespace before the first "li" element, the result will be "undefined".</p>
                    <p style="font-size:0.9vw;">Click the button to get the text of the first child node 
                    of the select element.</p>
                    <p><button onclick="firstFunction()">try it</button></p>
                    <label for="mySelect">Select</label>
                    <select id="mySelect" size="4"><option>Audi</option><option>BMW</option>
                    <option>Saab</option><option>Volvo</option></select>
                    <p id="prop1"></p>
                </div>
                <script>
                    let text = document.getElementById("myList").firstChild.innerHTML;
                    document.getElementById("prop").innerHTML = text;
                    function firstFunction() {
                        let text = document.getElementById("mySelect").firstChild.text;
                        document.getElementById("prop1").innerHTML = text;
                    }
                </script>
            

The node name of "DIV"'s first child is:

Whitespace between elements is considered text nodes.

The first, third and fifth child of "DIV" is a #text node.

            <div>
                <div id="DIV">
    
                    <p>A paragraph (Second child)</p>
    
                    <p>A paragraph (Fourth child)</p>
    
                </div>
                <p>The node name of "DIV"'s first child is:</p>
                <p id="prop2"></p>
                
                    <p>Whitespace between elements is considered text nodes.</p>
                <p>The first, third and fifth child of "DIV" is a #text node.</p>
    
            </div>
            <script>
                let text1 = document.getElementById("DIV").firstChild.nodeName;
                document.getElementById("prop2").innerHTML = text1; 
            </script>
        

The node name of "DIV1"'s first child is:

            <div>
                <div id="DIV1"><p>A paragraph (First child)</p><p>A paragraph (Second child)</p></div>
                <p>The node name of "DIV1"'s first child is:</p>
                <p id="prop3"></p>
            </div>
            <script>
                let text2 = document.getElementById("DIV1").firstChild.nodeName;
                document.getElementById("prop3").innerHTML = text2; 
            </script>