Categories:

JavaScript Kit > DOM Reference > Here

Document Object Methods

Last updated: December 9th, 2009

Document object methods

Methods Description
addEventListener(eventType, listener, useCapture)

Not supported in IE, which uses attachEvent() instead.

 See addEventListener() on DOM Elements Methods page for full description.
attachEvent(eventType, function)

IE 5+only function

 See attachEvent() on DOM Elements Methods page for full 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)
detachEvent(eventType, function)

IE 5+only function

 See detachEvent() on DOM Elements Methods page for full description.
elementFromPoint(x,y)

Supported in IE, FF3+, and Opera9+

 Returns the element at the designated coordinates relative to the upper left corner of the browser window's viewport. As you scroll the document, the same coordinates (ie: x:20,y:20) may point to a different element as a result.

The following displays in the browser's title bar the element the mouse is currently over:

document.onmousemove=function(e){
 var evt=window.event || e
 var elfrompoint=document.elementFromPoint(evt.clientX, evt.clientY)
 document.title=elfrompoint.tagName
}
getComputedStyle(elementRef, pseudoElementName)

Not supported in IE, which uses the "currentStyle" property instead.

 Firefox/W3C only method that returns a style object containing the actual CSS property values added to an element, whether they are set using inline CSS or global/external stylesheets. To get the value to a specific cascaded CSS property, you'd just look up that property within the returned object. Note that this method is accessed using document.defaultView.getComputedStyle().

The following example shows how to retrieve the value of the CSS property "padding", applied to the element via external style sheet:

<head>
<style type="text/css">
#adiv{
padding: 10px;
}
</style>
</head>

<body>
<div id="adiv">This is some text</div>

<script type="text/javascript">
var mydiv=document.getElementById("adiv")
var actualstyle=document.defaultView.getComputedStyle(mydiv, "")
var divpadding=actualstyle.padding //contains "10px"
</script>
</body>
getElementsByClassName

Note: Supported in FF3+, Opera 9.5+, Safari 3+, though not IE8.

 Gets a collection of element(s) based on their shared class name, for example:

//get elements with "cats" class name
document.getElementsByClassName("cats")

You can get elements with different CSS class names all in one scoop, by separating each class with a space:

//get elements with "cats" or "dogs" class names
document.getElementsByClassName("cats dogs")

Since getElementsByClassName() is a native method of the browser, it is blazingly fast compared to custom code that attempt to simulate it. See "getElementsByClassName Speed Comparison".

Note that getElementsByClassName() also exists on each individual element on the page, to allow you to restrict the returned elements to just those contained within that element.
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
removeEventListener(eventType, listener, useCapture)

Not supported in IE, which uses detactEvent() instead.

 See removeEventListener() on DOM Elements Methods page for full description.
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.

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

 

CopyRight (c) 2018 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info