goog.dom.DomHelper
Provided By |
---|
Create an instance of a DOM helper with a new document object.
new DomHelper( opt_document )
Parameters |
|
---|
Instance Methods
this.$( element ) → (Element|null)
(Element|null)
Alias for getElement
.
warning Deprecated | Use |
---|
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.$$<T>( opt_tag, opt_class, opt_el ) → IArrayLike<(R|null)>
IArrayLike<(R|null)>
Alias for getElementsByTagNameAndClass
.
warning Deprecated | Use DomHelper getElementsByTagNameAndClass. |
---|
Parameters |
| ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Returns |
|
this.$dom<T>( tagName, opt_attributes, ...var_args ) → R
R
Alias for createDom
.
warning Deprecated | Use |
---|
Parameters |
| ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Returns |
|
this.append( parent, ...var_args ) → void
void
Appends a node with text or other nodes.
Parameters |
|
---|
this.appendChild( parent, child ) → void
void
this.canHaveChildren( node ) → boolean
boolean
Determines if the given node can contain children, intended to be used for HTML generation.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.compareNodeOrder( node1, node2 ) → number
number
Compares the document order of two nodes, returning 0 if they are the same node, a negative number if node1 is before node2, and a positive number if node2 is before node1. Note that we compare the order the tags appear in the document so in the tree text the B node is considered to be before the I node.
Parameters |
| ||||||||
---|---|---|---|---|---|---|---|---|---|
Returns |
|
this.contains( parent, descendant ) → boolean
boolean
Whether a node contains another node.
Parameters |
| ||||||||
---|---|---|---|---|---|---|---|---|---|
Returns |
|
this.copyContents( target, source ) → void
void
Replaces child nodes of target
with child nodes of source
. This is
roughly equivalent to target.innerHTML = source.innerHTML
which is not
compatible with Trusted Types.
Parameters |
|
---|
this.createDom<T>( tagName, opt_attributes, ...var_args ) → R
R
Returns a dom node with a set of attributes. This function accepts varargs for subsequent nodes to be added. Subsequent nodes will be added to the first node as childNodes.
So:
createDom(goog.dom.TagName.DIV, null, createDom(goog.dom.TagName.P),
createDom(goog.dom.TagName.P));
would return a div with two child
paragraphs
An easy way to move all child nodes of an existing element to a new parent
element is:
createDom(goog.dom.TagName.DIV, null, oldElement.childNodes);
which will remove all child nodes from the old element and add them as
child nodes of the new DIV.
Parameters |
| ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Returns |
|
this.createElement<T>( name ) → R
R
Creates a new element.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.createTable( rows, columns, opt_fillWithNbsp ) → HTMLElement
HTMLElement
this.createTextNode( content ) → Text
Text
this.findCommonAncestor( ...var_args ) → (Node|null)
(Node|null)
Find the deepest common ancestor of the given nodes.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.findNode( root, p ) → (Node|null|undefined)
(Node|null|undefined)
Finds the first descendant node that matches the filter function. This does a depth first search.
Parameters |
| ||||||||
---|---|---|---|---|---|---|---|---|---|
Returns |
|
this.findNodes( root, p ) → (Array<(Node|null)>|null)
(Array<(Node|null)>|null)
this.flattenElement( element ) → (Element|null|undefined)
(Element|null|undefined)
Flattens an element. That is, removes it and replace it with its children.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getActiveElement( opt_doc ) → (Element|null)
(Element|null)
Determines the active element in the given document.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getAncestor( element, matcher, opt_includeNode, opt_maxSearchSteps ) → (Node|null)
(Node|null)
Walks up the DOM hierarchy returning the first ancestor that passes the matcher function.
Parameters |
| ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Returns |
|
this.getAncestorByClass( element, class, opt_maxSearchSteps ) → (Element|null)
(Element|null)
Walks up the DOM hierarchy returning the first ancestor that has the passed class name. If the passed element matches the specified criteria, the element itself is returned.
Parameters |
| ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Returns |
|
this.getAncestorByTagNameAndClass<T>( element, opt_tag, opt_class, opt_maxSearchSteps ) → ?
?
Walks up the DOM hierarchy returning the first ancestor that has the passed tag name and/or class name. If the passed element matches the specified criteria, the element itself is returned.
Parameters |
| ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Returns |
|
this.getCanvasContext2D( canvas ) → CanvasRenderingContext2D
CanvasRenderingContext2D
Gets '2d' context of a canvas. Shortcut for canvas.getContext('2d') with a type information.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getChildren( element ) → (Array<Element>|NodeList<Element>)
(Array<Element>|NodeList<Element>)
Returns an array containing just the element children of the given element.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getDocument() → Document
Document
Gets the document object being used by the dom library.
Parameters | None. | ||
---|---|---|---|
Returns |
|
this.getDocumentHeight() → number
number
Calculates the height of the document.
Parameters | None. | ||
---|---|---|---|
Returns |
|
this.getDocumentScroll() → goog.math.Coordinate
goog.math.Coordinate
Gets the document scroll distance as a coordinate object.
Parameters | None. | ||
---|---|---|---|
Returns |
|
this.getDocumentScrollElement() → Element
Element
this.getDomHelper( opt_node ) → goog.dom.DomHelper
goog.dom.DomHelper
Gets the dom helper object for the document where the element resides.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getElement( element ) → (Element|null)
(Element|null)
Alias for getElementById
. If a DOM node is passed in then we just
return that.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getElementByClass( className, opt_el ) → (Element|null)
(Element|null)
Returns the first element we find matching the provided class name.
Parameters |
| ||||||||
---|---|---|---|---|---|---|---|---|---|
Returns |
|
this.getElementByTagNameAndClass<T>( opt_tag, opt_class, opt_el ) → ?
?
Gets the first element matching the tag and the class.
Parameters |
| ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Returns |
|
this.getElementsByClass( className, opt_el ) → IArrayLike<Element>
IArrayLike<Element>
Returns an array of all the elements with the provided className.
Parameters |
| ||||||||
---|---|---|---|---|---|---|---|---|---|
Returns |
|
this.getElementsByTagName<T>( tagName, opt_parent ) → NodeList<(R|null)>
NodeList<(R|null)>
Gets elements by tag name.
Parameters |
| ||||||||
---|---|---|---|---|---|---|---|---|---|
Returns |
|
this.getElementsByTagNameAndClass<T>( opt_tag, opt_class, opt_el ) → IArrayLike<(R|null)>
IArrayLike<(R|null)>
Looks up elements by both tag and class name, using browser native functions
(querySelectorAll
, getElementsByTagName
or
getElementsByClassName
) where possible. The returned array is a live
NodeList or a static list depending on the code path taken.
Parameters |
| ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Returns |
|
this.getFirstElementChild( node ) → (Element|null)
(Element|null)
Returns the first child node that is an element.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getFrameContentDocument( iframe ) → Document
Document
Cross browser function for getting the document element of an iframe.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getFrameContentWindow( frame ) → (Window|null)
(Window|null)
Cross browser function for getting the window of a frame or iframe.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getLastElementChild( node ) → (Element|null)
(Element|null)
Returns the last child node that is an element.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getNextElementSibling( node ) → (Element|null)
(Element|null)
Returns the first next sibling that is an element.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getNextNode( node ) → (Node|null)
(Node|null)
Returns the next node in source order from the given node.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getNodeAtOffset( parent, offset, opt_result ) → (Node|null)
(Node|null)
Returns the node at a given offset in a parent node. If an object is provided for the optional third parameter, the node and the remainder of the offset will stored as properties of this object.
Parameters |
| ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Returns |
|
this.getNodeTextLength( node ) → number
number
Returns the text length of the text contained in a node, without markup. This is equivalent to the selection length if the node was selected, or the number of cursor movements to traverse the node. Images & BRs take one space. New lines are ignored.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getNodeTextOffset( node, opt_offsetParent ) → number
number
Returns the text offset of a node relative to one of its ancestors. The text
length is the same as the length calculated by
goog.dom.getNodeTextLength
.
Parameters |
| ||||||||
---|---|---|---|---|---|---|---|---|---|
Returns |
|
this.getOuterHtml( element ) → string
string
Gets the outerHTML of a node, which islike innerHTML, except that it actually contains the HTML of the node itself.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getOwnerDocument( node ) → Document
Document
Returns the owner document for a node.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getParentElement( element ) → (Element|null)
(Element|null)
Returns an element's parent, if it's an Element.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getPreviousElementSibling( node ) → (Element|null)
(Element|null)
Returns the first previous sibling that is an element.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getPreviousNode( node ) → (Node|null)
(Node|null)
Returns the previous node in source order from the given node.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getRequiredElement( id ) → Element
Element
Gets an element by id, asserting that the element is found.
This is used when an element is expected to exist, and should fail with an assertion error if it does not (if assertions are enabled).
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getRequiredElementByClass( className, opt_root ) → Element
Element
Ensures an element with the given className exists, and then returns the first element with the provided className.
Parameters |
| ||||||||
---|---|---|---|---|---|---|---|---|---|
Returns |
| ||||||||
Throws |
|
this.getTextContent( node ) → string
string
Returns the text contents of the current node, without markup. New lines are stripped and whitespace is collapsed, such that each character would be visible.
In browsers that support it, innerText is used. Other browsers attempt to simulate it via node traversal. Line breaks are canonicalized in IE.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getViewportSize( opt_window ) → goog.math.Size
goog.math.Size
Gets the dimensions of the viewport.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.getWindow() → Window
Window
Gets the window object associated with the document.
Parameters | None. | ||
---|---|---|---|
Returns |
|
this.insertChildAt( parent, child, index ) → void
void
Insert a child at a given index. If index is larger than the number of child nodes that the parent currently has, the node is inserted as the last child node.
Parameters |
|
---|
this.insertSiblingAfter( newNode, refNode ) → void
void
Inserts a new node after an existing reference node (i.e., as the next sibling). If the reference node has no parent, then does nothing.
Parameters |
|
---|
this.insertSiblingBefore( newNode, refNode ) → void
void
Inserts a new node before an existing reference node (i.e., as the previous sibling). If the reference node has no parent, then does nothing.
Parameters |
|
---|
this.isCss1CompatMode() → boolean
boolean
Returns true if the browser is in "CSS1-compatible" (standards-compliant) mode, false otherwise.
Parameters | None. | ||
---|---|---|---|
Returns |
|
this.isElement( obj ) → boolean
boolean
Whether the object looks like an Element.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.isFocusable( element ) → boolean
boolean
Returns true if the element can be focused, i.e. it has a tab index that allows it to receive keyboard focus (tabIndex >= 0), or it is an element that natively supports keyboard focus.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.isFocusableTabIndex( element ) → boolean
boolean
Returns true if the element has a tab index that allows it to receive keyboard focus (tabIndex >= 0), false otherwise. Note that some elements natively support keyboard focus, even if they have no tab index.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.isNodeLike( obj ) → boolean
boolean
Whether the object looks like a DOM node.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.isNodeList( val ) → boolean
boolean
this.isWindow( obj ) → boolean
boolean
Returns true if the specified value is a Window object. This includes the global window for HTML pages, and iframe windows.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.removeChildren( node ) → void
void
Removes all the child nodes on a DOM node.
Parameters |
|
---|
this.removeNode( node ) → (Node|null)
(Node|null)
Removes a node from its parent.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.replaceNode( newNode, oldNode ) → void
void
Replaces a node in the DOM tree. Will do nothing if oldNode
has no
parent.
Parameters |
|
---|
this.safeHtmlToNode( html ) → Node
Node
Converts an HTML into a node or a document fragment. A single Node is used if
html
only generates a single node. If html
generates multiple
nodes then these are put inside a DocumentFragment
. This is a safe
version of goog.dom.DomHelper#htmlToDocumentFragment
which is now
deleted.
Parameters |
| ||||
---|---|---|---|---|---|
Returns |
|
this.setDocument( document ) → void
void
this.setFocusableTabIndex( element, enable ) → void
void
Enables or disables keyboard focus support on the element via its tab index.
Only elements for which goog.dom.isFocusableTabIndex
returns true
(or elements that natively support keyboard focus, like form elements) can
receive keyboard focus. See http://go/tabindex for more info.
Parameters |
|
---|
this.setProperties( element, properties ) → void
void
Sets a number of properties on a node.
Parameters |
|
---|
this.setTextContent( node, text ) → void
void