Improve your website with a Premium WordPress Theme and Design it in Real Time.
search
HTML CSS JavaScript Appendix
You are here: Reference > JavaScript > client-side > HTML DOM > objects > document

document object

Browser support:
Represents an entire HTML document and provides possibilities for accessing, creating and manipulating all elements in the document.
To retrieve an element in an HTML document, you can use collections (all, anchors, applets, etc.), the getElementById, getElementsByName and getElementsByTagName methods and some other properties and methods. If you want to access the html or the body element, use the document.documentElement and document.body properties.
Since the document object is a container object for an HTML document, it provides methods to create new elements (createElement), text nodes (createTextNode) and comment nodes (createComment). After a node is created, it can be inserted into the document with the appendChild and insertBefore methods.
If a node that belongs to another document needs to be inserted into the current document, then it must be imported first (with the adoptNode or importNode method).
To get the document object, use the window.document property or simply the document property, because the members of the window object can be referred directly. If you need information about the window that contains the current document, please see the page for the window object.
Documents in frame and iframe element have their own document objects. To retrieve those document objects, use the contentDocument property.

Syntax:

Properties that reference the object:
+object.contentDocument
Related HTML objects:
•popup.document
•window.document
+object.ownerDocument
Related HTML objects:
a, abbr, acronym, address, applet, area, b, base, basefont, bdo, bgsound, big, blink, blockquote, body, br, button, caption, center, cite, code, col, colgroup, comment, dd, del, dfn, dir, div, dl, dt, em, embed, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input:button, input:checkbox, input:file, input:hidden, input:image, input:password, input:radio, input:range, input:reset, input:search, input:submit, input:text, ins, isindex, kbd, keygen, label, legend, li, link, listing, map, marquee, menu, meta, nobr, noframes, noscript, object, ol, optgroup, option, p, param, plaintext, pre, q, rt, ruby, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var, wbr, xml, xmp
Methods that return the object:
•implementation.createDocument (namespaceURI, qualifiedName, docTypeObj)
The base interface, through which you can add new functionalities to the document object, is the HTMLDocument interface.

Possible members:

 Properties
Methods
Events
activeElement
Returns a reference to the object that is currently designated as the active element in the document.
alinkColor
Sets or retrieves the color of active hypertext links in the entire document.
all
Represents a collection of all elements contained by an element or the entire document.
anchors
Represents a collection of all anchor elements in the document that have a name property specified.
applets
Represents a collection of all applet elements in the current document.
attributes
Represents a collection of attribute nodes that belong to an element.
baseURI
10
 Returns the base URL for the object.
bgColor
Sets or retrieves the background color of the document.
body
Specifies the main body of an HTML document.
characterSet
9
 Returns the character encoding of the document.
charset
Sets or retrieves the character encoding of the document, a linked document or a script block.
childNodes
Represents a collection of all nodes that are direct descendants of an element.
compatMode
Returns whether rendering works in Quirks or Strict mode.
contentType
Sets or retrieves the MIME type of the current document.
cookie
Sets or retrieves the cookies stored for the current document.
defaultCharset
Returns the character set that belongs to the current regional and language settings of the operating system.
defaultView
9
 Retrieves a reference to the default AbstractView object for the current document.
designMode
Sets or returns a string value that indicates whether editing is enabled for the document.
dir
Sets or retrieves the horizontal rendering order in the current document.
doctype
Represents a Document Type Definition (DTD).
documentElement
Returns a reference to the root element node of the document.
documentURI
Sets or returns the absolute location of the document.
domain
Sets or returns the hostname of the server that served the current document.
embeds
Represents a collection of all embed elements in the current document.
expando
9
 Sets or returns a Boolean value that indicates whether additional properties should be used within the object.
fgColor
Sets or retrieves the text color for the document.
fileCreatedDate
Returns the date when the file was created.
fileModifiedDate
Returns the date when the file was last modified.
fileSize
Returns the size of the file.
fileUpdatedDate
Returns the date when the file was last updated.
firstChild
Returns a reference to the first child of the current element.
forms
Represents a collection of all form elements in the current document.
frames
Represents a collection of all window objects that belong to frame and iframe elements in the current document.
height
Retrieves the height of the document's contents.
images
Represents a collection of all img elements in the current document.
implementation
Contains information about the features supported by the browser and provides methods for creating base objects.
inputEncoding
9
 Returns the character encoding used for parsing the document.
lastChild
Returns a reference to the last child of the current element.
lastModified
Retrieves the date and time when the document was last modified.
linkColor
Sets or retrieves the color of the hypertext links in the entire document that have not been visited and activated yet.
links
Represents a collection of all anchor and area elements in the current document that have a href property specified.
location
Contains information about the URL of the currently loaded document, and provides methods to navigate to a new page.
mimeType
Retrieves the type of the document file or the type of a linked file.
namespaces
Represents a collection of namespaces that have been declared for custom elements in HTML.
nextSibling
Returns a reference to the next child of the current element's parent.
nodeName
Returns the name of the current node.
nodeType
Returns an integer that indicates the type of the node.
nodeValue
Sets or returns the value of the current node.
parentNode
Returns the parent element of the current node in the DOM hierarchy.
parentWindow
Returns a reference to the window object that contains the current document.
plugins
Represents a collection of all embed elements in the current document.
previousSibling
Returns a reference to the previous node of the current element's parent.
protocol
Sets or retrieves the protocol component of the URL assigned to the object.
readyState
3.6
 Returns a string value that represents the state of the object.
referrer
Retrieves the URL of the document that loaded the current page.
scripts
Represents a collection of all script elements in the current document.
selection
10.5
 Represents the currently selected part of the document.
styleSheets
Represents a collection of styleSheet objects in the current document.
title
Sets or returns the title of the current document.
uniqueID
Returns the unique identifier generated by the browser for the object.
URL
Specifies or returns the location of the current document.
URLUnencoded
Returns a string value that represents the unencoded version of the location of the current document.
vlinkColor
Sets or retrieves the color of the visited hypertext links in the entire document.
width
Retrieves the width of the browser window's client area.

Example HTML code 1:

This example illustrates the use of the document object and the getElementById method:
 
<head>
    <script type="text/javascript">
        function GetDivision () {
            var div = document.getElementById ("myDiv");
            alert (div.innerHTML);
        }
    </script>
</head>
<body>
    <button onclick="GetDivision ();">Get the contents of the division element</button>
    <div id="myDiv">A simple division element</div>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the contentDocument property to get the document object of an iframe element:
 Code
editable.htm 
<head>
    <script type="text/javascript">
        var editorDoc;
        function InitEditable () {
            var editor = document.getElementById ("editor");

            if (editor.contentDocument)
                editorDoc = editor.contentDocument;
            else
                editorDoc = editor.contentWindow.document;
            
            var editorBody = editorDoc.body;

                // turn off spellcheck
            if ('spellcheck' in editorBody {    // Firefox
                editorBody.spellcheck = false;
            }

            if ('contentEditable' in editorBody) {
                    // allow contentEditable
                editorBody.contentEditable = true;
            }
            else {  // Firefox earlier than version 3
                if ('designMode' in editorDoc) {
                        // turn on designMode
                    editorDoc.designMode = "on";                
                }
            }
        }

        function ToggleBold () {
            editorDoc.execCommand ('bold', false, null);
        }
    </script>
</head>
<body onload="InitEditable ();">
    First, write and select some text in the editor.
    <br />
    <iframe id="editor" src="editable.htm"></iframe>
    <br /><br />
    You can toggle the bold/normal state of the selected text with this button:
    <br />
    <button onclick="ToggleBold ();">Bold</button>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Related pages:

window

External links:

document (MSDN)
document (Mozilla Developer Center)
document (W3C)
User Contributed Comments

Post Content

Post Content
Search: search
© 2012 Dottoro.com. All rights reserved.