Categories:

JavaScript Kit > DOM Reference > Here

Document Object Methods

Last updated: October 2nd, 2008

Document object methods

Methods Description
createAttribute("attributename") Creates a new attribute, ready to be inserted somewhere in the document. It returns a reference to the created attribute.

Example(s):

var styleattr=document.createAttribute("align")
styleattr.nodeValue="center"
document.getElementById("sister").setAttributeNode(styleattr)
createComment(commenttext) Creates an instance of the comment node. Once created, you can then insert it into the document tree using appendChild(), for example.

Example(s):

var commentnode=document.createComment("Copyright JavaScript Kit")
document.getElementById("mydiv").appendChild(commentnode)
createDocumentFragment() Creates an empty document fragment. The result is a temporary container for creating and modifying new elements or attributes before introducing the final result to your document tree. This is a very useful method when you're performing multiple operations that add to or modify the document tree. Instead of directly modifying the document tree each time (very inefficient), it's much better to use a temporary "whiteboard" that is created by createDocumentFragment() to perform all your operations on first before finally inserting the result to the document tree.

Example(s):

<div id="sister"></div>

<script type="text/javascript">
var docfrag=document.createDocumentFragment()
var mydiv=document.createElement("div")
var divtext=document.createTextNode("This is div text")
mydiv.appendChild(divtext)
docfrag.appendChild(mydiv)
document.getElementById("sister").appendChild(docfrag) //div now reads "this is div text"
</script>
createElement(tagName) Creates an instance of the element object, which can then added to the document tree using appendChild(), for example.

Example(s):

var textblock=document.createElement("p")
textblock.setAttribute("id", "george")
textblock.setAttribute("align", "center")
document.body.appendChild(textblock)
createTextNode(text) Creates a new text node, which can then be added to an element in the document tree.

Example(s):

var headertext=document.createTextNode("Welcome to JavaScript Kit")
document.getElementById("mytitle").appendChild(headertext)
getElementById(id) Accesses any element on the page via its ID attribute. A fundamental method within the DOM for accessing elements on the page.
getElementsByName(name) Returns an array of elements with a name attribute whose value matches that of the parameter's. In IE6, elements with an ID attribute of the matching value will also be included in the array, and getElementsByName() is limited to retrieving form objects such as checkboxes and INPUT. In Firefox, nither of these "pitfalls" apply.

<div name="george">f</div>
<div name="george">f</div>

<script type="text/javascript">
var georges=document.getElementsByName("george")
for (i=0; i< georges.length; i++)
// do something with each DIV tag with name="george". Firefox only.
</script>
getElementsByTagName(tagname) Returns an array of elements whose tag name matches the parameter. In Firefox/ IE6+, you may enter an asterisk ("*") as the parameter to retrieve a list of all elements within the document.

var ptags=document.getElementsByTagName("p")
var alltags=document.getElementsByTagName("*") //returns all elements on page
querySelector(selectors, [NSResolver])

Note: Currently supported in FF3.1+, IE8+ (only in IE8 standards mode), and Safari 3.1+

 Accepts a CSS selector(s) and returns the first matching element (based on the document tree) within the document, or null.

Example:

<ul id="mylist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<script type="text/javascript">
var item2=document.querySelector('#mylist li:nth-of-type(2)')
alert(item2.innerHTML) //alerts "Item 2"
</script>

You can enter multiple CSS selectors each separated by a comma (,), in which case the first matching element of any of the CSS selectors entered will be returned:

//returns either element "#leftcolumn" or "#rightcolumn", depending on which one is found first:
document.querySelector("#leftcolumn, #rightcolumn")

querySelector() supports an optional 2nd "NSResolver" parameter to resolve namespace prefixes in XHTML documents. Not supported in IE8.
querySelectorAll(selectors, [NSResolver])

Note: Currently supported in FF3.1+, IE8+ (only in IE8 standards mode), and Safari 3.1+

 Accepts a CSS selector(s) and returns all matching elements (based on the document tree) within the document as a staticNodeList, or null. A staticNodeList is a static collection of elements that are not affected by any subsequent changes occuring on the document tree.

Example:

<ul id="mylist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<script type="text/javascript">
var odditems=document.querySelectorAll('#mylist li:nth-of-type(odd)')
for (var i=0; i<odditems.length; i++)
 alert(odditems[i].innerHTML) //alerts "Item 1", "Item 3" etc.
</script>

You can enter multiple CSS selectors each separated by a comma (,), in which case all matching elements found using the entered CSS selectors will be returned:

//returns both elements "#leftcolumn" or "#rightcolumn", or one of them if only one defined:
document.querySelectorAll("#leftcolumn, #rightcolumn")

querySelectorAll() supports an optional 2nd "NSResolver" parameter to resolve namespace prefixes in XHTML documents. Not supported in IE8.

See "Overview of CSS3 Structural puesdo-classes" for advanced CSS selectors you can use with the query selector methods.

Note: See also JavaScript document object.

Sponsored By

DD CSS Library
Free CSS menus and codes to give your site a visual boost.

Daniweb JavaScript Community

DOM Window
DOM Document
DOM Element
DOM Event
DOM Style
DOM Table
Miscellaneous

 

CopyRight © 1998-2008 JavaScript Kit. NO PART may be reproduced without author's permission.