How to Use HTML DOM Objects to Manage Structure

By John Paul Mueller

Part of HTML5 Programming with JavaScript For Dummies Cheat Sheet

Organizing the information the user sees onscreen into a cohesive presentation using JavaScript is important. The user should see the HTML document structure, but the structure should support the content — it shouldn’t call attention to itself. When working with a page, structure includes everything from tables to controls used to interact with and manage the content that the user is most interested in seeing. The following HTML DOM objects help you perform this task when working with JavaScript.

Object Description
Document Provides access to all the elements of an entire page. Every
page loaded into a browser becomes a Document object that you access using the document keyword. You can see a complete list
of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_document.asp.
Event Allows interaction with the events and event handlers
associated with a page. Each element type has specific events
associated with it, such as the click event associated with the
Button object. You can see a complete
list of the methods and properties associated with this object at
www.w3schools.com/jsref/dom_obj_event.asp.
HTMLElement Provides a base class from which all HTML elements are derived.
This base class defines the properties and methods that all HTML
elements provide. You can see a complete list of the methods and
properties associated with this object at www.w3schools.com/jsref/dom_obj_all.asp.
Anchor Represents an HTML hyperlink. You can see a complete list of
the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_anchor.asp.
Area Defines the area within an HTML image map that’s used to create
clickable regions for a graphic element. You can see a complete
list of the methods and properties associated with this object at
www.w3schools.com/jsref/dom_obj_area.asp.
Base Specifies the default address or a default target for all links
on a page. You can see a complete list of the methods and
properties associated with this object at www.w3schools.com/jsref/dom_obj_base.asp.
Body Represents the <body> tag
portion of a page, including all the elements contained within that
tag. You can see a complete list of the methods and properties
associated with this object at www.w3schools.com/jsref/dom_obj_body.asp.
Button Represents a button on a page. This object is specifically
associated with the <button> tag,
rather than the <input> tag form of
button. You can see a complete list of the methods and properties
associated with this object at www.w3schools.com/jsref/dom_obj_pushbutton.asp.
Form Represents a form and includes all the elements within that
form. You can see a complete list of the methods and properties
associated with this object at www.w3schools.com/jsref/dom_obj_form.asp.
Frame and IFrame Represents a frame (the <frame>
tag) or an inline frame (the <iframe> tag) and all the elements within
that tag. You can see a complete list of the methods and properties
associated with this object at www.w3schools.com/jsref/dom_obj_frame.asp.
Frameset Provides access to a frameset that contains two or more frames.
This object specifies only the number of rows and columns used to
hold the associated frames. You can see a complete list of the
methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_frameset.asp.
Image Represents an embedded image. You can see a complete list of
the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_image.asp.
Input Button Represents an <input> tag of
type button used for building a form. You can see a complete list
of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_button.asp.
Input Checkbox Represents an <input> tag of
type check box used for building a form. You can see a complete
list of the methods and properties associated with this object at
www.w3schools.com/jsref/dom_obj_checkbox.asp.
Input File Represents an <input> tag of
type file upload used for building a form. When the user clicks the
button, the browser presents a browse dialog box used to locate the
file. You can see a complete list of the methods and properties
associated with this object at www.w3schools.com/jsref/dom_obj_fileupload.asp.
Input Hidden Represents an <input> tag of
type hidden. A hidden element is used to send data to the server
but is invisible to the end user. You can see a complete list of
the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_hidden.asp.
Input Password Represents an <input> tag of
type text used for building a form. This particular form of text
control displays asterisks instead of the characters the user has
typed to keep passwords and other secret information hidden. You
can see a complete list of the methods and properties associated
with this object at www.w3schools.com/jsref/dom_obj_password.asp.
Input Radio Represents an <input> tag of
type radio button used for building a form. You can see a complete
list of the methods and properties associated with this object at
www.w3schools.com/jsref/dom_obj_radio.asp.
Input Reset Represents an <input> tag of
type button used for building a form. This button type is used to
reset the form to its original state. You can see a complete list
of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_reset.asp.
Input Submit Represents an <input> tag of
type button used for building a form. This button type is used to
send data to the server. You can see a complete list of the methods
and properties associated with this object at www.w3schools.com/jsref/dom_obj_submit.asp.
Input Text Represents an <input> tag of
type text used for building a form. You can see a complete list of
the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_text.asp.
Link Creates an HTML link on the page. You can see a complete list
of the methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_link.asp.
Meta Defines meta data used to describe page content, automatically
refresh content, or perform other tasks. You can see a complete
list of the methods and properties associated with this object at
www.w3schools.com/jsref/dom_obj_meta.asp.
Object Create a generic object used to hold non-text data such as
pictures, controls, and audio. You can see a complete list of the
methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_object.asp.
Option Represents a drop-down list where the user can choose a single
entry. You can see a complete list of the methods and properties
associated with this object at www.w3schools.com/jsref/dom_obj_option.asp.
Select Represents a drop-down list where the user can choose one or
more entries. You can see a complete list of the methods and
properties associated with this object at www.w3schools.com/jsref/dom_obj_select.asp.
Style Specifies the appearance of other elements on the page. You can
see a complete list of the methods and properties associated with
this object at www.w3schools.com/jsref/dom_obj_style.asp.
Table Creates a table on the page and contains both row and cell
elements used to hold content. You can see a complete list of the
methods and properties associated with this object at www.w3schools.com/jsref/dom_obj_table.asp.
td and th Represents a data cell within a table. The <td> tag is used for general data items,
and the <th> tag defines headings.
You can see a complete list of the methods and properties
associated with this object at www.w3schools.com/jsref/dom_obj_tabledata.asp.
tr Represents a row of data cells within a table. You can see a
complete list of the methods and properties associated with this
object at www.w3schools.com/jsref/dom_obj_tablerow.asp.
Textarea Represents a multi-row text element on the page. You can see a
complete list of the methods and properties associated with this
object at www.w3schools.com/jsref/dom_obj_textarea.asp.