Press Esc – it will open console right below the Elements tab.

Here are few tips to travel between the Elements tab and the console. Like: get a node and run some code to modify it, to see the result. Interaction with consoleĪs we work the DOM, we also may want to apply JavaScript to it. The best way to study them is to click around.

Event Listeners – to see event listeners attached to DOM elements (we’ll cover them in the next part of the tutorial).

Computed – to see CSS applied to the element by property: for each property we can see a rule that gives it (including CSS inheritance and such).

Almost everything can be edited in-place, including the dimensions/margins/paddings of the box below.

Styles – we can see CSS applied to the current element rule by rule, including built-in rules (gray).

To do so, open the web page elk.html, turn on the browser developer tools and switch to the Elements tab.Īt the right part of the tools there are the following subtabs: Actually, that’s what we use when developing. Just type in the document, and it will show up as a DOM at an instant.Īnother way to explore the DOM is to use the browser developer tools.

To see the DOM structure in real-time, try Live DOM Viewer. comments – sometimes we can put information there, it won’t be shown, but JS can read it from the DOM.element nodes – HTML-tags, the tree building blocks.In practice we usually work with 4 of them: The document object that represents the whole document is, formally, a DOM node as well. We are not going to touch that node, we even don’t draw it on diagrams, but it’s there. But there’s a rule – if something’s in HTML, then it also must be in the DOM tree.Įverything in HTML, even comments, becomes a part of the DOM.Įven the directive at the very beginning of HTML is also a DOM node. We may think – why is a comment added to the DOM? It doesn’t affect the visual representation in any way. We can see here a new tree node type – comment node, labeled as #comment, between two text nodes. In other cases everything’s straightforward – if there are spaces (just like any character) in the document, then they become text nodes in the DOM, and if we remove them, then there won’t be any. If we put something after, then that is automatically moved inside the body, at the end, as the HTML spec requires that all content must be inside.Spaces and newlines before are ignored for historical reasons.So, for instance, in the example above the tag contains some spaces before, and that text becomes a #text node (it contains a newline and some spaces only). They form text nodes and become a part of the DOM. Spaces and newlines are totally valid characters, like letters and digits. a newline: ↵ (in JavaScript known as ).Please note the special characters in text nodes: It may not have children and is always a leaf of the tree.įor instance, the tag has the text 'About elk'. The text inside elements forms text nodes, labelled as #text. Tags are element nodes (or just elements) and form the tree structure: is at the root, then and are its children, etc.

On the picture above, you can click on element nodes and their children will open/collapse.

Elk animal coloring page