Question

just reading the W3schools HTML DOM tutorial. There’s a paragraph that makes no sense to me.

The bit that doesn’t make sense to me is:

A common error in DOM processing is to expect an element node to contain text.

However, the text of an element node is stored in a text node.

In this example: <title>DOM Tutorial</title>, the element node <title>, holds a text node with the value “DOM Tutorial”.

“DOM Tutorial” is not the value of the <title> element!

However, in the HTML DOM the value of the text node can be accessed by the innerHTML property.

Ok, what? That sounds exactly the opposite of what I though.
Thanks

Answer 1

When a markup document is converted into a DOM, you end up with a tree of nodes.

There are several types of nodes, including elements, text and comments.

Nodes have properties. e.g. an HTMLInputNode will have a value property that maps on to its current value. Any HTMLElementNode will have a style property through which the CSS properties defined via the style attribute can be accessed. Likewise, it will also have a className property that maps onto the class attribute.

When you have <title>DOM Tutorial</title> you have a HTMLTitleNode containing a TextNode. To get the text DOM Tutorial you should access the TextNode and then read its data property.

myTitle.firstChild.data

And then W3Schools muddies the water by mentioning innerHTML.

innerHTML is a property (although not a standard DOM property (I think HTML 5 is in the process of defining it)) of HTMLElementNodes which gives you a serialisation of the HTML contents of an element (but not the element itself).

Since there is only a TextNode inside a title element, you end up with plain text there.