Line break and firstChild

programming
1

Hello:
I am still a beginner learning JavaScript and find a few problems trying some code:
First the use of “\n” which I expect to cause a line break. Example:

    var name = "Peter";
    var nextName = "John";
   
    document.writeln("Hello, " + name + "\n");
    document.writeln("Hello again, " + nextName + "!");

gives:
Hello, Peter Hello again, John!
and not the line break I anticipated.

Second: Use of firstChild:
Note: I entered a HTML description showing a body tag, with an h1 tag and element below at first.
(Unfortunately “What’s happening?” showed up when I entered the actual HTML, and replaced it, so I am now editing my message and removed the actual HTML code. I presume this HTML code triggered the “What’s happening?”)
Anyway, here is the JavaScript:

var bodyElement = document.body;

        var childElement = bodyElement.children[0];
        alert(childElement.tagName);

The result shows as ‘H1’ as expected.
If I replace the .children[0] by .firstChild:
var childElement = bodyElement.firstChild;
The result shows as ‘undefined’

Where did I go wrong?
I have Windows 8.1 and tested it on Chrome and Explorer.
Thanks so much!
Johan

2

Hey Johan,

For #1, the script is working as expected and a new line is being added. The only problem is that HTML doesn’t render new line characters in the source code (which is what document.writeln is writing) on the screen. If you want to see a new line, you want to use a <br> tag or wrap text in a block element like <p> which spaces out text blocks. If you look at the generated code in that sample (most browsers should let you do this using right-click > inspect) you should be able to see your \n there.

<body>
Hello, Peter

Hello again, John!
</body>

For #2, the problem is that there’s a difference between elements and nodes in the DOM. Elements are tags, or anything that is wrapped in < and >. Nodes are elements and everything else, including text that’s not in tags. Consider the nodes in this example <div>:

<div>
    Hello,
    <b>world</b>
    !
</div>

Here there are 3 child nodes, the text node “Hello,” (not including the white space), the bold <b> element containing “world” and another text node for the “!”. Of these child nodes, there’s only one element child, the bold element.

In the JavaScript DOM API this distinction is made and you can target either. children refers to elements and childNodes refers to all children (nodes). Similarly, firstChild targets child nodes while firstElementChild targets elements. First you used children which is (correctly) getting the first element child and reporting its tagName. However following that you;re using firstChild which is picking up the first child node which is not an element, but rather a text node, which, not being an element does not have a tagName, so it comes back undefined.

Granted, these have odd names and it can be confusing. I think the problem is largely simply from the fact that some of these APIs came out before the others where the naming was already a little confuddled and having functional parity just meant it had to be a little weird like this (like why isn’t it children for nodes and elementChildren for elements?).

1 Like