projektorius96/firstChild

## firstChild
<!DOCTYPE html>
<html>
<body>

<p><u>Example list</u>:</p>
<ul id="myList"><!-- Delete this firstChild text-comment node in order to get Absence of whitespace as HTML element presented in yellow color. Otherwise Absence of whitespace as HTML element is described as  undefined and Presence of whitespace as HTML element presented in red color p.s avoid ENTER in this example i.e manipulate only with comment area --><li id="demo1">Absence of whitespace</li><li id="demo2">Presence of whitespace</li></ul>

    <p><b>Click the button to get the HTML content of the list's first child node:</b><br> a) result in yellow color or "Absence of whitespace" is undefined + case b)<br> b) result in red color as "Presence of whitespace"</p>

<button onclick="myFunction()">Try it</button>

<p><strong>Note:</strong> Whitespace inside elements is considered as text, and text is considered as nodes.</p>

<p><b>If you add whitespace before the firstChild LI and parentNode UL id="myList" elements, the result will be "undefined".</b></p>

<script>
var list = document.getElementById("myList").firstChild.innerHTML;
function myFunction() {
document.getElementById("demo1").innerHTML = list;
    if (list !== undefined) {
    	document.getElementById("demo1").textContent = "List example: between first <li> element and its parentNode <ul> there is no whitespace, but more likely firstChild <li> element which is defined and rendered in browser (result in yellow color)";
    	document.getElementById("demo1").style.backgroundColor ="yellow";}
    else if (list == undefined) {
        document.getElementById("demo2").textContent =  "List example: between first <li> element and its parentNode <ul> there is a whitespace which is undefined. Whitespace itself considered as visible only inside text Editor but not in the browser, that's why its conceptually undefined and presented in red color";
document.getElementById("demo2").style.backgroundColor ="red";}
}
</script>

</body>
</html>

## firstElementChild
<!DOCTYPE html>
<html>
<body>

<p><u>Example list</u>:</p>
<ul id="myList"><li id="demo1">Absence of whitespace</li><li id="demo2">Presence of whitespace</li></ul>

    <p><b>Click the button to get the HTML content of the list's first child node:</b><br> a) result in yellow color or "Absence of whitespace" is undefined + case b)<br> b) result in red color as "Presence of whitespace"</p>

<button onclick="myFunction()">Try it</button>

<p><strong>Note:</strong> Whitespace inside elements is considered as text, and text is considered as nodes.</p>

<p><b>If you add whitespace before the firstChild LI and parentNode UL id="myList" elements, the result will be "undefined".</b></p>

<script>
var list = document.getElementById("myList").firstChild.innerHTML;
function myFunction() {
document.getElementById("demo1").innerHTML = list;
    if (list !== undefined) {
    	document.getElementById("demo1").textContent = "List example: between first <li> element and its parentNode <ul> there is no whitespace, but more likely firstChild <li> element which is defined and rendered in browser (result in yellow color)";
    	document.getElementById("demo1").style.backgroundColor ="yellow";}
    else if (list == undefined) {
        document.getElementById("demo2").textContent =  "List example: between first <li> element and its parentNode <ul> there is a whitespace which is undefined. Whitespace itself considered as visible only inside text Editor but not in the browser, that's why its conceptually undefined and presented in red color";
document.getElementById("demo2").style.backgroundColor ="red";}
}
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>

	<p><u>Example list</u>:</p>
	<ul id="myList"><!-- Delete this firstChild text-comment node in order to get Absence of whitespace as HTML element presented in yellow color. Otherwise Absence of whitespace as HTML element is described as undefined and Presence of whitespace as HTML element presented in red color p.s avoid ENTER in this example i.e manipulate only with comment area --><li id="demo1">Absence of whitespace</li><li id="demo2">Presence of whitespace</li></ul>

	<p><b>Click the button to get the HTML content of the list's first child node:</b><br> a) result in yellow color or "Absence of whitespace" is undefined + case b)<br> b) result in red color as "Presence of whitespace"</p>

	<button onclick="myFunction()">Try it</button>

	<p><strong>Note:</strong> Whitespace inside elements is considered as text, and text is considered as nodes.</p>

	<p><b>If you add whitespace before the firstChild LI and parentNode UL id="myList" elements, the result will be "undefined".</b></p>

	<script>
	var list = document.getElementById("myList").firstChild.innerHTML;
	function myFunction() {
	document.getElementById("demo1").innerHTML = list;
	if (list !== undefined) {
	document.getElementById("demo1").textContent = "List example: between first <li> element and its parentNode <ul> there is no whitespace, but more likely firstChild <li> element which is defined and rendered in browser (result in yellow color)";
	document.getElementById("demo1").style.backgroundColor ="yellow";}
	else if (list == undefined) {
	document.getElementById("demo2").textContent = "List example: between first <li> element and its parentNode <ul> there is a whitespace which is undefined. Whitespace itself considered as visible only inside text Editor but not in the browser, that's why its conceptually undefined and presented in red color";
	document.getElementById("demo2").style.backgroundColor ="red";}
	}
	</script>

	</body>
	</html>