The Node interface

- [Instructor] Have you ever wondered how your lovingly crafted HTML source code is transformed from a bunch of characters in a file to a fully rendered webpage in your browser? The truth is it's not a direct route. before the browser can figure out where and how to display everything on your webpage, it needs to construct a document tree. This process of converting your HTML to this object tree or document object model is called parsing. Every tag, fragment of text, every comma, is parsed by the browser and stored and the resulting document tree in a node. These nodes are arranged in a tree through the use of references. The node interface defines common attributes that refer from a parent node to its child nodes from a node to its next sibling and from child nodes back to their parent. These five core attributes allow your code to navigate from any node in your document to almost any other node. By following the parent node references, you can get to the top level document node. By following the next sibling references, you can find all other nodes located at the same level of the document hierarchy. By following first child, you can navigate to nodes farther down the tree and using the owner document reference. You can get to the top level document object from any node in the tree, but why the almost above why can't we follow references from any node to any other node of the document? Because even though the node interface is the common base class for all the objects and a dom document, not all those objects are the same. In fact, although the dom level three core standard defines 12 node types and practice, these five types are the only ones you'll encounter when doing normal things in normal HTML documents. The rest of the node types are mostly used in XML document processing. Four of these types of part of the primary dom tree, but attribute nodes are special. And the only way we can access them through the node interface is by using the attributes property. Now beside the node type, there are a few other useful node properties that are worth understanding. The node name attribute returns to descriptive string for the node based on its type. This is super handy when debugging dom code another useful property is the node value property for things like element attributes, comments, and texts, it provides an easy way to get the contents of the node as a string, but for more complex node types like elements of documents, it simply returns null. Ana although we've covered the most important parts of the node interface, there are other useful features that you can discover for yourself. Take a look at the W3C recommendation. It's not very long and you might be surprised what you find.