Professional Documents
Culture Documents
What Is The DOM?
What Is The DOM?
The DOM defines a standard for accessing documents like HTML and XML:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that
allows programs and
scripts to dynamically access and update the content, structure, and style of a document."
The DOM defines the objects and properties of all document elements, and
the methods(interface) to access them.
The HTML DOM defines the objects and properties of all HTML elements, and
the methods(interface) to access them.
In other words: The HTML DOM is a standard for how to get, change, add, or delete
HTML elements.
DOM Nodes
According to the DOM, everything in an HTML document is a node.
The root node in the HTML above is <html>. All other nodes in the document are contained
within <html>.
The <html> node has two child nodes; <head> and <body>.
The <head> node holds a <title> node. The <body> node holds a <h1> and <p> node.
Properties and methods define the programming interface of the HTML DOM.
Programming Interface
In the DOM, HTML documents consist of a set of node objects. The nodes can be accessed
with JavaScript or other programming languages. In this tutorial we will use JavaScript.
The programming interface of the DOM is defined by standard properties and methods.
Properties are often referred to as something that is (i.e. the name of a node).
Methods are often referred to as something that is done (i.e. remove a node).
Example
The following code to gets the innerHTML (text) from the <p> element with id="intro":
Example
<html>
<body>
<script type="text/javascript">
txt=document.getElementById("intro").innerHTML;
document.write("<p>The text from the intro paragraph: " + txt + "</p>");
</script>
</body>
</html>
Example
<html>
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write("<p>The text from the intro paragraph: " + txt + "</p>");
</script>
</body>
</html>
In the example above, getElementById is a method, while childNodes and nodeValue are
properties.
The nodeName, nodeValue, and nodeType properties contain information about nodes.
Node Properties
In the HTML DOM, each node is an object.
Objects have methods and properties that can be accessed and manipulated by JavaScript.
Three important node properties are:
• nodeName
• nodeValue
• nodeType
<html>
<body>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
<html>
<body>
Events
Every element on a web page has certain events which can trigger JavaScript functions. For
example, we can use the onClick event of a button element to indicate that a function will
run when a user clicks on the button. We define the events in the HTML elements.
Examples of events:
• A mouse click
• A web page or an image loading
• Mousing over a hot spot on the web page
• Selecting an input box in an HTML form
• Submitting an HTML form
• A keystroke
Note: Events are normally used in combination with functions, and the function will not be
executed before the event occurs!
Document Object
Each HTML document loaded into a browser window becomes a Document object.
The Document object provides access to all HTML elements in a page, from within a script.
Tip: The Document object is also part of the Window object, and can be accessed through
the window.document property.
Event Object
The event object gives you information about an event that has occurred.
The Event object represents the state of an event, such as the element in which the event
occurred, the state of the keyboard keys, the location of the mouse, and the state of the
mouse buttons.
Events are normally used in combination with functions, and the function will not be
executed before the event occurs!
Event Handlers
New to HTML 4.0 was the ability to let HTML events trigger actions in the browser, like
starting a JavaScript when a user clicks on an HTML element. Below is a list of the attributes
that can be inserted into HTML tags to define event actions.
IE: Internet Explorer, F: Firefox, O: Opera, W3C: W3C Standard.
Attribute The event occurs when... IE F O W3C
onblur An element loses focus 3 1 9 Yes
onchange The content of a field changes 3 1 9 Yes
onclick Mouse clicks an object 3 1 9 Yes
ondblclick Mouse double-clicks an object 4 1 9 Yes
onerror An error occurs when loading a document or an image 4 1 9 Yes
onfocus An element gets focus 3 1 9 Yes
onkeydown A keyboard key is pressed 3 1 No Yes
onkeypress A keyboard key is pressed or held down 3 1 9 Yes
onkeyup A keyboard key is released 3 1 9 Yes
onmousedown A mouse button is pressed 4 1 9 Yes
onmousemove The mouse is moved 3 1 9 Yes
onmouseout The mouse is moved off an element 4 1 9 Yes
onmouseover The mouse is moved over an element 3 1 9 Yes
onmouseup A mouse button is released 4 1 9 Yes
onresize A window or frame is resized 4 1 9 Yes
onselect Text is selected 3 1 9 Yes
onunload The user exits the page 3 1 9 Yes
Mouse / Keyboard Attributes