Slide 14.11: HTML DOM properties and methods

HTML DOM Properties and Methods

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 course 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 (e.g., the name of a node). Methods are often referred to as something that is done (e.g., remove a node).

HTML DOM Properties
Some DOM properties:

x.innerHTML, which is the text value of x
x.nodeName, which is the name of x
x.nodeValue, which is the value of x
x.parentNode, which is the parent node of x
x.childNodes, which is the child nodes of x
x.attributes, which is the attributes nodes of x

Note that in the list above, x is a node object (HTML element).

HTML DOM Methods
Some DOM methods:

x.getElementById(id), which gets the element with a specified id
x.getElementsByTagName(name), which gets all elements with a specified tag name
x.appendChild(node), which inserts a child node to x
x.removeChild(node), which removes a child node from x

Note that in the list above, x is a node object (HTML element).

Demonstration
The following demonstration shows how the script of HTML and JavaScript is displayed on the Web.


<html> <head> <script type="text/javascript"> function createDoc( ) { var doc = document.open( ); var txt = "<html><body bgcolor='#EDF3FE'>Learning about the HTML DOM is fun!</div></body></html>"; doc.write( txt ); doc.close( ); } </script> </head> <body> <input type="button" value="New document" onclick="createDoc( )" /> </body> </html>