• index
• goog
• search: Go

The goog.dom Namespace

.ASSUME_QUIRKS_MODE

.ASSUME_STANDARDS_MODE

The goog.dom.AbstractMultiRange Class

Creates a new multi range with no properties. Do not use this constructor: use one of the goog.dom.Range.createFrom* methods instead. … more

The goog.dom.AbstractRange Class

Creates a new selection with no properties. Do not use this constructor - use one of the goog.dom.Range.from* methods instead. … more

.Appendable

Typedef for use with goog.dom.createDom and goog.dom.append.

@typedef

{Object|string|Array|NodeList}

The goog.dom.BrowserFeature Enum

Enum of browser capabilities. … more

The goog.dom.ControlRange Class

Create a new control selection with no properties. Do not use this constructor: use one of the goog.dom.Range.createFrom* methods instead. … more

The goog.dom.ControlRangeIterator Class

Subclass of goog.dom.TagIterator that iterates over a DOM range. It adds functions to determine the portion of each text node that is selected. … more

The goog.dom.DomHelper Class

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

The goog.dom.FontSizeMonitor Class

This class can be used to monitor changes in font size. Instances will dispatch a {@code goog.dom.FontSizeMonitor.EventType.CHANGE} event. Example usage:

var fms = new goog.dom.FontSizeMonitor();
goog.events.listen(fms, goog.dom.FontSizeMonitor.EventType.CHANGE,
    function(e) {
      alert('Font size was changed');
    });

The goog.dom.MultiRange Class

Creates a new multi part range with no properties. Do not use this constructor: use one of the goog.dom.Range.createFrom* methods instead. … more

The goog.dom.MultiRangeIterator Class

Subclass of goog.dom.TagIterator that iterates over a DOM range. It adds functions to determine the portion of each text node that is selected. … more

The goog.dom.NodeIterator Class

A DOM tree traversal iterator. Starting with the given node, the iterator walks the DOM in order, reporting events for each node. The iterator acts as a prefix iterator:

 <div>1<span>2</span>3</div>
 

<div>|1|<span>|2|</span>3|</div>

The goog.dom.NodeOffset Class

Object to store the offset from one node to another in a way that works on any similar DOM structure regardless of whether it is the same actual nodes. … more

The goog.dom.NodeType Enum

Enumeration for DOM node types (for reference) … more

The goog.dom.Range Namespace

… more

The goog.dom.RangeEndpoint Enum

Constants for selection endpoints. … more

The goog.dom.RangeIterator Class

Subclass of goog.dom.TagIterator that iterates over a DOM range. It adds functions to determine the portion of each text node that is selected. … more

The goog.dom.RangeType Enum

Types of ranges. … more

The goog.dom.SavedCaretRange Class

A struct for holding context about saved selections. This can be used to preserve the selection and restore while the DOM is manipulated, or through an asynchronous call. Use goog.dom.Range factory methods to obtain an {@see goog.dom.AbstractRange} instance, and use {@see goog.dom.AbstractRange#saveUsingCarets} to obtain a SavedCaretRange. For editor ranges under content-editable elements or design-mode iframes, prefer using {@see goog.editor.range.saveUsingNormalizedCarets}. … more

The goog.dom.SavedRange Class

Abstract interface for a saved range. … more

The goog.dom.TagIterator Class

A DOM tree traversal iterator. Starting with the given node, the iterator walks the DOM in order, reporting events for the start and end of Elements, and the presence of text nodes. For example:

 <div>1<span>2</span>3</div>
 

 <div>|1|<span>|2|</span>|3|</div>|
 

The goog.dom.TagName Enum

Enum of all html tag names specified by the W3C HTML4.01 and HTML5 specifications. … more

The goog.dom.TagWalkType Enum

There are three types of token:

1. {@code START_TAG} - The beginning of a tag.
2. {@code OTHER} - Any non-element node position.
3. {@code END_TAG} - The end of a tag.

The goog.dom.TextRange Class

Create a new text selection with no properties. Do not use this constructor: use one of the goog.dom.Range.createFrom* methods instead. … more

The goog.dom.TextRangeIterator Class

Subclass of goog.dom.TagIterator that iterates over a DOM range. It adds functions to determine the portion of each text node that is selected. … more

The goog.dom.ViewportSizeMonitor Class

This class can be used to monitor changes in the viewport size. Instances dispatch a {@link goog.events.EventType.RESIZE} event when the viewport size changes. Handlers can call {@link goog.dom.ViewportSizeMonitor#getSize} to get the new viewport size. Use this class if you want to execute resize/reflow logic each time the user resizes the browser window. This class is guaranteed to only dispatch {@code RESIZE} events when the pixel dimensions of the viewport change. (Internet Explorer fires resize events if any element on the page is resized, even if the viewport dimensions are unchanged, which can lead to infinite resize loops.) Example usage:

    var vsm = new goog.dom.ViewportSizeMonitor();
    goog.events.listen(vsm, goog.events.EventType.RESIZE, function(e) {
      alert('Viewport size changed to ' + vsm.getSize());
    });
  

The goog.dom.a11y Namespace

… more

The goog.dom.annotate Namespace

… more

.append(parent, var_args)

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(parent, child)

Appends a child to a node.

parent {Node}

Parent.

child {Node}

Child.

The goog.dom.browserrange Namespace

… more

.canHaveChildren(node)

Determines if the given node can contain children, intended to be used for HTML generation. IE natively supports node.canHaveChildren but has inconsistent behavior. Prior to IE8 the base tag allows children and in IE9 all nodes return true for canHaveChildren. In practice all non-IE browsers allow you to add children to any node, but the behavior is inconsistent:

   var a = document.createElement('br');
   a.appendChild(document.createTextNode('foo'));
   a.appendChild(document.createTextNode('bar'));
   console.log(a.childNodes.length);  // 2
   console.log(a.innerHTML);  // Chrome: "", IE9: "foobar", FF3.5: "foobar"
 

node {Node}

The node to check.

returns {boolean}

Whether the node can contain children.

The goog.dom.classes Namespace

… more

.classes_test

.compareNodeOrder(node1, node2)

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(parent, descendant)

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

tagName {string}

Tag to create.

opt_attributes {(Object|Array.<string>|string)=}

If object, then a map of name-value pairs for attributes. If a string, then this is the className of the new element. If an array, the elements will be joined together as the className of the new element.

var_args {...(Object|string|Array|NodeList)}

Further DOM nodes or strings for text nodes. If one of the var_args is an array or NodeList,i 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.

The goog.dom.dataset Namespace

… more

.dom_test

.findCommonAncestor(var_args)

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(root, p)

Finds the first descendant node that matches the filter function, using a depth first search. This function offers the most general purpose way of finding a matching element. You may also wish to consider {@code goog.dom.query} which can express many matching criteria using CSS selector expressions. These expressions often result in a more compact representation of the desired result.

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.

@see

goog.dom.query

.findNodes(root, p)

Finds all the descendant nodes that match the filter function, using a a depth first search. This function offers the most general-purpose way of finding a set of matching elements. You may also wish to consider {@code goog.dom.query} which can express many matching criteria using CSS selector expressions. These expressions often result in a more compact representation of the desired result.

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(element)

Flattens an element. That is, removes it and replace it with its children. Does nothing if the element is not in the document.

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 not in the document to begin with.

The goog.dom.forms Namespace

… more

The goog.dom.fullscreen Namespace

… more

.getActiveElement(doc)

Determines the active element in the given document.

doc {Document}

The document to look in.

returns {Element}

The active element.

.getAncestor(element, matcher, opt_includeNode, opt_maxSearchSteps)

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(element, className)

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.

className {string}

The class name to match.

returns {Element}

The first ancestor that matches the passed criteria, or null if none match.

.getAncestorByTagNameAndClass(element, opt_tag, opt_class)

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(element)

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 current document.

.getDocumentScroll()

Gets the document scroll distance as a coordinate object.

returns {!goog.math.Coordinate}

Object with values 'x' and 'y'.

.getDocumentScrollElement()

Gets the document scroll element.

returns {Element}

Scrolling element.

.getDomHelper(opt_element)

Gets the DomHelper object for the document where the element resides.

opt_element {(Node|Window)=}

If present, gets the DomHelper for this element.

returns {!goog.dom.DomHelper}

The DomHelper.

.getElement(element)

Alias for 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 with the provided className.

className {string}

the name of the class to look for.

opt_el {Element|Document=}

Optional element to look in.

returns {Element}

The first item 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 {(Document|Element)=}

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. This function is a useful, if limited, way of collecting a list of DOM elements with certain characteristics. {@code goog.dom.query} offers a more powerful and general solution which allows matching on CSS3 selector expressions, but at increased cost in code size. If all you need is particular tags belonging to a single class, this function is fast and sleek.

opt_tag {?string=}

Element tag name.

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(node)

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(frame)

Cross-browser function for getting the document element of a frame or iframe.

frame {Element}

Frame element.

returns {!Document}

The frame content document.

.getFrameContentWindow(frame)

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(node)

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(node)

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(node)

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(parent, offset, opt_result)

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(node)

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(node, opt_offsetParent)

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.

node {Node}

The node whose offset is being calculated.

opt_offsetParent {Node=}

The node relative to which the offset will be calculated. Defaults to the node's owner document's body.

returns {number}

The text offset.

.getOuterHtml(element)

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(node)

Returns the owner document for a node.

node {Node|Window}

The node to get the document for.

returns {!Document}

The document owning the node.

.getParentElement(element)

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(node)

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(node)

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.

.getRawTextContent(node)

Returns the text content of the current node, without markup. Unlike {@code getTextContent} this method does not collapse whitespaces or normalize lines breaks.

node {Node}

The node from which we are getting content.

returns {string}

The raw text content.

.getTextContent(node)

Returns the text content of the current node, without markup and invisible symbols. 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. Gecko Standards mode: docEl.clientWidth Width of viewport excluding scrollbar. win.innerWidth Width of viewport including scrollbar. body.clientWidth Width of body element. docEl.clientHeight Height of viewport excluding scrollbar. win.innerHeight Height of viewport including scrollbar. body.clientHeight Height of document. Gecko Backwards compatible mode: docEl.clientWidth Width of viewport excluding scrollbar. win.innerWidth Width of viewport including scrollbar. body.clientWidth Width of viewport excluding scrollbar. docEl.clientHeight Height of document. win.innerHeight Height of viewport including scrollbar. body.clientHeight Height of viewport excluding scrollbar. IE6/7 Standards mode: docEl.clientWidth Width of viewport excluding scrollbar. win.innerWidth Undefined. body.clientWidth Width of body element. docEl.clientHeight Height of viewport excluding scrollbar. win.innerHeight Undefined. body.clientHeight Height of document element. IE5 + IE6/7 Backwards compatible mode: docEl.clientWidth 0. win.innerWidth Undefined. body.clientWidth Width of viewport excluding scrollbar. docEl.clientHeight 0. win.innerHeight Undefined. body.clientHeight Height of viewport excluding scrollbar. Opera 9 Standards and backwards compatible mode: docEl.clientWidth Width of viewport excluding scrollbar. win.innerWidth Width of viewport including scrollbar. body.clientWidth Width of viewport excluding scrollbar. docEl.clientHeight Height of document. win.innerHeight Height of viewport including scrollbar. body.clientHeight Height of viewport excluding scrollbar. WebKit: Safari 2 docEl.clientHeight Same as scrollHeight. docEl.clientWidth Same as innerWidth. win.innerWidth Width of viewport excluding scrollbar. win.innerHeight Height of the viewport including scrollbar. frame.innerHeight Height of the viewport exluding scrollbar. Safari 3 (tested in 522) docEl.clientWidth Width of viewport excluding scrollbar. docEl.clientHeight Height of viewport excluding scrollbar in strict mode. body.clientHeight Height of viewport excluding scrollbar in quirks mode.

opt_window {Window=}

Optional window element to test.

returns {!goog.math.Size}

Object with values 'width' and 'height'.

.getWindow(opt_doc)

Gets the window object associated with the given document.

opt_doc {Document=}

Document object to get window for.

returns {!Window}

The window associated with the given document.

.htmlToDocumentFragment(htmlString)

Converts an HTML string into a document fragment. The string must be sanitized in order to avoid cross-site scripting. For example {@code goog.dom.htmlToDocumentFragment('<img src=x onerror=alert(0)>')} triggers an alert in all browsers, even if the returned document fragment is thrown away immediately.

htmlString {string}

The HTML string to convert.

returns {!Node}

The resulting document fragment.

The goog.dom.iframe Namespace

… more

.insertChildAt(parent, child, index)

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(newNode, refNode)

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(newNode, refNode)

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(obj)

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(element)

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.

@see

http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/

.isNodeLike(obj)

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(val)

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(obj)

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.

The goog.dom.iter Namespace

… more

The goog.dom.pattern Namespace

… more

.query

Returns nodes which match the given CSS3 selector, searching the entire document by default but optionally taking a node to scope the search by. dojo.query() is the swiss army knife of DOM node manipulation in Dojo. Much like Prototype's "$$" (bling-bling) function or JQuery's "$" function, dojo.query provides robust, high-performance CSS-based node selector support with the option of scoping searches to a particular sub-tree of a document. Supported Selectors: -------------------- dojo.query() supports a rich set of CSS3 selectors, including: * class selectors (e.g., `.foo`) * node type selectors like `span` * ` ` descendant selectors * `>` child element selectors * `#foo` style ID selectors * `*` universal selector * `~`, the immediately preceded-by sibling selector * `+`, the preceded-by sibling selector * attribute queries: | * `[foo]` attribute presence selector | * `[foo='bar']` attribute value exact match | * `[foo~='bar']` attribute value list item match | * `[foo^='bar']` attribute start match | * `[foo$='bar']` attribute end match | * `[foo*='bar']` attribute substring match * `:first-child`, `:last-child` positional selectors * `:empty` content empty selector * `:empty` content empty selector * `:nth-child(n)`, `:nth-child(2n+1)` style positional calculations * `:nth-child(even)`, `:nth-child(odd)` positional selectors * `:not(...)` negation pseudo selectors Any legal combination of these selectors will work with `dojo.query()`, including compound selectors ("," delimited). Very complex and useful searches can be constructed with this palette of selectors. Unsupported Selectors: ---------------------- While dojo.query handles many CSS3 selectors, some fall outside of what's reasonable for a programmatic node querying engine to handle. Currently unsupported selectors include: * namespace-differentiated selectors of any form * all `::` pseudo-element selectors * certain pseudo-selectors which don't get a lot of day-to-day use: | * `:root`, `:lang()`, `:target`, `:focus` * all visual and state selectors: | * `:root`, `:active`, `:hover`, `:visited`, `:link`, `:enabled`, `:disabled`, `:checked` * `:*-of-type` pseudo selectors dojo.query and XML Documents: ----------------------------- `dojo.query` currently only supports searching XML documents whose tags and attributes are 100% lower-case. This is a known limitation and will [be addressed soon] (http://trac.dojotoolkit.org/ticket/3866) Non-selector Queries: --------------------- If something other than a String is passed for the query, `dojo.query` will return a new array constructed from that parameter alone and all further processing will stop. This means that if you have a reference to a node or array or nodes, you can quickly construct a new array of nodes from the original by calling `dojo.query(node)` or `dojo.query(array)`. example: search the entire document for elements with the class "foo": | dojo.query(".foo"); these elements will match: | | |