4.8. Frequently Asked Questions? | Q: | The ordering of the elements and text in the HTML matters, right? | | A: | Yes. So for the <html> element, the first child is <head>, and the second is <body> . If these were reversed, the tree would be different, and as a result, the page would be displayed differently in your web browser. So always be sure you're keeping things in the correct order when you're representing HTML as a tree like this. | | Q: | You keep talking about elements and text. Are those two different things, or is text also a type of element? | | A: | Elements are the names surrounded in brackets, like <title> or <p>. Text is the actual characters within elements, like "Webville Tree Farm" or "directions". There are also attributes, like or . All of these are considered nodes, but elements, attributes, and text are all different kinds of nodes. So you could have a text node, but you would never have a text element. | | Q: | What about attributes? You said that there are attribute nodes, but that they really aren't "children" of the element they appear on, are they? | | A: | Attributes are a bit of a special case. If you have markup like <div >, it's really not correct to say that the id attribute is a child of the <div> element. Instead, the browser stores the attributes of an element in a special list for each element. So there are attribute nodes, but they're not very easy to represent on a tree. When we look at the DOM in a few pages, you'll see that it handles attributes in a special list for each element. | | Q: | Don't lots of older HTML pages leave off closing tags, like </p>? How does a web browser handle pages with markup like that? | | A: | Boy, you're really on top of your HTML, aren't you? You're right, lots of older HTML pages are pretty messy, and have elements that aren't closed or nested properly. In these cases, web browsers do the best they can in creating a tree structure. Usually, the browser gets it right, but if you ever see a page that doesn't appear quite the way you expected, it might be because the browser guessed wrong in creating the tree structure for that page's HTML. That's just one more reason to be careful when writing HTML. | | Q: | Will different web browsers all represent a page in the same way? | | A: | If you're writing standard HTMLand even better, validating your HTMLdifferent browsers will almost always come up with the same tree for an HTML page. This is one of the things that HTML 4.01 and XHTML 1.0 and 1.1 have provided: a standard view of HTML that browsers can rely on. If you start to get sloppy, though, and forget to close an element, or use older, outdated HTML, then web browsers have to do the best they can to represent your markup. As a result, you'll start to see differences in the tree between different browsers. But as long as you write standard, valid HTML pages, this shouldn't be a problem. |
See? If you want to understand web pages, you have to master trees. OK, I get all this business about a web browser seeing my pages as trees... but how does that really help me? I need to change a web page, not grow one. Mike: Often, the root must be watered carefully before one can enjoy the leaf. Jenny: What the heck does that mean? Mike: Honestly, I have no idea. I read it somewhere, and thought that it might impress you. Anyway... since web browsers view your pages as trees, you need to be able to write code that works on those trees. And that's where the Document Object Model comes in. Jenny: OK, now we're talking. That's what I came here to find out about... the Document Object Model. There's a group called the World Wide Web Consortium (most people call them the W3C for short) that publishes the specifications and standards for the DOM. Just a bit of trivia for you standards gurus out there... Mike: The Document Object Modelusually called the DOM for shortis how you can work on the tree that the browser creates from your web page. You can manipulate the DOM with JavaScript, and update the browser's tree. And once you update the tree, the page itself will automatically be changed by the browser, without any page reloading or refreshing. |
