출처 :http://www.javascriptkit.com
Document Object Methods
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") |
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") |
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> |
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") |
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") |
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 " <head> |
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 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 Since Note that |
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> |
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") |
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"> 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: querySelector() supports an optional 2nd " |
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"> 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:
|
Note: See also JavaScript document object.