Working with nodes and elements
Video: Working with nodes and elementsSo we might think about our web page content one way, but the DOM thinks about it in terms of nodes. Every web page we have, every document is made of nodes. However, it goes a little deeper than just this basic example I am showing here of one node per tag, because as we know, our HTML does have tags. Sure, it has got the body tag, it has got p tag, header tags, and so on, but we also have blocks of text. We have attributes, sometimes one attribute, sometimes several attributes as part of an element.
Viewers: in countries Watching now:
- Creating variables, functions, and loops
- Writing conditional code
- Sending messages to the console
- Working with different variable types and objects
- Creating and changing DOM objects
- Event handling
- Working with timers
- Building smarter forms
- Using regular expressions
Working with nodes and elements
So we might think about our web page content one way, but the DOM thinks about it in terms of nodes. Every web page we have, every document is made of nodes. However, it goes a little deeper than just this basic example I am showing here of one node per tag, because as we know, our HTML does have tags. Sure, it has got the body tag, it has got p tag, header tags, and so on, but we also have blocks of text. We have attributes, sometimes one attribute, sometimes several attributes as part of an element.
We can have comments and so on, and these are all regarded as different kinds of nodes in the DOM, and the reason for this is so we can get to them directly too. If I want to, I can ask, what is the text for the second paragraph? What's the source attribute of an image tag? So really, our diagram is a little bigger. If I had to display every single node here, I'd end up with quite a lot, because we have nodes that represent elements, attributes, texts, comments, and so on.
And officially, if you look at the DOM documentation, there are actually 12 node types in the DOM. But really, we're only interested in three of them: elements, attributes, and text. And here's an example. Let's say we have just a simple snippet of HTML here, an unordered list. It has got an id of optionList. It has got a three list items inside it. Well, the whole unordered list element from the top to the bottom is considered one node, an element node, but inside that it has another node that represents the attribute of id = "optionList", so it's a different kind of node, an attribute node.
But as we start to look deeper inside it, we realize that we've got three list item nodes. Those are also element nodes. And not only that, because the text in any element is actually considered a separate node, each of these li elements has a text node attached to it to describe the text inside them. So as far as the DOM is concerned, we can drill into any very specific piece, even of this simplest little piece of HTML. Now, the idea that the text node is actually separate from the element might sound nitpicking, but it leads to quite a common mistake, that when you have element nodes such as paragraphs, or list items, or H1 tags, they do not directly contain that text.
Officially speaking, according to the DOM, you have this text node that contains the text of a paragraph, or a text node that contains the text of a list item or of a heading. But having said that, we're typically interested in grabbing the element nodes first. That's the way most web developers think about an HTML page. It's made of elements, the tags that we have, our paragraphs, our anchor tags, our unordered lists, our headings. And the great thing is, once we have got any of those nodes, it's easy to work our way up and down the tree to get to any text node that might be below it.
And luckily, it's not hard to do. So next up we're going to write the code to grab one of these element nodes.