goog.dom

Alias for getElement.

Alias for getElementsByTagNameAndClass.

Alias for createDom.

Appends a node with text or other nodes.

Appends a child to a 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 = goog.dom.createElement(goog.dom.TagName.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"
 

For more information, see: http://dev.w3.org/html5/markup/syntax.html#syntax-elements

TODO(user): Rename shouldAllowChildren() ?

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.

Creates a new Node from constant strings of HTML markup.

Whether a node contains another node.

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.

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

This function uses goog.dom.setProperties to set attributes: the opt_attributes parameter follows the same rules.

Creates a new element.

Create a table.

Creates a new text node.

Find the deepest common ancestor of the given nodes.

Finds the first descendant element (excluding root) that matches the filter function, using depth first search. Prefer using querySelector if the matching criteria can be expressed as a CSS selector.

Finds all the descendant elements (excluding root) that match the filter function, using depth first search. Prefer using querySelectorAll if the matching criteria can be expressed as a CSS selector.

Finds the first descendant node that matches the filter function, using depth first search. This function offers the most general purpose way of finding a matching element.

Prefer using querySelector if the matching criteria can be expressed as a CSS selector, or goog.dom.findElement if you would filter for nodeType == Node.ELEMENT_NODE.

Finds all the descendant nodes that match the filter function, using depth first search. This function offers the most general-purpose way of finding a set of matching elements.

Prefer using querySelectorAll if the matching criteria can be expressed as a CSS selector, or goog.dom.findElements if you would filter for nodeType == Node.ELEMENT_NODE.

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

Determines the active element in the given document.

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

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.

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.

Gets '2d' context of a canvas. Shortcut for canvas.getContext('2d') with a type information.

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

Gets the document object being used by the dom library.

Calculates the height of the document.

Calculates the height of the document of the given window.

Gets the document scroll distance as a coordinate object.

Gets the document scroll element.

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

Gets an element from the current document by element id.

If an Element is passed in, it is returned.

Returns the first element with the provided className.

Gets the first element matching the tag and the class.

Returns a static, array-like list of the elements with the provided className.

Gets elements by tag name.

Looks up elements by both tag and class name, using browser native functions (querySelectorAll, getElementsByTagName or getElementsByClassName) where possible. This function is a useful, if limited, way of collecting a list of DOM elements with certain characteristics. querySelectorAll offers a more powerful and general solution which allows matching on CSS3 selector expressions.

Note that tag names are case sensitive in the SVG namespace, and this function converts opt_tag to uppercase for comparisons. For queries in the SVG namespace you should use querySelector or querySelectorAll instead. https://bugzilla.mozilla.org/show_bug.cgi?id=963870 https://bugs.webkit.org/show_bug.cgi?id=83438

Returns the first child node that is an element.

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

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

Gets an HTML element from the current document by element id.

Returns the first element with the provided className and asserts that it is an HTML element.

Returns the last child node that is an element.

Returns the first next sibling that is an element.

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

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.

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.

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.

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

Returns the owner document for a node.

Gets the page scroll distance as a coordinate object.

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

Gives the current devicePixelRatio.

By default, this is the value of window.devicePixelRatio (which should be preferred if present).

If window.devicePixelRatio is not present, the ratio is calculated with window.matchMedia, if present. Otherwise, gives 1.0.

Some browsers (including Chrome) consider the browser zoom level in the pixel ratio, so the value may change across multiple calls.

Returns the first previous sibling that is an element.

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

Returns the text content of the current node, without markup.

Unlike getTextContent this method does not collapse whitespaces or normalize lines breaks.

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).

Ensures an element with the given className exists, and then returns the first element with the provided className.

Gets an HTML 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).

Ensures an element with the given className exists, and then returns the first element with the provided className after asserting that it is an HTML element.

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.

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 excluding 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.

Gets the window object associated with the given document.

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.

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.

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.

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

Whether the object looks like an Element.

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.

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.

Returns whether node is in a document or detached. Throws an error if node itself is a document. This specifically handles two cases beyond naive use of builtins: (1) it works correctly in IE, and (2) it works for elements from different documents/iframes. If neither of these considerations are relevant then a simple document.contains(node) may be used instead.

Whether the object looks like a DOM node.

Returns true if the object is a 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).

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

Removes all the child nodes on a DOM node.

Removes a node from its parent.

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

Converts HTML markup into a node. This is a safe version of goog.dom.htmlToDocumentFragment which is now deleted.

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.

Sets multiple properties, and sometimes attributes, on an element. Note that properties are simply object properties on the element instance, while attributes are visible in the DOM. Many properties map to attributes with the same names, some with different names, and there are also unmappable cases.

This method sets properties by default (which means that custom attributes are not supported). These are the exeptions (some of which is legacy):

• "style": Even though this is an attribute name, it is translated to a property, "style.cssText". Note that this property sanitizes and formats its value, unlike the attribute.
• "class": This is an attribute name, it is translated to the "className" property.
• "for": This is an attribute name, it is translated to the "htmlFor" property.
• Entries in goog.dom.DIRECT_ATTRIBUTE_MAP_ are set as attributes, this is probably due to browser quirks.
• "aria-", "data-": Always set as attributes, they have no property counterparts.

Sets the text content of a node, with cross-browser support.

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

Whether we know at compile time that the browser is in quirks mode.

Whether we know at compile time that the browser is in standards compliance mode.