The goog.dom.DomHelper Class

goog.dom.DomHelper(opt_document)

Create an instance of a DOM helper with a new document object.

opt_document {Document=}
Document object to associate with this DOM helper.

.append

Appends a node with text or other nodes.

parent {!Node}
The node to append nodes to.
var_args {...goog.dom.Appendable}
The things to append to the node. If this is a Node it is appended as is. If this is a string then a text node is appended. If this is an array like object then fields 0 to length - 1 are appended.

.appendChild

Appends a child to a node.

parent {Node}
Parent.
child {Node}
Child.

.canHaveChildren

Determines if the given node can contain children, intended to be used for HTML generation.

node {Node}
The node to check.
returns {boolean}
Whether the node can contain children.

.compareNodeOrder

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.

node1 {Node}
The first node to compare.
node2 {Node}
The second node to compare.
returns {number}
0 if the nodes are the same node, a negative number if node1 is before node2, and a positive number if node2 is before node1.

.contains

Whether a node contains another node.

parent {Node}
The node that should contain the other node.
descendant {Node}
The node to test presence of.
returns {boolean}
Whether the parent node contains the descendent node.

.createDom(tagName, opt_attributes, var_args)

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('div', null, createDom('p'), createDom('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('div', null, oldElement.childNodes); which will remove all child nodes from the old element and add them as child nodes of the new DIV.

tagName {string}
Tag to create.
opt_attributes {Object|string=}
If object, then a map of name-value pairs for attributes. If a string, then this is the className of the new element.
var_args {...goog.dom.Appendable}
Further DOM nodes or strings for text nodes. If one of the var_args is an array or NodeList, its elements will be added as childNodes instead.
returns {!Element}
Reference to a DOM node.

.createElement(name)

Creates a new element.

name {string}
Tag name.
returns {!Element}
The new element.

.createTable(rows, columns, opt_fillWithNbsp)

Create a table.

rows {number}
The number of rows in the table. Must be >= 1.
columns {number}
The number of columns in the table. Must be >= 1.
opt_fillWithNbsp {boolean=}
If true, fills table entries with nsbps.
returns {!Element}
The created table.

.createTextNode(content)

Creates a new text node.

content {string}
Content.
returns {!Text}
The new text node.

.findCommonAncestor

Find the deepest common ancestor of the given nodes.

var_args {...Node}
The nodes to find a common ancestor of.
returns {Node}
The common ancestor of the nodes, or null if there is none. null will only be returned if two or more of the nodes are from different documents.

.findNode

Finds the first descendant node that matches the filter function. This does a depth first search.

root {Node}
The root of the tree to search.
p {function(Node) : boolean}
The filter function.
returns {Node|undefined}
The found node or undefined if none is found.

.findNodes

Finds all the descendant nodes that matches the filter function. This does a depth first search.

root {Node}
The root of the tree to search.
p {function(Node) : boolean}
The filter function.
returns {Array.<Node>}
The found nodes or an empty array if none are found.

.flattenElement

Flattens an element. That is, removes it and replace it with its children.

element {Element}
The element to flatten.
returns {Element|undefined}
The original element, detached from the document tree, sans children, or undefined if the element was already not in the document.

.getActiveElement(opt_doc)

Determines the active element in the given document.

opt_doc {Document=}
The document to look in.
returns {Element}
The active element.

.getAncestor

Walks up the DOM hierarchy returning the first ancestor that passes the matcher function.

element {Node}
The DOM node to start with.
matcher {function(Node) : boolean}
A function that returns true if the passed node matches the desired criteria.
opt_includeNode {boolean=}
If true, the node itself is included in the search (the first call to the matcher will pass startElement as the node to test).
opt_maxSearchSteps {number=}
Maximum number of levels to search up the dom.
returns {Node}
DOM node that matched the matcher, or null if there was no match.

.getAncestorByClass

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.

element {Node}
The DOM node to start with.
class {string}
The class name to match.
returns {Element}
The first ancestor that matches the passed criteria, or null if none match.

.getAncestorByTagNameAndClass

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.

element {Node}
The DOM node to start with.
opt_tag {?(goog.dom.TagName|string)=}
The tag name to match (or null/undefined to match only based on class name).
opt_class {?string=}
The class name to match (or null/undefined to match only based on tag name).
returns {Element}
The first ancestor that matches the passed criteria, or null if no match is found.

.getChildren

Returns an array containing just the element children of the given element.

element {Element}
The element whose element children we want.
returns {!(Array|NodeList)}
An array or array-like list of just the element children of the given element.

.getDocument()

Gets the document object being used by the dom library.

returns {!Document}
Document object.

.getDocumentHeight()

Calculates the height of the document.

returns {number}
The height of the document.

.getDocumentScroll()

Gets the document scroll distance as a coordinate object.

returns {!goog.math.Coordinate}
Object with properties 'x' and 'y'.

.getDocumentScrollElement()

Gets the document scroll element.

returns {Element}
Scrolling element.

.getDomHelper

Gets the dom helper object for the document where the element resides.

opt_node {Node=}
If present, gets the DomHelper for this node.
returns {!goog.dom.DomHelper}
The DomHelper.

.getElement(element)

Alias for {@code getElementById}. If a DOM node is passed in then we just return that.

element {string|Element}
Element ID or a DOM node.
returns {Element}
The element with the given ID, or the node passed in.

.getElementByClass(className, opt_el)

Returns the first element we find matching the provided class name.

className {string}
the name of the class to look for.
opt_el {(Element|Document)=}
Optional element to look in.
returns {Element}
The first item found with the class name provided.
@see
{goog.dom.query}

.getElementsByClass(className, opt_el)

Returns an array of all the elements with the provided className.

className {string}
the name of the class to look for.
opt_el {Element|Document=}
Optional element to look in.
returns {{length: number}}
The items found with the class name provided.
@see
{goog.dom.query}

.getElementsByTagNameAndClass(opt_tag, opt_class, opt_el)

Looks up elements by both tag and class name, using browser native functions ({@code querySelectorAll}, {@code getElementsByTagName} or {@code getElementsByClassName}) where possible. The returned array is a live NodeList or a static list depending on the code path taken.

opt_tag {?string=}
Element tag name or * for all tags.
opt_class {?string=}
Optional class name.
opt_el {(Document|Element)=}
Optional element to look in.
returns {{length: number}}
Array-like list of elements (only a length property and numerical indices are guaranteed to exist).
@see
goog.dom.query

.getFirstElementChild

Returns the first child node that is an element.

node {Node}
The node to get the first child element of.
returns {Element}
The first child node of {@code node} that is an element.

.getFrameContentDocument

Cross browser function for getting the document element of an iframe.

iframe {Element}
Iframe element.
returns {!Document}
The frame content document.

.getFrameContentWindow

Cross browser function for getting the window of a frame or iframe.

frame {Element}
Frame element.
returns {Window}
The window associated with the given frame.

.getLastElementChild

Returns the last child node that is an element.

node {Node}
The node to get the last child element of.
returns {Element}
The last child node of {@code node} that is an element.

.getNextElementSibling

Returns the first next sibling that is an element.

node {Node}
The node to get the next sibling element of.
returns {Element}
The next sibling of {@code node} that is an element.

.getNextNode

Returns the next node in source order from the given node.

node {Node}
The node.
returns {Node}
The next node in the DOM tree, or null if this was the last node.

.getNodeAtOffset

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.

parent {Node}
The parent node.
offset {number}
The offset into the parent node.
opt_result {Object=}
Object to be used to store the return value. The return value will be stored in the form {node: Node, remainder: number} if this object is provided.
returns {Node}
The node at the given offset.

.getNodeTextLength

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.

node {Node}
The node whose text content length is being calculated.
returns {number}
The length of {@code node}'s text content.

.getNodeTextOffset

Returns the text offset of a node relative to one of its ancestors. The text length is the same as the length calculated by {@code goog.dom.getNodeTextLength}.

node {Node}
The node whose offset is being calculated.
opt_offsetParent {Node=}
Defaults to the node's owner document's body.
returns {number}
The text offset.

.getOuterHtml

Gets the outerHTML of a node, which islike innerHTML, except that it actually contains the HTML of the node itself.

element {Element}
The element to get the HTML of.
returns {string}
The outerHTML of the given element.

.getOwnerDocument

Returns the owner document for a node.

node {Node}
The node to get the document for.
returns {!Document}
The document owning the node.

.getParentElement

Returns an element's parent, if it's an Element.

element {Element}
The DOM element.
returns {Element}
The parent, or null if not an Element.

.getPreviousElementSibling

Returns the first previous sibling that is an element.

node {Node}
The node to get the previous sibling element of.
returns {Element}
The first previous sibling of {@code node} that is an element.

.getPreviousNode

Returns the previous node in source order from the given node.

node {Node}
The node.
returns {Node}
The previous node in the DOM tree, or null if this was the first node.

.getTextContent

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.

node {Node}
The node from which we are getting content.
returns {string}
The text content.

.getViewportSize(opt_window)

Gets the dimensions of the viewport.

opt_window {Window=}
Optional window element to test. Defaults to the window of the Dom Helper.
returns {!goog.math.Size}
Object with values 'width' and 'height'.

.getWindow()

Gets the window object associated with the document.

returns {!Window}
The window associated with the given document.

.htmlToDocumentFragment(htmlString)

Converts an HTML string into a node or a document fragment. A single Node is used if the {@code htmlString} only generates a single node. If the {@code htmlString} generates multiple nodes then these are put inside a {@code DocumentFragment}.

htmlString {string}
The HTML string to convert.
returns {!Node}
The resulting node.

.insertChildAt

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.

parent {Element}
The element into which to insert the child.
child {Node}
The element to insert.
index {number}
The index at which to insert the new child node. Must not be negative.

.insertSiblingAfter

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.

newNode {Node}
Node to insert.
refNode {Node}
Reference node to insert after.

.insertSiblingBefore

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.

newNode {Node}
Node to insert.
refNode {Node}
Reference node to insert before.

.isCss1CompatMode()

Returns true if the browser is in "CSS1-compatible" (standards-compliant) mode, false otherwise.

returns {boolean}
True if in CSS1-compatible mode.

.isElement

Whether the object looks like an Element.

obj {*}
The object being tested for Element likeness.
returns {boolean}
Whether the object looks like an Element.

.isFocusableTabIndex

Returns true if the element has a tab index that allows it to receive keyboard focus (tabIndex >= 0), false otherwise. Note that form elements natively support keyboard focus, even if they have no tab index.

element {Element}
Element to check.
returns {boolean}
Whether the element has a tab index that allows keyboard focus.

.isNodeLike

Whether the object looks like a DOM node.

obj {*}
The object being tested for node likeness.
returns {boolean}
Whether the object looks like a DOM node.

.isNodeList

Returns true if the object is a {@code NodeList}. To qualify as a NodeList, the object must have a numeric length property and an item function (which has type 'string' on IE for some reason).

val {Object}
Object to test.
returns {boolean}
Whether the object is a NodeList.

.isWindow

Returns true if the specified value is a Window object. This includes the global window for HTML pages, and iframe windows.

obj {*}
Variable to test.
returns {boolean}
Whether the variable is a window.

.removeChildren

Removes all the child nodes on a DOM node.

node {Node}
Node to remove children from.

.removeNode

Removes a node from its parent.

node {Node}
The node to remove.
returns {Node}
The node removed if removed; else, null.

.replaceNode

Replaces a node in the DOM tree. Will do nothing if {@code oldNode} has no parent.

newNode {Node}
Node to insert.
oldNode {Node}
Node to replace.

.setDocument(document)

Sets the document object.

document {!Document}
Document object.

.setFocusableTabIndex

Enables or disables keyboard focus support on the element via its tab index. Only elements for which {@link 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.

element {Element}
Element whose tab index is to be changed.
enable {boolean}
Whether to set or remove a tab index on the element that supports keyboard focus.

.setProperties

Sets a number of properties on a node.

element {Element}
DOM node to set properties on.
properties {Object}
Hash of property:value pairs.

.setTextContent

Cross browser function for setting the text content of an element.

element {Element}
The element to change the text content of.
text {string}
The string that should replace the current element content with.