All of its HTML elements and CSS properties are then child objects and properties, as appropriate, linked together in one large hierarchy.
The W3C DOM standard is the model that we will describe here.
The general structure of the model can be seen with this simple HTML document and the following diagram:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>A Very Simple Document</title>
<style>....</style>
<script>....</script>
</head>
<body>
<h1>Simple Documents</h1>
<p>
The sad truth is that simple docs
<em>are not so simple</em>
after all.
</p>
<p>Blah, blah, blah, blah.</p>
</body>
</html>
Each of the items in a balloon above is a node in the document tree, and that includes individual stretches of text.
Each node is an object that has properties and methods, and many have descendent nodes as well.
So every object would, in full, have a name such as:
window.document.body
Any given web page will only have one window, document, and body, so these names are unique.
In fact, you can generally drop the
In fact, you can generally drop the
window. portion of it,
and begin all non-window references with just document., e.g.
document.write("some text")
If it has a
name attribute, and it is the first such element with a particular value, then it can always be referenced by that name, e.g.
<img name="amherst" src="ljamherst.jpg">
<script language="JavaScript">
document.amherst.src = "lpelham.jpg"
</script>
If there are more than one
name attribute with the same value,
then you can get an array of references to them with a function call:
<img name="amherst" src="ljamherst.jpg">
<form name="amherst"></form>
<script language="JavaScript">
document.getElementsByName("amherst")
</script>id attribute, it should have a unique value in the document, and a reference to it can be obtained with a different function call:<p id="jeffery">The Lord Jeffery Amherst, mascot of Amherst College.</p>
<script language="JavaScript">
document.getElementByID("jeffery") = "lpelham.jpg"
</script>