<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Triathlon DOM</title>
</head>
<body>
<header>
<h1 id="title">Triathlon</h1>
</header>
<section id="sports">
<p class="swim">Swim</p>
<p id="bike">Bike</p>
<p>Run</p>
</section>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Triathlon DOM</title>
</head>
<body>
<header>
<h1 id="title">Triathlon</h1>
</header>
<section id="sports">
<p class="swim">Swim</p>
<p id="bike">Bike</p>
<p>Run</p>
</section>
</body>
</html>
This Figure shows what this web page would look like as a node tree diagram.
 |
| Our web page shown as a node tree |
This is a Simplified View
This is a slightly simplified diagram as the DOM also stores any whitespace that is in the HTML document as text nodes.The best way to follow along with the examples in this chapter is to use the console built into the web browser (we discussed how to use this in Chapter 1). The screenshot in Figure below shows the page with the console open.
 |
| Using the console |
0 Response to "An Example Web Page"
Post a Comment