goog.dom.DomHelper
Classgoog.dom.DomHelper(opt_document)
Create an instance of a DOM helper with a new document object.
opt_document
{Document
=}
.$
[deprecated]Deprecated. Use {@link goog.dom.DomHelper.prototype.getElement} instead.
Alias for {@code getElement}.
element
{string
|Element
}
Element
}
.$$
[deprecated]Deprecated. Use DomHelper getElementsByTagNameAndClass.
Alias for {@code getElementsByTagNameAndClass}.
opt_tag
{?string
=}
opt_class
{?string
=}
opt_el
{Element
=}
length
: number
}}
.$dom
[deprecated]Deprecated. Use {@link goog.dom.DomHelper.prototype.createDom} instead.
Alias for {@code createDom}.
tagName
{string
}
opt_attributes
{(Object
|string
)=}
var_args
{...goog.dom.Appendable
}
Element
}
.append
Appends a node with text or other nodes.
parent
{!Node
}
var_args
{...goog.dom.Appendable
}
.appendChild
Appends a child to a node.
parent
{Node
}
child
{Node
}
.canHaveChildren
Determines if the given node can contain children, intended to be used for HTML generation.
node
{Node
}
boolean
}
.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
}
node2
{Node
}
number
}
.contains
Whether a node contains another node.
parent
{Node
}
descendant
{Node
}
boolean
}
.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
}
opt_attributes
{Object
|string
=}
var_args
{...goog.dom.Appendable
}
Element
}
.createElement(name)
Creates a new element.
name
{string
}
Element
}
.createTable(rows, columns, opt_fillWithNbsp)
Create a table.
rows
{number
}
columns
{number
}
opt_fillWithNbsp
{boolean
=}
Element
}
.createTextNode(content)
Creates a new text node.
content
{string
}
Text
}
.findCommonAncestor
Find the deepest common ancestor of the given nodes.
var_args
{...Node
}
Node
}
.findNode
Finds the first descendant node that matches the filter function. This does a depth first search.
root
{Node
}
p
{function
(Node
) : boolean
}
Node
|undefined
}
.findNodes
Finds all the descendant nodes that matches the filter function. This does a depth first search.
root
{Node
}
p
{function
(Node
) : boolean
}
Array
.<Node
>}
.flattenElement
Flattens an element. That is, removes it and replace it with its children.
element
{Element
}
Element
|undefined
}
.getActiveElement(opt_doc)
Determines the active element in the given document.
opt_doc
{Document
=}
Element
}
.getAncestor
Walks up the DOM hierarchy returning the first ancestor that passes the matcher function.
element
{Node
}
matcher
{function
(Node
) : boolean
}
opt_includeNode
{boolean
=}
opt_maxSearchSteps
{number
=}
Node
}
.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
}
class
{string
}
Element
}
.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
}
opt_tag
{?(goog.dom.TagName
|string
)=}
opt_class
{?string
=}
Element
}
.getChildren
Returns an array containing just the element children of the given element.
element
{Element
}
Array
|NodeList
)}
.getCompatMode()
[deprecated]Deprecated. use goog.dom.DomHelper.prototype.isCss1CompatMode instead.
Returns the compatMode of the document.
string
}
.getDocument()
Gets the document object being used by the dom library.
Document
}
.getDocumentHeight()
Calculates the height of the document.
number
}
.getDocumentScroll()
Gets the document scroll distance as a coordinate object.
goog.math.Coordinate
}
.getDocumentScrollElement()
Gets the document scroll element.
Element
}
.getDomHelper
Gets the dom helper object for the document where the element resides.
opt_node
{Node
=}
goog.dom.DomHelper
}
.getElement(element)
Alias for {@code getElementById}. If a DOM node is passed in then we just return that.
element
{string
|Element
}
Element
}
.getElementByClass(className, opt_el)
Returns the first element we find matching the provided class name.
className
{string
}
opt_el
{(Element
|Document
)=}
Element
}
.getElementsByClass(className, opt_el)
Returns an array of all the elements with the provided className.
className
{string
}
opt_el
{Element
|Document
=}
length
: number
}}
.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
=}
opt_class
{?string
=}
opt_el
{(Document
|Element
)=}
length
: number
}}
.getFirstElementChild
Returns the first child node that is an element.
node
{Node
}
Element
}
.getFrameContentDocument
Cross browser function for getting the document element of an iframe.
iframe
{Element
}
Document
}
.getFrameContentWindow
Cross browser function for getting the window of a frame or iframe.
frame
{Element
}
Window
}
.getLastElementChild
Returns the last child node that is an element.
node
{Node
}
Element
}
.getNextElementSibling
Returns the first next sibling that is an element.
node
{Node
}
Element
}
.getNextNode
Returns the next node in source order from the given node.
node
{Node
}
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
}
offset
{number
}
opt_result
{Object
=}
Node
}
.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
}
number
}
.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
}
opt_offsetParent
{Node
=}
number
}
.getOuterHtml
Gets the outerHTML of a node, which islike innerHTML, except that it actually contains the HTML of the node itself.
element
{Element
}
string
}
.getOwnerDocument
Returns the owner document for a node.
node
{Node
}
Document
}
.getParentElement
Returns an element's parent, if it's an Element.
element
{Element
}
Element
}
.getPreviousElementSibling
Returns the first previous sibling that is an element.
node
{Node
}
Element
}
.getPreviousNode
Returns the previous node in source order from the given node.
node
{Node
}
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
}
string
}
.getViewportSize(opt_window)
Gets the dimensions of the viewport.
opt_window
{Window
=}
goog.math.Size
}
.getWindow()
Gets the window object associated with the document.
Window
}
.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
}
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
}
child
{Node
}
index
{number
}
.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
}
refNode
{Node
}
.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
}
refNode
{Node
}
.isCss1CompatMode()
Returns true if the browser is in "CSS1-compatible" (standards-compliant) mode, false otherwise.
boolean
}
.isElement
Whether the object looks like an Element.
obj
{*}
boolean
}
.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
}
boolean
}
.isNodeLike
Whether the object looks like a DOM node.
obj
{*}
boolean
}
.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
}
boolean
}
.isWindow
Returns true if the specified value is a Window object. This includes the global window for HTML pages, and iframe windows.
obj
{*}
boolean
}
.removeChildren
Removes all the child nodes on a DOM node.
node
{Node
}
.removeNode
Removes a node from its parent.
node
{Node
}
Node
}
.replaceNode
Replaces a node in the DOM tree. Will do nothing if {@code oldNode} has no parent.
newNode
{Node
}
oldNode
{Node
}
.setDocument(document)
Sets the document object.
document
{!Document
}
.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
}
enable
{boolean
}
.setProperties
Sets a number of properties on a node.
element
{Element
}
properties
{Object
}
.setTextContent
Cross browser function for setting the text content of an element.
element
{Element
}
text
{string
}