accessibility-developer-tools
Version:
This is a library of accessibility-related testing and utility code.
1,493 lines (1,311 loc) • 108 kB
JavaScript
// Copyright 2006 The Closure Library Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS-IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
/**
* @fileoverview Utilities for manipulating the browser's Document Object Model
* Inspiration taken *heavily* from mochikit (http://mochikit.com/).
*
* You can use {@link goog.dom.DomHelper} to create new dom helpers that refer
* to a different document object. This is useful if you are working with
* frames or multiple windows.
*
* @author arv@google.com (Erik Arvidsson)
*/
// TODO(arv): Rename/refactor getTextContent and getRawTextContent. The problem
// is that getTextContent should mimic the DOM3 textContent. We should add a
// getInnerText (or getText) which tries to return the visible text, innerText.
goog.provide('goog.dom');
goog.provide('goog.dom.Appendable');
goog.provide('goog.dom.DomHelper');
goog.require('goog.array');
goog.require('goog.asserts');
goog.require('goog.dom.BrowserFeature');
goog.require('goog.dom.NodeType');
goog.require('goog.dom.TagName');
goog.require('goog.dom.safe');
goog.require('goog.html.SafeHtml');
goog.require('goog.html.uncheckedconversions');
goog.require('goog.math.Coordinate');
goog.require('goog.math.Size');
goog.require('goog.object');
goog.require('goog.string');
goog.require('goog.string.Unicode');
goog.require('goog.userAgent');
/**
* @define {boolean} Whether we know at compile time that the browser is in
* quirks mode.
*/
goog.define('goog.dom.ASSUME_QUIRKS_MODE', false);
/**
* @define {boolean} Whether we know at compile time that the browser is in
* standards compliance mode.
*/
goog.define('goog.dom.ASSUME_STANDARDS_MODE', false);
/**
* Whether we know the compatibility mode at compile time.
* @type {boolean}
* @private
*/
goog.dom.COMPAT_MODE_KNOWN_ =
goog.dom.ASSUME_QUIRKS_MODE || goog.dom.ASSUME_STANDARDS_MODE;
/**
* Gets the DomHelper object for the document where the element resides.
* @param {(Node|Window)=} opt_element If present, gets the DomHelper for this
* element.
* @return {!goog.dom.DomHelper} The DomHelper.
*/
goog.dom.getDomHelper = function(opt_element) {
return opt_element ?
new goog.dom.DomHelper(goog.dom.getOwnerDocument(opt_element)) :
(goog.dom.defaultDomHelper_ ||
(goog.dom.defaultDomHelper_ = new goog.dom.DomHelper()));
};
/**
* Cached default DOM helper.
* @type {!goog.dom.DomHelper|undefined}
* @private
*/
goog.dom.defaultDomHelper_;
/**
* Gets the document object being used by the dom library.
* @return {!Document} Document object.
*/
goog.dom.getDocument = function() {
return document;
};
/**
* Gets an element from the current document by element id.
*
* If an Element is passed in, it is returned.
*
* @param {string|Element} element Element ID or a DOM node.
* @return {Element} The element with the given ID, or the node passed in.
*/
goog.dom.getElement = function(element) {
return goog.dom.getElementHelper_(document, element);
};
/**
* Gets an element by id from the given document (if present).
* If an element is given, it is returned.
* @param {!Document} doc
* @param {string|Element} element Element ID or a DOM node.
* @return {Element} The resulting element.
* @private
*/
goog.dom.getElementHelper_ = function(doc, element) {
return goog.isString(element) ? doc.getElementById(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).
*
* @param {string} id Element ID.
* @return {!Element} The element with the given ID, if it exists.
*/
goog.dom.getRequiredElement = function(id) {
return goog.dom.getRequiredElementHelper_(document, id);
};
/**
* Helper function for getRequiredElementHelper functions, both static and
* on DomHelper. Asserts the element with the given id exists.
* @param {!Document} doc
* @param {string} id
* @return {!Element} The element with the given ID, if it exists.
* @private
*/
goog.dom.getRequiredElementHelper_ = function(doc, id) {
// To prevent users passing in Elements as is permitted in getElement().
goog.asserts.assertString(id);
var element = goog.dom.getElementHelper_(doc, id);
element =
goog.asserts.assertElement(element, 'No element found with id: ' + id);
return element;
};
/**
* Alias for getElement.
* @param {string|Element} element Element ID or a DOM node.
* @return {Element} The element with the given ID, or the node passed in.
* @deprecated Use {@link goog.dom.getElement} instead.
*/
goog.dom.$ = goog.dom.getElement;
/**
* Gets elements by tag name.
* @param {!goog.dom.TagName<T>} tagName
* @param {(!Document|!Element)=} opt_parent Parent element or document where to
* look for elements. Defaults to document.
* @return {!NodeList<R>} List of elements. The members of the list are
* {!Element} if tagName is not a member of goog.dom.TagName or more
* specific types if it is (e.g. {!HTMLAnchorElement} for
* goog.dom.TagName.A).
* @template T
* @template R := cond(isUnknown(T), 'Element', T) =:
*/
goog.dom.getElementsByTagName = function(tagName, opt_parent) {
var parent = opt_parent || document;
return parent.getElementsByTagName(String(tagName));
};
/**
* 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.
*
* 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
*
* @see {goog.dom.query}
*
* @param {(string|?goog.dom.TagName<T>)=} opt_tag Element tag name.
* @param {?string=} opt_class Optional class name.
* @param {(Document|Element)=} opt_el Optional element to look in.
* @return {!IArrayLike<R>} Array-like list of elements (only a length property
* and numerical indices are guaranteed to exist). The members of the array
* are {!Element} if opt_tag is not a member of goog.dom.TagName or more
* specific types if it is (e.g. {!HTMLAnchorElement} for
* goog.dom.TagName.A).
* @template T
* @template R := cond(isUnknown(T), 'Element', T) =:
*/
goog.dom.getElementsByTagNameAndClass = function(opt_tag, opt_class, opt_el) {
return goog.dom.getElementsByTagNameAndClass_(
document, opt_tag, opt_class, opt_el);
};
/**
* Returns a static, array-like list of the elements with the provided
* className.
* @see {goog.dom.query}
* @param {string} className the name of the class to look for.
* @param {(Document|Element)=} opt_el Optional element to look in.
* @return {!IArrayLike<!Element>} The items found with the class name provided.
*/
goog.dom.getElementsByClass = function(className, opt_el) {
var parent = opt_el || document;
if (goog.dom.canUseQuerySelector_(parent)) {
return parent.querySelectorAll('.' + className);
}
return goog.dom.getElementsByTagNameAndClass_(
document, '*', className, opt_el);
};
/**
* Returns the first element with the provided className.
* @see {goog.dom.query}
* @param {string} className the name of the class to look for.
* @param {Element|Document=} opt_el Optional element to look in.
* @return {Element} The first item with the class name provided.
*/
goog.dom.getElementByClass = function(className, opt_el) {
var parent = opt_el || document;
var retVal = null;
if (parent.getElementsByClassName) {
retVal = parent.getElementsByClassName(className)[0];
} else if (goog.dom.canUseQuerySelector_(parent)) {
retVal = parent.querySelector('.' + className);
} else {
retVal = goog.dom.getElementsByTagNameAndClass_(
document, '*', className, opt_el)[0];
}
return retVal || null;
};
/**
* Ensures an element with the given className exists, and then returns the
* first element with the provided className.
* @see {goog.dom.query}
* @param {string} className the name of the class to look for.
* @param {!Element|!Document=} opt_root Optional element or document to look
* in.
* @return {!Element} The first item with the class name provided.
* @throws {goog.asserts.AssertionError} Thrown if no element is found.
*/
goog.dom.getRequiredElementByClass = function(className, opt_root) {
var retValue = goog.dom.getElementByClass(className, opt_root);
return goog.asserts.assert(
retValue, 'No element found with className: ' + className);
};
/**
* Prefer the standardized (http://www.w3.org/TR/selectors-api/), native and
* fast W3C Selectors API.
* @param {!(Element|Document)} parent The parent document object.
* @return {boolean} whether or not we can use parent.querySelector* APIs.
* @private
*/
goog.dom.canUseQuerySelector_ = function(parent) {
return !!(parent.querySelectorAll && parent.querySelector);
};
/**
* Helper for {@code getElementsByTagNameAndClass}.
* @param {!Document} doc The document to get the elements in.
* @param {(string|?goog.dom.TagName<T>)=} opt_tag Element tag name.
* @param {?string=} opt_class Optional class name.
* @param {(Document|Element)=} opt_el Optional element to look in.
* @return {!IArrayLike<R>} Array-like list of elements (only a length property
* and numerical indices are guaranteed to exist). The members of the array
* are {!Element} if opt_tag is not a member of goog.dom.TagName or more
* specific types if it is (e.g. {!HTMLAnchorElement} for
* goog.dom.TagName.A).
* @template T
* @template R := cond(isUnknown(T), 'Element', T) =:
* @private
*/
goog.dom.getElementsByTagNameAndClass_ = function(
doc, opt_tag, opt_class, opt_el) {
var parent = opt_el || doc;
var tagName =
(opt_tag && opt_tag != '*') ? String(opt_tag).toUpperCase() : '';
if (goog.dom.canUseQuerySelector_(parent) && (tagName || opt_class)) {
var query = tagName + (opt_class ? '.' + opt_class : '');
return parent.querySelectorAll(query);
}
// Use the native getElementsByClassName if available, under the assumption
// that even when the tag name is specified, there will be fewer elements to
// filter through when going by class than by tag name
if (opt_class && parent.getElementsByClassName) {
var els = parent.getElementsByClassName(opt_class);
if (tagName) {
var arrayLike = {};
var len = 0;
// Filter for specific tags if requested.
for (var i = 0, el; el = els[i]; i++) {
if (tagName == el.nodeName) {
arrayLike[len++] = el;
}
}
arrayLike.length = len;
return /** @type {!IArrayLike<!Element>} */ (arrayLike);
} else {
return els;
}
}
var els = parent.getElementsByTagName(tagName || '*');
if (opt_class) {
var arrayLike = {};
var len = 0;
for (var i = 0, el; el = els[i]; i++) {
var className = el.className;
// Check if className has a split function since SVG className does not.
if (typeof className.split == 'function' &&
goog.array.contains(className.split(/\s+/), opt_class)) {
arrayLike[len++] = el;
}
}
arrayLike.length = len;
return /** @type {!IArrayLike<!Element>} */ (arrayLike);
} else {
return els;
}
};
/**
* Alias for {@code getElementsByTagNameAndClass}.
* @param {(string|?goog.dom.TagName<T>)=} opt_tag Element tag name.
* @param {?string=} opt_class Optional class name.
* @param {Element=} opt_el Optional element to look in.
* @return {!IArrayLike<R>} Array-like list of elements (only a length property
* and numerical indices are guaranteed to exist). The members of the array
* are {!Element} if opt_tag is not a member of goog.dom.TagName or more
* specific types if it is (e.g. {!HTMLAnchorElement} for
* goog.dom.TagName.A).
* @template T
* @template R := cond(isUnknown(T), 'Element', T) =:
* @deprecated Use {@link goog.dom.getElementsByTagNameAndClass} instead.
*/
goog.dom.$$ = goog.dom.getElementsByTagNameAndClass;
/**
* 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 {@see 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.
*
* @param {Element} element DOM node to set properties on.
* @param {Object} properties Hash of property:value pairs.
*/
goog.dom.setProperties = function(element, properties) {
goog.object.forEach(properties, function(val, key) {
if (key == 'style') {
element.style.cssText = val;
} else if (key == 'class') {
element.className = val;
} else if (key == 'for') {
element.htmlFor = val;
} else if (goog.dom.DIRECT_ATTRIBUTE_MAP_.hasOwnProperty(key)) {
element.setAttribute(goog.dom.DIRECT_ATTRIBUTE_MAP_[key], val);
} else if (
goog.string.startsWith(key, 'aria-') ||
goog.string.startsWith(key, 'data-')) {
element.setAttribute(key, val);
} else {
element[key] = val;
}
});
};
/**
* Map of attributes that should be set using
* element.setAttribute(key, val) instead of element[key] = val. Used
* by goog.dom.setProperties.
*
* @private {!Object<string, string>}
* @const
*/
goog.dom.DIRECT_ATTRIBUTE_MAP_ = {
'cellpadding': 'cellPadding',
'cellspacing': 'cellSpacing',
'colspan': 'colSpan',
'frameborder': 'frameBorder',
'height': 'height',
'maxlength': 'maxLength',
'nonce': 'nonce',
'role': 'role',
'rowspan': 'rowSpan',
'type': 'type',
'usemap': 'useMap',
'valign': 'vAlign',
'width': 'width'
};
/**
* 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.
*
* @param {Window=} opt_window Optional window element to test.
* @return {!goog.math.Size} Object with values 'width' and 'height'.
*/
goog.dom.getViewportSize = function(opt_window) {
// TODO(arv): This should not take an argument
return goog.dom.getViewportSize_(opt_window || window);
};
/**
* Helper for {@code getViewportSize}.
* @param {Window} win The window to get the view port size for.
* @return {!goog.math.Size} Object with values 'width' and 'height'.
* @private
*/
goog.dom.getViewportSize_ = function(win) {
var doc = win.document;
var el = goog.dom.isCss1CompatMode_(doc) ? doc.documentElement : doc.body;
return new goog.math.Size(el.clientWidth, el.clientHeight);
};
/**
* Calculates the height of the document.
*
* @return {number} The height of the current document.
*/
goog.dom.getDocumentHeight = function() {
return goog.dom.getDocumentHeight_(window);
};
/**
* Calculates the height of the document of the given window.
*
* @param {!Window} win The window whose document height to retrieve.
* @return {number} The height of the document of the given window.
*/
goog.dom.getDocumentHeightForWindow = function(win) {
return goog.dom.getDocumentHeight_(win);
};
/**
* Calculates the height of the document of the given window.
*
* Function code copied from the opensocial gadget api:
* gadgets.window.adjustHeight(opt_height)
*
* @private
* @param {!Window} win The window whose document height to retrieve.
* @return {number} The height of the document of the given window.
*/
goog.dom.getDocumentHeight_ = function(win) {
// NOTE(eae): This method will return the window size rather than the document
// size in webkit quirks mode.
var doc = win.document;
var height = 0;
if (doc) {
// Calculating inner content height is hard and different between
// browsers rendering in Strict vs. Quirks mode. We use a combination of
// three properties within document.body and document.documentElement:
// - scrollHeight
// - offsetHeight
// - clientHeight
// These values differ significantly between browsers and rendering modes.
// But there are patterns. It just takes a lot of time and persistence
// to figure out.
var body = doc.body;
var docEl = /** @type {!HTMLElement} */ (doc.documentElement);
if (!(docEl && body)) {
return 0;
}
// Get the height of the viewport
var vh = goog.dom.getViewportSize_(win).height;
if (goog.dom.isCss1CompatMode_(doc) && docEl.scrollHeight) {
// In Strict mode:
// The inner content height is contained in either:
// document.documentElement.scrollHeight
// document.documentElement.offsetHeight
// Based on studying the values output by different browsers,
// use the value that's NOT equal to the viewport height found above.
height =
docEl.scrollHeight != vh ? docEl.scrollHeight : docEl.offsetHeight;
} else {
// In Quirks mode:
// documentElement.clientHeight is equal to documentElement.offsetHeight
// except in IE. In most browsers, document.documentElement can be used
// to calculate the inner content height.
// However, in other browsers (e.g. IE), document.body must be used
// instead. How do we know which one to use?
// If document.documentElement.clientHeight does NOT equal
// document.documentElement.offsetHeight, then use document.body.
var sh = docEl.scrollHeight;
var oh = docEl.offsetHeight;
if (docEl.clientHeight != oh) {
sh = body.scrollHeight;
oh = body.offsetHeight;
}
// Detect whether the inner content height is bigger or smaller
// than the bounding box (viewport). If bigger, take the larger
// value. If smaller, take the smaller value.
if (sh > vh) {
// Content is larger
height = sh > oh ? sh : oh;
} else {
// Content is smaller
height = sh < oh ? sh : oh;
}
}
}
return height;
};
/**
* Gets the page scroll distance as a coordinate object.
*
* @param {Window=} opt_window Optional window element to test.
* @return {!goog.math.Coordinate} Object with values 'x' and 'y'.
* @deprecated Use {@link goog.dom.getDocumentScroll} instead.
*/
goog.dom.getPageScroll = function(opt_window) {
var win = opt_window || goog.global || window;
return goog.dom.getDomHelper(win.document).getDocumentScroll();
};
/**
* Gets the document scroll distance as a coordinate object.
*
* @return {!goog.math.Coordinate} Object with values 'x' and 'y'.
*/
goog.dom.getDocumentScroll = function() {
return goog.dom.getDocumentScroll_(document);
};
/**
* Helper for {@code getDocumentScroll}.
*
* @param {!Document} doc The document to get the scroll for.
* @return {!goog.math.Coordinate} Object with values 'x' and 'y'.
* @private
*/
goog.dom.getDocumentScroll_ = function(doc) {
var el = goog.dom.getDocumentScrollElement_(doc);
var win = goog.dom.getWindow_(doc);
if (goog.userAgent.IE && goog.userAgent.isVersionOrHigher('10') &&
win.pageYOffset != el.scrollTop) {
// The keyboard on IE10 touch devices shifts the page using the pageYOffset
// without modifying scrollTop. For this case, we want the body scroll
// offsets.
return new goog.math.Coordinate(el.scrollLeft, el.scrollTop);
}
return new goog.math.Coordinate(
win.pageXOffset || el.scrollLeft, win.pageYOffset || el.scrollTop);
};
/**
* Gets the document scroll element.
* @return {!Element} Scrolling element.
*/
goog.dom.getDocumentScrollElement = function() {
return goog.dom.getDocumentScrollElement_(document);
};
/**
* Helper for {@code getDocumentScrollElement}.
* @param {!Document} doc The document to get the scroll element for.
* @return {!Element} Scrolling element.
* @private
*/
goog.dom.getDocumentScrollElement_ = function(doc) {
// Old WebKit needs body.scrollLeft in both quirks mode and strict mode. We
// also default to the documentElement if the document does not have a body
// (e.g. a SVG document).
// Uses http://dev.w3.org/csswg/cssom-view/#dom-document-scrollingelement to
// avoid trying to guess about browser behavior from the UA string.
if (doc.scrollingElement) {
return doc.scrollingElement;
}
if (!goog.userAgent.WEBKIT && goog.dom.isCss1CompatMode_(doc)) {
return doc.documentElement;
}
return doc.body || doc.documentElement;
};
/**
* Gets the window object associated with the given document.
*
* @param {Document=} opt_doc Document object to get window for.
* @return {!Window} The window associated with the given document.
*/
goog.dom.getWindow = function(opt_doc) {
// TODO(arv): This should not take an argument.
return opt_doc ? goog.dom.getWindow_(opt_doc) : window;
};
/**
* Helper for {@code getWindow}.
*
* @param {!Document} doc Document object to get window for.
* @return {!Window} The window associated with the given document.
* @private
*/
goog.dom.getWindow_ = function(doc) {
return doc.parentWindow || doc.defaultView;
};
/**
* 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:
* <code>createDom(goog.dom.TagName.DIV, null, createDom(goog.dom.TagName.P), createDom(goog.dom.TagName.P));</code>
* would return a div with two child paragraphs
*
* For passing properties, please see {@link goog.dom.setProperties} for more
* information.
*
* @param {string|!goog.dom.TagName<T>} tagName Tag to create.
* @param {(Object|Array<string>|string)=} opt_properties If object, then a map
* of name-value pairs for properties. 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.
* @param {...(Object|string|Array|NodeList)} var_args 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.
* @return {R} Reference to a DOM node. The return type is {!Element} if tagName
* is a string or a more specific type if it is a member of
* goog.dom.TagName (e.g. {!HTMLAnchorElement} for goog.dom.TagName.A).
* @template T
* @template R := cond(isUnknown(T), 'Element', T) =:
*/
goog.dom.createDom = function(tagName, opt_properties, var_args) {
return goog.dom.createDom_(document, arguments);
};
/**
* Helper for {@code createDom}.
* @param {!Document} doc The document to create the DOM in.
* @param {!Arguments} args Argument object passed from the callers. See
* {@code goog.dom.createDom} for details.
* @return {!Element} Reference to a DOM node.
* @private
*/
goog.dom.createDom_ = function(doc, args) {
var tagName = String(args[0]);
var attributes = args[1];
// Internet Explorer is dumb:
// name: https://msdn.microsoft.com/en-us/library/ms534184(v=vs.85).aspx
// type: https://msdn.microsoft.com/en-us/library/ms534700(v=vs.85).aspx
// Also does not allow setting of 'type' attribute on 'input' or 'button'.
if (!goog.dom.BrowserFeature.CAN_ADD_NAME_OR_TYPE_ATTRIBUTES && attributes &&
(attributes.name || attributes.type)) {
var tagNameArr = ['<', tagName];
if (attributes.name) {
tagNameArr.push(' name="', goog.string.htmlEscape(attributes.name), '"');
}
if (attributes.type) {
tagNameArr.push(' type="', goog.string.htmlEscape(attributes.type), '"');
// Clone attributes map to remove 'type' without mutating the input.
var clone = {};
goog.object.extend(clone, attributes);
// JSCompiler can't see how goog.object.extend added this property,
// because it was essentially added by reflection.
// So it needs to be quoted.
delete clone['type'];
attributes = clone;
}
tagNameArr.push('>');
tagName = tagNameArr.join('');
}
var element = doc.createElement(tagName);
if (attributes) {
if (goog.isString(attributes)) {
element.className = attributes;
} else if (goog.isArray(attributes)) {
element.className = attributes.join(' ');
} else {
goog.dom.setProperties(element, attributes);
}
}
if (args.length > 2) {
goog.dom.append_(doc, element, args, 2);
}
return element;
};
/**
* Appends a node with text or other nodes.
* @param {!Document} doc The document to create new nodes in.
* @param {!Node} parent The node to append nodes to.
* @param {!Arguments} args The values to add. See {@code goog.dom.append}.
* @param {number} startIndex The index of the array to start from.
* @private
*/
goog.dom.append_ = function(doc, parent, args, startIndex) {
function childHandler(child) {
// TODO(user): More coercion, ala MochiKit?
if (child) {
parent.appendChild(
goog.isString(child) ? doc.createTextNode(child) : child);
}
}
for (var i = startIndex; i < args.length; i++) {
var arg = args[i];
// TODO(attila): Fix isArrayLike to return false for a text node.
if (goog.isArrayLike(arg) && !goog.dom.isNodeLike(arg)) {
// If the argument is a node list, not a real array, use a clone,
// because forEach can't be used to mutate a NodeList.
goog.array.forEach(
goog.dom.isNodeList(arg) ? goog.array.toArray(arg) : arg,
childHandler);
} else {
childHandler(arg);
}
}
};
/**
* Alias for {@code createDom}.
* @param {string|!goog.dom.TagName<T>} tagName Tag to create.
* @param {(string|Object)=} opt_properties If object, then a map of name-value
* pairs for properties. If a string, then this is the className of the new
* element.
* @param {...(Object|string|Array|NodeList)} var_args Further DOM nodes or
* strings for text nodes. If one of the var_args is an array, its
* children will be added as childNodes instead.
* @return {R} Reference to a DOM node. The return type is {!Element} if tagName
* is a string or a more specific type if it is a member of
* goog.dom.TagName (e.g. {!HTMLAnchorElement} for goog.dom.TagName.A).
* @template T
* @template R := cond(isUnknown(T), 'Element', T) =:
* @deprecated Use {@link goog.dom.createDom} instead.
*/
goog.dom.$dom = goog.dom.createDom;
/**
* Creates a new element.
* @param {string|!goog.dom.TagName<T>} name Tag to create.
* @return {R} The new element. The return type is {!Element} if name is
* a string or a more specific type if it is a member of goog.dom.TagName
* (e.g. {!HTMLAnchorElement} for goog.dom.TagName.A).
* @template T
* @template R := cond(isUnknown(T), 'Element', T) =:
*/
goog.dom.createElement = function(name) {
return goog.dom.createElement_(document, name);
};
/**
* Creates a new element.
* @param {!Document} doc The document to create the element in.
* @param {string|!goog.dom.TagName<T>} name Tag to create.
* @return {R} The new element. The return type is {!Element} if name is
* a string or a more specific type if it is a member of goog.dom.TagName
* (e.g. {!HTMLAnchorElement} for goog.dom.TagName.A).
* @template T
* @template R := cond(isUnknown(T), 'Element', T) =:
* @private
*/
goog.dom.createElement_ = function(doc, name) {
return doc.createElement(String(name));
};
/**
* Creates a new text node.
* @param {number|string} content Content.
* @return {!Text} The new text node.
*/
goog.dom.createTextNode = function(content) {
return document.createTextNode(String(content));
};
/**
* Create a table.
* @param {number} rows The number of rows in the table. Must be >= 1.
* @param {number} columns The number of columns in the table. Must be >= 1.
* @param {boolean=} opt_fillWithNbsp If true, fills table entries with
* {@code goog.string.Unicode.NBSP} characters.
* @return {!Element} The created table.
*/
goog.dom.createTable = function(rows, columns, opt_fillWithNbsp) {
// TODO(mlourenco): Return HTMLTableElement, also in prototype function.
// Callers need to be updated to e.g. not assign numbers to table.cellSpacing.
return goog.dom.createTable_(document, rows, columns, !!opt_fillWithNbsp);
};
/**
* Create a table.
* @param {!Document} doc Document object to use to create the table.
* @param {number} rows The number of rows in the table. Must be >= 1.
* @param {number} columns The number of columns in the table. Must be >= 1.
* @param {boolean} fillWithNbsp If true, fills table entries with
* {@code goog.string.Unicode.NBSP} characters.
* @return {!HTMLTableElement} The created table.
* @private
*/
goog.dom.createTable_ = function(doc, rows, columns, fillWithNbsp) {
var table = goog.dom.createElement_(doc, goog.dom.TagName.TABLE);
var tbody =
table.appendChild(goog.dom.createElement_(doc, goog.dom.TagName.TBODY));
for (var i = 0; i < rows; i++) {
var tr = goog.dom.createElement_(doc, goog.dom.TagName.TR);
for (var j = 0; j < columns; j++) {
var td = goog.dom.createElement_(doc, goog.dom.TagName.TD);
// IE <= 9 will create a text node if we set text content to the empty
// string, so we avoid doing it unless necessary. This ensures that the
// same DOM tree is returned on all browsers.
if (fillWithNbsp) {
goog.dom.setTextContent(td, goog.string.Unicode.NBSP);
}
tr.appendChild(td);
}
tbody.appendChild(tr);
}
return table;
};
/**
* Creates a new Node from constant strings of HTML markup.
* @param {...!goog.string.Const} var_args The HTML strings to concatenate then
* convert into a node.
* @return {!Node}
*/
goog.dom.constHtmlToNode = function(var_args) {
var stringArray = goog.array.map(arguments, goog.string.Const.unwrap);
var safeHtml =
goog.html.uncheckedconversions
.safeHtmlFromStringKnownToSatisfyTypeContract(
goog.string.Const.from(
'Constant HTML string, that gets turned into a ' +
'Node later, so it will be automatically balanced.'),
stringArray.join(''));
return goog.dom.safeHtmlToNode(safeHtml);
};
/**
* Converts HTML markup into a node. This is a safe version of
* {@code goog.dom.htmlToDocumentFragment} which is now deleted.
* @param {!goog.html.SafeHtml} html The HTML markup to convert.
* @return {!Node} The resulting node.
*/
goog.dom.safeHtmlToNode = function(html) {
return goog.dom.safeHtmlToNode_(document, html);
};
/**
* Helper for {@code safeHtmlToNode}.
* @param {!Document} doc The document.
* @param {!goog.html.SafeHtml} html The HTML markup to convert.
* @return {!Node} The resulting node.
* @private
*/
goog.dom.safeHtmlToNode_ = function(doc, html) {
var tempDiv = goog.dom.createElement_(doc, goog.dom.TagName.DIV);
if (goog.dom.BrowserFeature.INNER_HTML_NEEDS_SCOPED_ELEMENT) {
goog.dom.safe.setInnerHtml(
tempDiv, goog.html.SafeHtml.concat(goog.html.SafeHtml.BR, html));
tempDiv.removeChild(tempDiv.firstChild);
} else {
goog.dom.safe.setInnerHtml(tempDiv, html);
}
return goog.dom.childrenToNode_(doc, tempDiv);
};
/**
* Helper for {@code safeHtmlToNode_}.
* @param {!Document} doc The document.
* @param {!Node} tempDiv The input node.
* @return {!Node} The resulting node.
* @private
*/
goog.dom.childrenToNode_ = function(doc, tempDiv) {
if (tempDiv.childNodes.length == 1) {
return tempDiv.removeChild(tempDiv.firstChild);
} else {
var fragment = doc.createDocumentFragment();
while (tempDiv.firstChild) {
fragment.appendChild(tempDiv.firstChild);
}
return fragment;
}
};
/**
* Returns true if the browser is in "CSS1-compatible" (standards-compliant)
* mode, false otherwise.
* @return {boolean} True if in CSS1-compatible mode.
*/
goog.dom.isCss1CompatMode = function() {
return goog.dom.isCss1CompatMode_(document);
};
/**
* Returns true if the browser is in "CSS1-compatible" (standards-compliant)
* mode, false otherwise.
* @param {!Document} doc The document to check.
* @return {boolean} True if in CSS1-compatible mode.
* @private
*/
goog.dom.isCss1CompatMode_ = function(doc) {
if (goog.dom.COMPAT_MODE_KNOWN_) {
return goog.dom.ASSUME_STANDARDS_MODE;
}
return doc.compatMode == 'CSS1Compat';
};
/**
* 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:
*
* <pre>
* 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"
* </pre>
*
* For more information, see:
* http://dev.w3.org/html5/markup/syntax.html#syntax-elements
*
* TODO(user): Rename shouldAllowChildren() ?
*
* @param {Node} node The node to check.
* @return {boolean} Whether the node can contain children.
*/
goog.dom.canHaveChildren = function(node) {
if (node.nodeType != goog.dom.NodeType.ELEMENT) {
return false;
}
switch (/** @type {!Element} */ (node).tagName) {
case String(goog.dom.TagName.APPLET):
case String(goog.dom.TagName.AREA):
case String(goog.dom.TagName.BASE):
case String(goog.dom.TagName.BR):
case String(goog.dom.TagName.COL):
case String(goog.dom.TagName.COMMAND):
case String(goog.dom.TagName.EMBED):
case String(goog.dom.TagName.FRAME):
case String(goog.dom.TagName.HR):
case String(goog.dom.TagName.IMG):
case String(goog.dom.TagName.INPUT):
case String(goog.dom.TagName.IFRAME):
case String(goog.dom.TagName.ISINDEX):
case String(goog.dom.TagName.KEYGEN):
case String(goog.dom.TagName.LINK):
case String(goog.dom.TagName.NOFRAMES):
case String(goog.dom.TagName.NOSCRIPT):
case String(goog.dom.TagName.META):
case String(goog.dom.TagName.OBJECT):
case String(goog.dom.TagName.PARAM):
case String(goog.dom.TagName.SCRIPT):
case String(goog.dom.TagName.SOURCE):
case String(goog.dom.TagName.STYLE):
case String(goog.dom.TagName.TRACK):
case String(goog.dom.TagName.WBR):
return false;
}
return true;
};
/**
* Appends a child to a node.
* @param {Node} parent Parent.
* @param {Node} child Child.
*/
goog.dom.appendChild = function(parent, child) {
parent.appendChild(child);
};
/**
* Appends a node with text or other nodes.
* @param {!Node} parent The node to append nodes to.
* @param {...goog.dom.Appendable} var_args 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.
*/
goog.dom.append = function(parent, var_args) {
goog.dom.append_(goog.dom.getOwnerDocument(parent), parent, arguments, 1);
};
/**
* Removes all the child nodes on a DOM node.
* @param {Node} node Node to remove children from.
*/
goog.dom.removeChildren = function(node) {
// Note: Iterations over live collections can be slow, this is the fastest
// we could find. The double parenthesis are used to prevent JsCompiler and
// strict warnings.
var child;
while ((child = node.firstChild)) {
node.removeChild(child);
}
};
/**
* 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.
* @param {Node} newNode Node to insert.
* @param {Node} refNode Reference node to insert before.
*/
goog.dom.insertSiblingBefore = function(newNode, refNode) {
if (refNode.parentNode) {
refNode.parentNode.insertBefore(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.
* @param {Node} newNode Node to insert.
* @param {Node} refNode Reference node to insert after.
*/
goog.dom.insertSiblingAfter = function(newNode, refNode) {
if (refNode.parentNode) {
refNode.parentNode.insertBefore(newNode, refNode.nextSibling);
}
};
/**
* 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.
* @param {Element} parent The element into which to insert the child.
* @param {Node} child The element to insert.
* @param {number} index The index at which to insert the new child node. Must
* not be negative.
*/
goog.dom.insertChildAt = function(parent, child, index) {
// Note that if the second argument is null, insertBefore
// will append the child at the end of the list of children.
parent.insertBefore(child, parent.childNodes[index] || null);
};
/**
* Removes a node from its parent.
* @param {Node} node The node to remove.
* @return {Node} The node removed if removed; else, null.
*/
goog.dom.removeNode = function(node) {
return node && node.parentNode ? node.parentNode.removeChild(node) : null;
};
/**
* Replaces a node in the DOM tree. Will do nothing if {@code oldNode} has no
* parent.
* @param {Node} newNode Node to insert.
* @param {Node} oldNode Node to replace.
*/
goog.dom.replaceNode = function(newNode, oldNode) {
var parent = oldNode.parentNode;
if (parent) {
parent.replaceChild(newNode, oldNode);
}
};
/**
* Flattens an element. That is, removes it and replace it with its children.
* Does nothing if the element is not in the document.
* @param {Element} element The element to flatten.
* @return {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.
*/
goog.dom.flattenElement = function(element) {
var child, parent = element.parentNode;
if (parent && parent.nodeType != goog.dom.NodeType.DOCUMENT_FRAGMENT) {
// Use IE DOM method (supported by Opera too) if available
if (element.removeNode) {
return /** @type {Element} */ (element.removeNode(false));
} else {
// Move all children of the original node up one level.
while ((child = element.firstChild)) {
parent.insertBefore(child, element);
}
// Detach the original element.
return /** @type {Element} */ (goog.dom.removeNode(element));
}
}
};
/**
* Returns an array containing just the element children of the given element.
* @param {Element} element The element whose element children we want.
* @return {!(Array<!Element>|NodeList<!Element>)} An array or array-like list
* of just the element children of the given element.
*/
goog.dom.getChildren = function(element) {
// We check if the children attribute is supported for child elements
// since IE8 misuses the attribute by also including comments.
if (goog.dom.BrowserFeature.CAN_USE_CHILDREN_ATTRIBUTE &&
element.children != undefined) {
return element.children;
}
// Fall back to manually filtering the element's child nodes.
return goog.array.filter(element.childNodes, function(node) {
return node.nodeType == goog.dom.NodeType.ELEMENT;
});
};
/**
* Returns the first child node that is an element.
* @param {Node} node The node to get the first child element of.
* @return {Element} The first child node of {@code node} that is an element.
*/
goog.dom.getFirstElementChild = function(node) {
if (goog.isDef(node.firstElementChild)) {
return /** @type {!Element} */ (node).firstElementChild;
}
return goog.dom.getNextElementNode_(node.firstChild, true);
};
/**
* Returns the last child node that is an element.
* @param {Node} node The node to get the last child element of.
* @return {Element} The last child node of {@code node} that is an element.
*/
goog.dom.getLastElementChild = function(node) {
if (goog.isDef(node.lastElementChild)) {
return /** @type {!Element} */ (node).lastElementChild;
}
return goog.dom.getNextElementNode_(node.lastChild, false);
};
/**
* Returns the first next sibling that is an element.
* @param {Node} node The node to get the next sibling element of.
* @return {Element} The next sibling of {@code node} that is an element.
*/
goog.dom.getNextElementSibling = function(node) {
if (goog.isDef(node.nextElementSibling)) {
return /** @type {!Element} */ (node).nextElementSibling;
}
return goog.dom.getNextElementNode_(node.nextSibling, true);
};
/**
* Returns the first previous sibling that is an element.
* @param {Node} node The node to get the previous sibling element of.
* @return {Element} The first previous sibling of {@code node} that is
* an element.
*/
goog.dom.getPreviousElementSibling = function(node) {
if (goog.isDef(node.previousElementSibling)) {
return /** @type {!Element} */ (node).previousElementSibling;
}
return goog.dom.getNextElementNode_(node.previousSibling, false);
};
/**
* Returns the first node that is an element in the specified direction,
* starting with {@code node}.
* @param {Node} node The node to get the next element from.
* @param {boolean} forward Whether to look forwards or backwards.
* @return {Element} The first element.
* @private
*/
goog.dom.getNextElementNode_ = function(node, forward) {
while (node && node.nodeType != goog.dom.NodeType.ELEMENT) {
node = forward ? node.nextSibling : node.previousSibling;
}
return /** @type {Element} */ (node);
};
/**
* Returns the next node in source order from the given node.
* @param {Node} node The node.
* @return {Node} The next node in the DOM tree, or null if this was the last
* node.
*/
goog.dom.getNextNode = function(node) {
if (!node) {
return null;
}
if (node.firstChild) {
return node.firstChild;
}
while (node && !node.nextSibling) {
node = node.parentNode;
}
return node ? node.nextSibling : null;
};
/**
* Returns the previous node in source order from the given node.
* @param {Node} node The node.
* @return {Node} The previous node in the DOM tree, or null if this was the
* first node.
*/
goog.dom.getPreviousNode = function(node) {
if (!node) {
return null;
}
if (!node.previousSibling) {
return node.parentNode;
}
node = node.previousSibling;
while (node && node.lastChild) {
node = node.lastChild;
}
return node;
};
/**
* Whether the object looks like a DOM node.
* @param {?} obj The object being tested for node likeness.
* @return {boolean} Whether the object looks like a DOM node.
*/
goog.dom.isNodeLike = function(obj) {
return goog.isObject(obj) && obj.nodeType > 0;
};
/**
* Whether the object looks like an Element.
* @param {?} obj The object being tested for Element likeness.
* @return {boolean} Whether the object looks like an Element.
*/
goog.dom.isElement = function(obj) {
return goog.isObject(obj) && obj.nodeType == goog.dom.NodeType.ELEMENT;
};
/**
* Returns true if the specified value is a Window object. This includes the
* global window for HTML pages, and iframe windows.
* @param {?} obj Variable to test.
* @return {boolean} Whether the variable is a window.
*/
goog.dom.isWindow = function(obj) {
return goog.isObject(obj) && obj['window'] == obj;
};
/**
* Returns an element's parent, if it's an Element.
* @param {Element} element The DOM element.
* @return {Element} The parent, or null if not an Element.
*/
goog.dom.getParentElement = function(element) {
var parent;
if (goog.dom.BrowserFeature.CAN_USE_PARENT_ELEMENT_PROPERTY) {
var isIe9 = goog.userAgent.IE && goog.userAgent.isVersionOrHigher('9') &&
!goog.userAgent.isVersionOrHigher('10');
// SVG elements in IE9 can't use the parentElement property.
// goog.global['SVGElement'] is not defined in IE9 quirks mode.
if (!(isIe9 && goog.global['SVGElement'] &&
element instanceof goog.global['SVGElement'])) {
parent = element.parentElement;
if (parent) {
return parent;
}
}
}
parent = element.parentNode;
return goog.dom.isElement(parent) ? /** @type {!Element} */ (parent) : null;
};
/**
* Whether a node contains another node.
* @param {?Node} parent The node that should contain the other node.
* @param {?Node} descendant The node to test presence of.
* @return {boolean} Whether the parent node contains the descendent node.
*/
goog.dom.contains = function(parent, descendant) {
if (!parent || !descendant) {
return false;
}
// We use browser specific methods for this if available since it is faster
// that way.
// IE DOM
if (parent.contains && descendant.nodeType == goog.dom.NodeType.ELEMENT) {
return parent == descendant || parent.contains(descendant);
}
// W3C DOM Level 3
if (typeof parent.compareDocumentPosition != 'undefined') {
return parent == descendant ||
Boolean(parent.compareDocumentPosition(descendant) & 16);
}
// W3C DOM Level 1
while (descendant && parent != descendant) {
descendant = descendant.parentNode;
}
return descendant == parent;
};
/**
* 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 <b><i>text</i></b> the B node is considered to be
* before the I node.
*
* @param {Node} node1 The first node to compare.
* @param {Node} node2 The second node to compare.
* @return {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.
*/
goog.dom.compareNodeOrder = function(node1, node2) {
// Fall out quickly for equality.
if (node1 == no