document Class
Provides several methods that override native document-methods to work with the vdom.
Copyright (c) 2014 ITSA - https://github.com/itsa
New BSD License - http://choosealicense.com/licenses/bsd-3-clause/
Item Index
Methods
- adoptNode
- appendChild
- contains
- createAttribute
- createComment
- createElement
- createNodeIterator
- createNodeIterator
- createRange
- createTextNode
- createTreeWalker
- defineIcon
- elementFromPoint
- enableStyleSheetsForSet
- getAll
- getAttributeNode
- getBoundingClientRect
- getClientRects
- getElement
- getElementById
- getElementsByClassName
- getElementsByClassName
- getElementsByName
- getElementsByName
- getElementsByTagName
- getElementsByTagName
- getSelection
- hasFocus
- importNode
- insertAdjacentHTML
- insertBefore
- querySelector
- querySelectorAll
- removeAttributeNode
- removeChild
- replace
- replaceChild
- scrollIntoView
- setAttributeNode
- setupMutationObserver
- test
Properties
- accessKey
- activeElement
- anchors
- applets
- attributes
- baseURI
- body
- characterSet
- childElementCount
- childNodes
- children
- className
- clientHeight
- clientLeft
- clientTop
- clientWidth
- compatMode
- contentType
- currentScript
- designMode
- doctype
- documentElement
- documentURI
- domain
- embeds
- firstChild
- firstChild deprecated
- firstElementChild
- forms
- href
- id
- images
- implementation
- lastChild
- lastChild deprecated
- lastElementChild
- lastModified
- lastStyleSheetSet
- links
- location
- name
- nextElementSibling deprecated
- nextElementSibling
- nodeName
- nodeType
- nodeValue
- offsetHeight
- offsetWidth
- parentElement
- parentNode
- plugins
- preferredStyleSheetSet
- previousElementSibling
- previousSibling deprecated
- readyState
- referrer
- scripts
- scrollHeight
- scrollLeft
- scrollTop
- scrollWidth
- selectedStyleSheetSet
- src
- style
- styleSheets
- title
- type
- URL
- value
Methods
adoptNode
-
externalNode
Adopts a node from an external document. The node and its subtree is removed from the document it's in (if any), and its ownerDocument is changed to the current document. The node can then be inserted into the current document.
Parameters:
-
externalNode
NodeThe node from another document to be adopted.
Returns:
is the adopted node that can be used in the current document. The new node's parentNode is null, since it has not yet been inserted into the document tree.
appendChild
-
element
Adds a HtmlElement or DocumentFragment to the end of the html
-element
Parameters:
-
element
Element | DocumentFragmentthe item to be appended
Returns:
the appended child.
contains
-
otherElement
-
[insideItags=false]
-
[inspectProtectedNodes=false]
Indicating whether an Element is inside the DOM.
Parameters:
Returns:
whether the Element is inside the dom.
createAttribute
-
name
Creates a new attribute-node, and returns it.
Parameters:
-
name
StringThe name of the attribute
Returns:
createComment
-
data
Creates a new Comment-node, and returns it.
Parameters:
-
data
StringThe data to be added to the Comment.
Returns:
createElement
-
tagName
Creates a new HtmlElement, and returns it.
Don't use qualified names (like "html:a") with this method.
Parameters:
-
tagName
Stringis a string that specifies the type of element to be created. The nodeName of the created element is initialized with the value of tagName.
Returns:
createNodeIterator
-
[whatToShow]
-
[filter]
Returns a new NodeIterator object with this Element as root.
The NodeIterator is a snapshot of the dom at the time this method was called. It is not updated when changes of the dom are made afterwards.
Parameters:
-
[whatToShow]
Number optionalFilter specification constants from the NodeFilter DOM interface, indicating which nodes to iterate over. You can use or sum one of the next properties:
- window.NodeFilter.SHOW_ELEMENT
- window.NodeFilter.SHOW_COMMENT
- window.NodeFilter.SHOW_TEXT
-
[filter]
NodeFilter | Function optionalAn object implementing the NodeFilter interface or a function. See https://developer.mozilla.org/en-US/docs/Web/API/NodeFilter
Returns:
createNodeIterator
-
root
-
[whatToShow]
-
[filter]
Returns a new NodeIterator object.
The NodeIterator is a snapshot of the dom at the time this method was called. It is not updated when changes of the dom are made afterwards.
Parameters:
-
root
ElementThe root node at which to begin the NodeIterator's traversal.
-
[whatToShow]
Number optionalFilter specification constants from the NodeFilter DOM interface, indicating which nodes to iterate over. You can use or sum one of the next properties:
- window.NodeFilter.SHOW_ELEMENT
- window.NodeFilter.SHOW_COMMENT
- window.NodeFilter.SHOW_TEXT
-
[filter]
NodeFilter | Function optionalAn object implementing the NodeFilter interface or a function. See https://developer.mozilla.org/en-US/docs/Web/API/NodeFilter
Returns:
createRange
()
Range
Returns a new Range object. See https://developer.mozilla.org/en-US/docs/Web/API/Range
Returns:
createTextNode
-
data
Creates a new Text-node, and returns it.
Parameters:
-
data
StringThe data to be added to the Text-node.
Returns:
createTreeWalker
-
root
-
[whatToShow]
-
[filter]
Returns a newly created TreeWalker object.
The TreeWalker is life presentation of the dom. It gets updated when the dom changes.
Parameters:
-
root
ElementThe root node at which to begin the NodeIterator's traversal.
-
[whatToShow]
Number optionalFilter specification constants from the NodeFilter DOM interface, indicating which nodes to iterate over. You can use or sum one of the next properties:
- window.NodeFilter.SHOW_ELEMENT
- window.NodeFilter.SHOW_COMMENT
- window.NodeFilter.SHOW_TEXT
-
[filter]
NodeFilter | Function optionalAn object implementing the NodeFilter interface or a function. See https://developer.mozilla.org/en-US/docs/Web/API/NodeFilter
Returns:
defineIcon
-
iconName
-
viewBoxWidth
-
viewBoxHeight
-
svgContent
Defines a new svg-icon. With this icon-definition, icons can be used by usinf i-elements with the attribute: icon="iconname".
elementFromPoint
-
x
-
y
Returns the Element from the document whose elementFromPoint
-method is being called which is the topmost
dom-Element which lies under the given point. To get a Element, specify the point via coordinates, in CSS pixels,
relative to the upper-left-most point in the window or frame containing the document.
Parameters:
Returns:
the matching Element
enableStyleSheetsForSet
-
name
Enables the style sheets matching the specified name in the current style sheet set, and disables all other style sheets (except those without a title, which are always enabled).
Parameters:
-
name
StringThe name of the style sheets to enable. All style sheets with a title that match this name will be enabled, while all others that have a title will be disabled. Specify an empty string for the name parameter to disable all alternate and preferred style sheets (but not the persistent style sheets; that is, those with no title attribute).
getAll
-
cssSelector
-
[insideItags=false]
Gets an ElementArray of Elements, specified by the css-selector.
Parameters:
Returns:
ElementArray of Elements that match the css-selector
getAttributeNode
()
AttributeNode
Returns the specified attribute of the specified element, as an Attr node.
Returns:
getBoundingClientRect
()
AttributeNode
Returns a text rectangle object that encloses a group of text rectangles. The returned value is a TextRectangle object which is the union of the rectangles returned by getClientRects() for the element, i.e., the CSS border-boxes associated with the element.
The returned value is a TextRectangle object, which contains read-only left, top, right and bottom properties describing the border-box in pixels. top and left are relative to the top-left of the viewport.
Returns:
Therectangle object that encloses a group of text rectangles.
getClientRects
()
Collection
Returns a collection of rectangles that indicate the bounding rectangles for each box in a client.
The returned value is a collection of ClientRect objects, one for each CSS border box associated with the element. Each ClientRect object contains read-only left, top, right and bottom properties describing the border box, in pixels, with the top-left relative to the top-left of the viewport. For tables with captions, the caption is included even though it's outside the border box of the table.
Returns:
getElement
-
cssSelector
-
[insideItags=false]
Gets one Element, specified by the css-selector. To retrieve a single element by id,
you need to prepend the id-name with a #
. When multiple Element's match, the first is returned.
Parameters:
Returns:
the Element that was search for
getElementById
-
id
Returns the Element matching the specified id.
Parameters:
-
id
Stringid of the Element
Returns:
getElementsByClassName
-
classNames
Returns an HTMLCollection of all Elements within this Element, that match their classes with the supplied classNames
argument.
To match multiple different classes, separate them with a comma
.
getElementsByClassName is life presentation of the dom. The returned HTMLCollection gets updated when the dom changes.
NOTE: it is highly recomended to use document.getAll
because that method takes advantage of the vdom.
Parameters:
-
classNames
Stringthe classes to search for
Returns:
life Array with Elements
getElementsByClassName
-
classNames
Returns an ElementArray of all Elements that match their classes with the supplied classNames
argument.
To match multiple different classes, separate them with a comma
.
getElementsByClassName is life presentation of the dom. The returned ElementArray gets updated when the dom changes.
NOTE: it is highly recomended to use document.getAll
because that method takes advantage of the vdom.
Parameters:
-
classNames
Stringthe classes to search for
Returns:
life Array with Elements
getElementsByName
-
name
Returns an HTMLCollection of all Elements within this Element, that match their name
-attribute with the supplied name
argument.
getElementsByName is life presentation of the dom. The returned HTMLCollection gets updated when the dom changes.
NOTE: it is highly recomended to use document.getAll
because that method takes advantage of the vdom.
Parameters:
-
name
Stringthe property of name-attribute to search for
Returns:
life Array with Elements
getElementsByName
-
name
Returns an ElementArray of all Elements that match their name
-attribute with the supplied name
argument.
getElementsByName is life presentation of the dom. The returned ElementArray gets updated when the dom changes.
NOTE: it is highly recomended to use document.getAll
because that method takes advantage of the vdom.
Parameters:
-
name
Stringthe property of name-attribute to search for
Returns:
life Array with Elements
getElementsByTagName
-
tagNames
Returns an ElementArray of all Elements that match their name
-attribute with the supplied name
argument.
getElementsByTagName is life presentation of the dom. The returned ElementArray gets updated when the dom changes.
NOTE: it is highly recomended to use document.getAll
because that method takes advantage of the vdom.
Parameters:
-
tagNames
Stringthe tags to search for
Returns:
life Array with Elements
getElementsByTagName
-
tagNames
Returns an HTMLCollection of all Elements within this Element, that match their name
-attribute with the supplied name
argument.
getElementsByTagName is life presentation of the dom. The returned HTMLCollection gets updated when the dom changes.
NOTE: it is highly recomended to use document.getAll
because that method takes advantage of the vdom.
Parameters:
-
tagNames
Stringthe tags to search for
Returns:
life Array with Elements
getSelection
()
Selection
Returns a selection object representing the range of text selected by the user.
Is also available on the window
-object.
Returns:
A Selection object. When cast to string, either by adding empty quotes "" or using .toString, this object is the text selected.
hasFocus
()
Boolean
Returns a Boolean value indicating whether the document or any element inside the document has focus.
Returns:
whether the document or any element inside the document has focus.
importNode
-
externalNode
-
deep
Creates a copy of a node from an external document that can be inserted into the current document.
Parameters:
Returns:
The new node that is imported into the document. The new node's parentNode is null, since it has not yet been inserted into the document tree.
insertAdjacentHTML
-
position
-
element
Parses the specified text as HTML and inserts the resulting nodes into the DOM tree at a specified position.
insertBefore
-
newElement
-
referenceElement
Inserts newElement
before referenceElement
.
Parameters:
Returns:
the Element being inserted (equals newElement)
querySelector
-
selectors
-
[insideItags=false]
Returns the first Element that matches the CSS-selectors. You can pass one, or multiple CSS-selectors. When passed multiple,
they need to be separated by a comma
.
Parameters:
Returns:
querySelectorAll
-
selectors
-
[insideItags=false]
Returns an ElementArray of all Elements that match the CSS-selectors. You can pass one, or multiple CSS-selectors. When passed multiple,
they need to be separated by a comma
.
querySelectorAll is a snapshot of the dom at the time this method was called. It is not updated when changes of the dom are made afterwards.
Parameters:
Returns:
non-life Array (snapshot) with Elements
removeAttributeNode
-
attributeNode
Removes the attribute specified by an attributeNode from the Element.
Parameters:
-
attributeNode
AttributeNode
removeChild
-
child
Removes a child node from the DOM.
Parameters:
-
child
Elementthe Element to be removed from the DOM
Returns:
a reference to the removed child node
replace
-
newHtmlElement
-
[escape]
Replaces the Element with a new Element.
replaceChild
-
newChild
-
oldChild
Replaces one child-element of its parent element with a new child-element.
Parameters:
Returns:
is the replaced node. This is the same Element as oldChild.
scrollIntoView
()
Scrolls the element into view.
setAttributeNode
-
attributeNode
Sets the attribute on the Element specified by attributeNode
Parameters:
-
attributeNode
AttributeNode
setupMutationObserver
()
Activates MutationObserver: only needed when manipulating dom-elements by other means than through this framework. It causes the vdom to be correctly being updated.
Only works for modern browsers and >IE10
Properties
accessKey
String
sets or returns an accesskey for an element. An accesskey specifies a shortcut key to activate/focus an element. Note: The way of accessing the shortcut key is varying in different browsers: http://www.w3schools.com/jsref/prop_html_accesskey.asp
activeElement
Element
Returns the currently focused element, that is, the element that will get keystroke events if the user types any.
anchors
HTMLCollection
Returns an HTMLCollection with Elements of all of the anchors
in the document that have a name
specified (a[name]).
For reasons of backwards compatibility, the returned set of anchors only contains those anchors created with the name
attribute.
anchors
is a life presentation of the dom. The returned HTMLCollection gets updated when the dom changes.
applets
HTMLCollection
Returns an HTMLCollection with Elements of all of the applets
in the document.
applets
is a life presentation of the dom. The returned HTMLCollection gets updated when the dom changes.
attributes
NamedNodeMap
Returns a live collection of all attribute nodes registered to the specified node. It is a NamedNodeMap, not an Array, so it has no Array methods and the Attr nodes' indexes may differ among browsers. To be more specific, attributes is a key/value pair of strings that represents any information regarding that attribute.
Prefer to use getAttrs()
which is much quicker, but doesn't return a life-list.
body
Element
Returns the body
or frameset
Element of the current document, or null if no such element exists.
characterSet
Unknown
Returns the character encoding of the current document.
childNodes
NodeList
Returns a live collection of childNodes of the given element, either Element, TextNode or CommentNode
children
NodeList
Returns a live collection of child Element's of the given element.
clientHeight
Number
Returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.
clientLeft
Number
The width of the left border of an element in pixels. It includes the width of the vertical scrollbar if the text direction of the element is right–to–left and if there is an overflow causing a left vertical scrollbar to be rendered. clientLeft does not include the left margin or the left padding.
clientTop
Number
The width of the top border of an element in pixels. It does not include the top margin or padding.
clientWidth
Number
Returns the inner width of an element in pixels, including padding but not the vertical scrollbar height, border, or margin.
compatMode
Unknown
Indicates whether the document is rendered in Quirks mode or Standards mode. Its value is either:
BackCompat
if the document is in quirks modeCSS1Compat
if the document is in no-quirks (also known asstandards
) mode or limited-quirks (also known asalmost standards
) mode.
contentType
Unknown
Returns the MIME type that the document is being rendered as. This may come from HTTP headers or other sources of MIME information, and might be affected by automatic type conversions performed by either the browser or extensions.
designMode
String
Controls whether the entire document is editable. Its value should be either "off" or "on".
Default: "off"
doctype
Unknown
Returns the Document Type Declaration (DTD) associated with current document. The returned object implements the DocumentType interface. Use DOMImplementation.createDocumentType() to create a DocumentType.
documentURI
String
Returns string URI of the HTML document. Same as document.URL
.
Note: HTML documents have a document.URL property which returns the same value. Unlike URL, documentURI is available on all types of documents.
domain
String
Gets the domain portion of the origin of the current document.
Setter will fail, because the same origin policy needs to persist.
embeds
HTMLCollection
Returns an HTMLCollection with Elements of all of the embed
-elements in the document.
embeds
is a life presentation of the dom. The returned HTMLCollection gets updated when the dom changes.
firstChild
Node
deprecated
Reference to the first childNode, where the related dom-node is either an Element, TextNode or CommentNode (nodeType===1, 3 or 8).
Better work with Elements only: use firstElementChild
instead, which returns the first Element-child.
forms
HTMLCollection
Returns an HTMLCollection with Elements of all of the form
-elements in the document.
forms
is a life presentation of the dom. The returned HTMLCollection gets updated when the dom changes.
images
HTMLCollection
Returns an HTMLCollection with Elements of all of the images in the document.
images
is a life presentation of the dom. The returned HTMLCollection gets updated when the dom changes.
implementation
DOMImplementation
Returns a DOMImplementation object associated with the current document.
lastChild
Node
deprecated
Reference to the last childNode, where the related dom-node is either an Element, TextNode or CommentNode (nodeType===1, 3 or 8).
Better use lastElementChild
instead, which returns the last Element-child.
lastElementChild
Element
Reference to the last Element-child, where the related dom-node is an Element (nodeType===1).
lastModified
String
Returns a string containing the date and time on which the current document was last modified.
If you want a Date-object, you need to transform lastModified into a Date object: modifyDate = new Date(document.lastModified);
lastStyleSheetSet
String
Returns the last enabled style sheet set; this property's value changes whenever the document.selectedStyleSheetSet property is changed.
links
HTMLCollection
Returns an HTMLCollection with Elements of all of the of all area
-Elements and a
-Elements in a document with a value for the href attribute.
links
is a life presentation of the dom. The returned HTMLCollection gets updated when the dom changes.
location
Location
returns a Location object, which contains information about the URL of the document and provides methods for changing that URL and loading another URL.
Though Document.location is a read-only Location object, you can also assign a DOMString to it. This means that you can work with document.location as if it were a string in most cases: document.location = 'http://www.example.com' is a synonym of document.location.href = 'http://www.example.com'.
To retrieve just the URL as a string, the read-only document.URL property can also be used.
See more about the Location
object: https://developer.mozilla.org/en-US/docs/Web/API/Location
name
String
Gets or sets the name
property of a Element; it only applies to the following elements:
a
, applet
, button
, form
, frame
, iframe
, img
, input
, map
, meta
, object
, param
, select
, and textarea
.
nextElementSibling
Node
deprecated
Returns the Element immediately following the specified one in its parent's childNodes list, or null if the specified node is the last node in that list. Is either an Element, TextNode or CommentNode (nodeType===1, 3 or 8).
Do not use this, but use lastElementChild
instead, which returns the next Element-child.
nextElementSibling
Element
Returns the Element immediately following the specified one in its parent's childNodes list, or null if the specified node is the last node in that list. Is an Element (nodeType===1).
offsetHeight
Number
The exact height of the Element on the screen. Included borders and padding (no margin).
Returns a number without unity.
Better use height
--> it's an alias, but has a setter as well
offsetWidth
Number
The exact width of the Element on the screen. Included borders and padding (no margin).
Returns a number without unity.
Better use width
--> it's an alias, but has a setter as well
plugins
HTMLCollection
Returns an HTMLCollection with Elements of all of the plugins (object
- or embed
-elements) in the document.
plugins
is a life presentation of the dom. The returned HTMLCollection gets updated when the dom changes.
preferredStyleSheetSet
String
Returns the preferred style sheet set as set by the page author. This is determined from the order of style sheet declarations and the Default-Style HTTP header.
previousElementSibling
Element
Returns the Element immediately preceding the specified one in its parent's childNodes list, or null if the specified node is the last node in that list. Is an Element (nodeType===1).
previousSibling
Node
deprecated
Returns the Element immediately preceding the specified one in its parent's childNodes list, or null if the specified node is the last node in that list. Is either an Element, TextNode or CommentNode (nodeType===1, 3 or 8).
Do not use this, but use previousElementSibling
instead, which returns the previous Element-child.
readyState
String
Returns "loading" while the document is loading, "interactive" once it is finished parsing but still loading sub-resources, and "complete" once it has loaded.
scripts
HTMLCollection
Returns an HTMLCollection with Elements of all of the script-elements in the document.
scripts
is a life presentation of the dom. The returned HTMLCollection gets updated when the dom changes.
scrollHeight
Number
A measurement of the height of an element's content, including content not visible on the screen due to overflow. The scrollHeight value is equal to the minimum clientHeight the element would require in order to fit all the content in the viewpoint without using a vertical scrollbar. It includes the element padding but not its margin.
Returns a number without unity.
scrollLeft
Number
Gets or sets the number of pixels that an element's content is scrolled to the left.
scrollTop
Number
Gets or sets the number of pixels that the content of an element is scrolled upward. An element's scrollTop is a measurement of the distance of an element's top to its topmost visible content. When an element content does not generate a vertical scrollbar, then its scrollTop value defaults to 0.
scrollWidth
Number
Returns either the width in pixels of the content of an element or the width of the element itself, whichever is greater. If the element is wider than its content area (for example, if there are scroll bars for scrolling through the content), the scrollWidth is larger than the clientWidth.
Returns a number without unity.
selectedStyleSheetSet
String
Indicates the name of the style sheet set that's currently in use. See more about Stylesheets: https://developer.mozilla.org/en-US/docs/Web/API/Stylesheet Setting the value of this property is equivalent to calling document.enableStyleSheetsForSet() with the value of currentStyleSheetSet, then setting the value of lastStyleSheetSet to that value as well.
src
String
Gets or sets the element's attribute type
. Only applies for the script
, img
and style
-elements.
styleSheets
HTMLCollection
Returns an HTMLCollection with Elements of all of the style-elements in the document.
styleSheets
is a life presentation of the dom. The returned HTMLCollection gets updated when the dom changes.
title
String
Gets or sets the title
of the document. That is, the title
-Element within the head
-Element
URL
String
Returns string URL of the HTML document. Same as document.documentURI
Note: HTML documents have a document.URL property which returns the same value. Unlike URL, documentURI is available on all types of documents.
value
String
Gets or sets the value of an input or select Element.
Note it is highly preferable to use getValue() and setValue().
Events
afterscriptexecute
Fired when a static script
element finishes executing its script. Does not fire if the element is added dynamically, eg with appendChild().
beforescriptexecute
Fired when the code in a script
element declared in an HTML document is about to start executing. Does not fire if the element is added dynamically, eg with appendChild().
offline
"offline" event is fired on the
of each page when the browser switches between online and offline mode. The event is non-cancellable (you can't prevent the user from coming online, or going offline).online
"online" event is fired on the
of each page when the browser switches between online and offline mode. The event is non-cancellable (you can't prevent the user from coming online, or going offline).