4.7. Frequently Asked Questions? | Q: | Do I need to reference the ajax.js file we've been using if I want to write JavaScript code that uses the DOM? | | A: | Nope. In fact, Ajax and the Document Object Model have nothing to do with each other, other than the fact that most Ajax applications happen to use the DOM. But there are lots of non-Ajax apps that have been using the DOM for years. If you've got a web browser that has JavaScript enabled, then you've got all that you need to start changing web pages using the DOM. | | Q: | And what about text-utils.js ? That file had a bunch of DOM utilities in it, right? Do I need that? | | A: | You used text-utils.js in Chapter 1, and then again in Chapter 3. It did contain several utility functions, and those functions used the DOM to make changing a web page fairly easy. In this chapter, though, we're going to dig deeper into the DOM, and learn how to work with it directly, rather than using some preassembled JavaScript. In fact, by the time you're done with this chapter, you'll know exactly what's going on in text-utils.js, and be able to make improvements and add additional utility functions for yourself. Appendix 2 has all the code from text-utils.js listed, along with several notes on how each of the utility functions in that file works. Once you've finished this chapter, you may want to check out Appendix 2... you'll know enough DOM to understand everything in the text-utils.js utility file by then. | | Q: | It looks like you called some parts of that markup "children." So an element can have "child elements "? | | A: | Yes. When the browser organizes your HTML into a tree, it begins with the root element. Each piece of content under that root is a branch, but you can also call those bits of content "child elements." In fact, you can use family terms like this going towards the root of the tree, too: the <head> element can be called the "parent" of the <title> element. Keep this in mind; we'll talk a lot more about parents and children in the rest of this chapter. | | Q: | It seems like you're using a whole bunch of new terms, like root and branch and child. How am I supposed to keep up with all of this? | | A: | It's not as hard as it seems. Just keep the idea of a tree in mind, and you shouldn't have any trouble. You've been using terms like root and branch and leaf for years. As for parent and child, anytime you're moving towards the root of the tree, you're moving towards a parent; anytime you move away from the root, you're moving towards a child. The only term that may be totally new to you is "node ", and we're just about to take a look at that... |
Write Your Own: Web Dictionary What good is looking at a bunch of definitions? This is Head Rush, and we want your brain working, not just your eyes. Below are several entries from a Web Dictionary, with some of the words in each definition removed. Your job is to try and complete each entry by filling in the blanks. node. Any _____ piece of markup, such as an element or text. The <a> element is an _______ node, while the "Head First HTML with CSS & XHTML" text is a ______ node. "Head First HTML with CSS & XHTML" a leaf. A piece of markup that has ________, such as an element with __ text content, like <img>, or textual data. Also known as: leaf node "Webville Tree Farm" p h1 P child. Any piece of markup that is _________ by another piece of markup. The text "Head First HTML with CSS & XHTML" is the ______ of the <a> element, and the <p>s in this markup are ________ of the <body> element.. Also known as: child node, children body branch. A branch is a _______ of elements and content. So the "body" branch is all the elements and text ______ the <body> element in the tree. parent. Any piece of markup that contains _________. <h1> is the parent of the text "Webville Tree Farm", and <html> is the parent of the ________ element. Also known as: parent element,. parent node html root element The element in a ________ that ______ all other elements. In HTML, the root element is always ________. no children child children under contained other markup text collection single document element contains <body> no <html>
Here are the words you should use to fill in the blanks. |
Write Your Own: Web Dictionary Solutions Here's the Web Dictionary with all the blanks filled in. It's OK if you used different words than in our version of the dictionary... just make sure you understand what each entry means, and that you are comfortable with how these pieces work together to form a tree of markup for a web page. node. Any single piece of markup, such as an element or text. The <a> element is an element node, while the "Head First HTML with CSS & XHTML" text is a text node. "Head First HTML with CSS & XHTML" a leaf. A piece of markup that has no children, such as an element with no text content, like <img>, or textual data. Also known as: leaf node "Webville Tree Farm" p h1 P child. Any piece of markup that is contained by another piece of markup. The text "Head First HTML with CSS & XHTML" is the child of the <a> element, and the <p>s in this markup are children of the <body> element.. Also known as: child node, children body branch. A branch is a collection of elements and content. So the "body" branch is all the elements and text under the <body> element in the tree. parent. Any piece of markup that contains other markup. <h1> is the parent of the text "Webville Tree Farm", and <html> is the parent of the <body> element. Also known as: parent element, parent node. html root element. The element in a document that contains all other elements. In HTML, the root element is always <html>.
|
4.7.1. Tree Magnets Now that you've got a handy Web Dictionary, it's time to put it to use. Below is the tree view of the HTML we looked at a few pages back. Your job is to take the different tree magnets from the bottom of the page, and attach them to the right parts of this tree. Be careful: some parts of the tree may have more than one magnet that could apply, and you won't need to use all the magnets. Good luck! "Head First HTML with CSS & XHTML" "Welcome to the Webville Tree Farm. We're still learning about CSS, so pardon out plain site. We just bought " a ", though, so expect great things soon." "Webville Tree Farm" p "You can visit us at the corner of Binary Blvd. and DOM Drive. Come check us out today!" h1 p body "Webville Tree Farm" title head html root element root element root element root element leaf leaf leaf leaf leaf leaf parent parent parent parent parent parent parent node node node node node node node child child child child child child child branch branch branch branch branch
Back to that tree version of the HTML... why did the welcome text in the <p> element get broken into more than one text node? Wouldn't it be easier to use just one node, and not two or three? Flip back to page 213 to see what Jenny's talking about. Order matters to the web browser. When the browser gets your HTML and represents it as a tree, the browser has to keep up with the order of text and elements in the markup. Otherwise, paragraphs could appear in the wrong order on the page, and the wrong words might be bolded or underlined. Let's take another look at the markup for the welcome text: Here's the <p> element that is the parent of all this content.<p> Welcome to the Webville Tree Farm. We'reThere's quite a bit of text within the <p>... still learning about CSS, so pardon our plain site. We just bought <a href= "http://www.headfirstlabs.com/books/hfhtml/">...as well as an <a> element that creates a link. Head First HTML with CSS & The <a> element has some text of its own, also.XHTML</a>, though, so expect great things soon. <p>
The tree has to match the HTML exactly, or people looking at the web page could get really confused. This tree, for example... that <p> has to know exactly where its child <a> element goes, and how the text fits around that. In this case, the easiest way for the browser to keep up with the ordering of the text and link in the HTML is to put the first part of the text in one node under the <p> element, and then add the <a> element node, and then add one more text node, with all the text after the <a>. When you look at the tree view of an HTML page, you usually just read it from left to right, like this: Yes, this is a mouthful. Read it, check out the diagram below, and then read it again. Don't worry... you'll get it! This text is a child of the <a> element, not the <p> element. "Head First HTML with CSS & XHTML" The first part of text, up to the <a> element, is the first child of the <p> element. "Welcome to the Webville Tree Farm. We're still learning about CSS, so pardon out plain site. We just bought " There's even a space at the end of this text, since there's a space before the <a> element in the markup. a ", though, so expect great things soon." This last bit of text comes after the <a> element, so it's a separate text node under the <p>. It starts with the comma right after the text in the <a>. p The <p> element has three children: two text nodes and one element node.
Just Do It It's time to load markup trees into your brain. Below is a simple HTML document. Your job is to figure out how a web browser organizes this HTML into a tree structure. On the right is a tree, ready for you to fill in its branches and leaves. To get you started, we've provided spaces for each piece of markup; be sure you've filled each space with an element or text from the HTML markup before showing off your tree to anyone else! <html> <head> <title>Binary Tree Selection</title> </head> <body> <p>Below are two binary tree options:</p> <div> Our <em>depth-first</em> trees are great for folks that are far away. </div> <div> Our <em>breadth-first</em> trees are a favorite for nearby neighbors. </div> <p>You can view other products in the <a href="menu.html">Main Menu</a>.</p> </body> </html>
|
We've filled in several of the nodes to help you get started. "Our " "depth-first" em div "Below are two binary tree options:" a This one is pretty tricky. See if you can figure it out. *Hint: It's text, and it's short. p title html
We'll look at the answers to this exercise in just a few pages. |
