Jump to content
Larry Ullman's Book Forums

Document Object Model


Recommended Posts

Hi,

 

I started reading the chapter about Document Object Model, and I have a few beginner questions:

 

1. Quote from book:

 

The root node, document in a Web page, has no parent and only one child: html.

 

Isn't HTML element the root node?

 

pic_htmltree.gif

 

 

 

2. Quote from book:

 

The nodeType property will be a number:

  • 1 for an HTML element
  • 2 for text
  • 8 for comments
  • 9 for the document
  • 10 for the HTML element

 

But on http://www.w3schools.com/jsref/prop_node_nodetype.asp and https://developer.mozilla.org/en-US/docs/Web/API/Node.nodeType this is different:

 

24vl0ug.png

 

Also, what is the difference between "1 for an HTML element" and  "10 for the HTML element"? I guess that's a mistake.

 

Thank you in advance!

Link to comment
Share on other sites

To answer your questions:

 

1) The html element is the root node of an HTML document, but not the root element of the DOM, which is a different thing. The DOM is an API that allows you to search through and manipulate the structure of the current HTML document. The DOM requires an object above the root node so that you can access the root node (the html element) in the actual HTML document.

 

Edit: The document object is necessary to allow you to access both the root node and the doctype.

 

2) Sounds to me like the information in Larry's book is wrong. I would trust the info you see on all the other sites since they are all consistent and reliable. Also, because Larry's statement "10 for the HTML element" is incorrect, I wouldn't worry about the meaning, but basically, 1 is a standard HTML element (e.g., div, img, a, li, etc.), and 10 is the doctype (or DTD, for short) of the HTML document.

 

That make sense?

  • Upvote 1
Link to comment
Share on other sites

To answer your questions:

 

1) The html element is the root node of an HTML document, but not the root element of the DOM, which is a different thing. The DOM is an API that allows you to search through and manipulate the structure of the current HTML document. The DOM requires an object above the root node so that you can access the root node (the html element) in the actual HTML document.

 

2) Sounds to me like the information in Larry's book is wrong. I would trust the info you see on all the other sites since they are all consistent and reliable. Also, because Larry's statement "10 for the HTML element" is incorrect, I wouldn't worry about the meaning, but basically, 1 is a standard HTML element (e.g., div, img, a, li, etc.), and 10 is the doctype (or DTD, for short) of the HTML document.

 

That make sense?

 

Yes, thank you very much HartleySan.  So, the object above the root node is document object.

 

Let's look at this paragraph:

<p>This is some text and if you click <a href="#">here</a>, something will happen.<br> This is another text.</p>

1. This paragraph has has three children (text node, A node and BR node), right?

 

2. The whole text is treated as one child, although there is some text before <a></a> element, some text is between <a></a> and <br> elements, and some text is after <br> element?

 

3. The only difference between childNodes property and children property is that children property excludes the TEXT nodes? And that's all? :)

Link to comment
Share on other sites

To answer both questions, no, the p element has five children. The text is divided into three nodes, as per the a and br nodes within the p element.

To confirm this, execute the following lines of code one at a time from the Chrome (or whatever browser) console:

 

var p = document.createElement('p');

p.innerHTML = 'This is some text and if you click <a href="#">here</a>, something will happen.<br> This is another text.';

p.childNodes.length

p.childNodes

 

Also, I hadn't heard about the children property until you mentioned it, but having looked into it a bit more, the children property is a DOM4 property, so browser support is going to be pretty limited at this point, thus I wouldn't advise using the children property to begin with.

  • Upvote 1
Link to comment
Share on other sites

Sorry for the late reply - thank you very much HartleySan!

 

And what about attributes? For now, in the book I did not find anything, only that are treated as nodes... (also, I found something here). But, if all HTML attributes are attribute nodes - why in the previous example (with the number of children of paragraph) we didn't count attributes nodes? Or, there is an exception in the case of attributes nodes?

Link to comment
Share on other sites

I wouldn't worry about attribute nodes too much, as that part of the DOM API is pretty much deprecated at this point.

 

As for why attribute nodes are not counted as children though, I guess the best explanation I can give is that attribute nodes are considered to be part of an element node, as opposed to children of an element node.

 

And if you think about the structure of a typical HTML document, I suppose that more or less makes sense, right?

  • Upvote 1
Link to comment
Share on other sites

 Share

×
×
  • Create New...