HTML and CSS Reference
In-Depth Information
LISTING 1-2
HTML source to work with the DOM
<body>
<div id="outerDiv">
<p class='mainPara'>Main Paragraph</p>
<ul>
<li>First List Item</li>
<li>Second List Item</li>
<li>Third List Item</li>
<li>Fourth List Item</li>
</ul>
<div id="innerDiv">
<p class='subPara' id='P1'>Paragraph 1</p>
<p class='subPara' id='P2'>Paragraph 2</p>
<p class='subPara' id='P3'>Paragraph 3</p>
<p class='subPara' id='P4'>Paragraph 4</p>
</div>
<table>
<tr>
<td>Row 1
</td>
</tr>
<tr>
<td>Row 2
</td>
</tr>
<tr>
<td>Row 3
</td>
</tr>
<tr>
<td>Row 4
</td>
</tr>
<tr>
<td>Row 5
</td>
</tr>
</table>
<input type="text"/><input type="submit" value="Submit"/>
</div>
</body>
This sample page is very simple, but it serves the purpose of demonstrating various ways
to access elements through code. To demonstrate this functionality, you need an entry point.
Add the following script block to the head section of the webpage:
<script>
window.onload = function () {
...
}
</script>
This should look familiar, but if it doesn't, you'll review the concepts later. For now, this
code essentially tells the runtime to run your code after the window finishes loading. You can
Search WWH ::
Custom Search