document object
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 |
| • | popup.document |
| • | window.document |
| + | object.ownerDocument |
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:
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
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> |
||||
|
||||
|
Did you find this example helpful?
|
Example HTML code 2:
This example illustrates the use of the contentDocument property to get the document object of an iframe element:
|
|
|||||
<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> |
|||||
|
|||||
|
Did you find this example helpful?
|
Related pages:
External links:
User Contributed Comments