# lib/goog/dom/dom.js

1 | // Copyright 2006 The Closure Library Authors. All Rights Reserved.
2 | //
3 | // Licensed under the Apache License, Version 2.0 (the "License");
4 | // you may not use this file except in compliance with the License.
5 | // You may obtain a copy of the License at
6 | //
7 | // http://www.apache.org/licenses/LICENSE-2.0
8 | //
9 | // Unless required by applicable law or agreed to in writing, software
10 | // distributed under the License is distributed on an "AS-IS" BASIS,
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 | // See the License for the specific language governing permissions and
13 | // limitations under the License.
14 |
15 | /**
16 | * @fileoverview Utilities for manipulating the browser's Document Object Model
17 | * Inspiration taken *heavily* from mochikit (http://mochikit.com/).
18 | *
19 | * You can use {@link goog.dom.DomHelper} to create new dom helpers that refer
20 | * to a different document object. This is useful if you are working with
21 | * frames or multiple windows.
22 | *
23 | * @author arv@google.com (Erik Arvidsson)
24 | */
25 |
26 |
27 | // TODO(arv): Rename/refactor getTextContent and getRawTextContent. The problem
28 | // is that getTextContent should mimic the DOM3 textContent. We should add a
29 | // getInnerText (or getText) which tries to return the visible text, innerText.
30 |
31 |
32 | goog.provide('goog.dom');
33 | goog.provide('goog.dom.Appendable');
34 | goog.provide('goog.dom.DomHelper');
35 |
36 | goog.require('goog.array');
37 | goog.require('goog.asserts');
38 | goog.require('goog.dom.BrowserFeature');
39 | goog.require('goog.dom.NodeType');
40 | goog.require('goog.dom.TagName');
41 | goog.require('goog.math.Coordinate');
42 | goog.require('goog.math.Size');
43 | goog.require('goog.object');
44 | goog.require('goog.string');
45 | goog.require('goog.userAgent');
46 |
47 |
48 | /**
49 | * @define {boolean} Whether we know at compile time that the browser is in
50 | * quirks mode.
51 | */
52 | goog.define('goog.dom.ASSUME_QUIRKS_MODE', false);
53 |
54 |
55 | /**
56 | * @define {boolean} Whether we know at compile time that the browser is in
57 | * standards compliance mode.
58 | */
59 | goog.define('goog.dom.ASSUME_STANDARDS_MODE', false);
60 |
61 |
62 | /**
63 | * Whether we know the compatibility mode at compile time.
64 | * @type {boolean}
65 | * @private
66 | */
67 | goog.dom.COMPAT_MODE_KNOWN_ =
68 | goog.dom.ASSUME_QUIRKS_MODE || goog.dom.ASSUME_STANDARDS_MODE;
69 |
70 |
71 | /**
72 | * Gets the DomHelper object for the document where the element resides.
73 | * @param {(Node|Window)=} opt_element If present, gets the DomHelper for this
74 | * element.
75 | * @return {!goog.dom.DomHelper} The DomHelper.
76 | */
77 | goog.dom.getDomHelper = function(opt_element) {
78 | return opt_element ?
79 | new goog.dom.DomHelper(goog.dom.getOwnerDocument(opt_element)) :
80 | (goog.dom.defaultDomHelper_ ||
81 | (goog.dom.defaultDomHelper_ = new goog.dom.DomHelper()));
82 | };
83 |
84 |
85 | /**
86 | * Cached default DOM helper.
87 | * @type {goog.dom.DomHelper}
88 | * @private
89 | */
90 | goog.dom.defaultDomHelper_;
91 |
92 |
93 | /**
94 | * Gets the document object being used by the dom library.
95 | * @return {!Document} Document object.
96 | */
97 | goog.dom.getDocument = function() {
98 | return document;
99 | };
100 |
101 |
102 | /**
103 | * Gets an element from the current document by element id.
104 | *
105 | * If an Element is passed in, it is returned.
106 | *
107 | * @param {string|Element} element Element ID or a DOM node.
108 | * @return {Element} The element with the given ID, or the node passed in.
109 | */
110 | goog.dom.getElement = function(element) {
111 | return goog.dom.getElementHelper_(document, element);
112 | };
113 |
114 |
115 | /**
116 | * Gets an element by id from the given document (if present).
117 | * If an element is given, it is returned.
118 | * @param {!Document} doc
119 | * @param {string|Element} element Element ID or a DOM node.
120 | * @return {Element} The resulting element.
121 | * @private
122 | */
123 | goog.dom.getElementHelper_ = function(doc, element) {
124 | return goog.isString(element) ?
125 | doc.getElementById(element) :
126 | element;
127 | };
128 |
129 |
130 | /**
131 | * Gets an element by id, asserting that the element is found.
132 | *
133 | * This is used when an element is expected to exist, and should fail with
134 | * an assertion error if it does not (if assertions are enabled).
135 | *
136 | * @param {string} id Element ID.
137 | * @return {!Element} The element with the given ID, if it exists.
138 | */
139 | goog.dom.getRequiredElement = function(id) {
140 | return goog.dom.getRequiredElementHelper_(document, id);
141 | };
142 |
143 |
144 | /**
145 | * Helper function for getRequiredElementHelper functions, both static and
146 | * on DomHelper. Asserts the element with the given id exists.
147 | * @param {!Document} doc
148 | * @param {string} id
149 | * @return {!Element} The element with the given ID, if it exists.
150 | * @private
151 | */
152 | goog.dom.getRequiredElementHelper_ = function(doc, id) {
153 | // To prevent users passing in Elements as is permitted in getElement().
154 | goog.asserts.assertString(id);
155 | var element = goog.dom.getElementHelper_(doc, id);
156 | element = goog.asserts.assertElement(element,
157 | 'No element found with id: ' + id);
158 | return element;
159 | };
160 |
161 |
162 | /**
163 | * Alias for getElement.
164 | * @param {string|Element} element Element ID or a DOM node.
165 | * @return {Element} The element with the given ID, or the node passed in.
166 | * @deprecated Use {@link goog.dom.getElement} instead.
167 | */
168 | goog.dom.$ = goog.dom.getElement;
169 |
170 |
171 | /**
172 | * Looks up elements by both tag and class name, using browser native functions
173 | * ({@code querySelectorAll}, {@code getElementsByTagName} or
174 | * {@code getElementsByClassName}) where possible. This function
175 | * is a useful, if limited, way of collecting a list of DOM elements
176 | * with certain characteristics. {@code goog.dom.query} offers a
177 | * more powerful and general solution which allows matching on CSS3
178 | * selector expressions, but at increased cost in code size. If all you
179 | * need is particular tags belonging to a single class, this function
180 | * is fast and sleek.
181 | *
182 | * Note that tag names are case sensitive in the SVG namespace, and this
183 | * function converts opt_tag to uppercase for comparisons. For queries in the
184 | * SVG namespace you should use querySelector or querySelectorAll instead.
185 | * https://bugzilla.mozilla.org/show_bug.cgi?id=963870
186 | * https://bugs.webkit.org/show_bug.cgi?id=83438
187 | *
188 | * @see {goog.dom.query}
189 | *
190 | * @param {?string=} opt_tag Element tag name.
191 | * @param {?string=} opt_class Optional class name.
192 | * @param {(Document|Element)=} opt_el Optional element to look in.
193 | * @return { {length: number} } Array-like list of elements (only a length
194 | * property and numerical indices are guaranteed to exist).
195 | */
196 | goog.dom.getElementsByTagNameAndClass = function(opt_tag, opt_class, opt_el) {
197 | return goog.dom.getElementsByTagNameAndClass_(document, opt_tag, opt_class,
198 | opt_el);
199 | };
200 |
201 |
202 | /**
203 | * Returns a static, array-like list of the elements with the provided
204 | * className.
205 | * @see {goog.dom.query}
206 | * @param {string} className the name of the class to look for.
207 | * @param {(Document|Element)=} opt_el Optional element to look in.
208 | * @return { {length: number} } The items found with the class name provided.
209 | */
210 | goog.dom.getElementsByClass = function(className, opt_el) {
211 | var parent = opt_el || document;
212 | if (goog.dom.canUseQuerySelector_(parent)) {
213 | return parent.querySelectorAll('.' + className);
214 | }
215 | return goog.dom.getElementsByTagNameAndClass_(
216 | document, '*', className, opt_el);
217 | };
218 |
219 |
220 | /**
221 | * Returns the first element with the provided className.
222 | * @see {goog.dom.query}
223 | * @param {string} className the name of the class to look for.
224 | * @param {Element|Document=} opt_el Optional element to look in.
225 | * @return {Element} The first item with the class name provided.
226 | */
227 | goog.dom.getElementByClass = function(className, opt_el) {
228 | var parent = opt_el || document;
229 | var retVal = null;
230 | if (goog.dom.canUseQuerySelector_(parent)) {
231 | retVal = parent.querySelector('.' + className);
232 | } else {
233 | retVal = goog.dom.getElementsByTagNameAndClass_(
234 | document, '*', className, opt_el)[0];
235 | }
236 | return retVal || null;
237 | };
238 |
239 |
240 | /**
241 | * Ensures an element with the given className exists, and then returns the
242 | * first element with the provided className.
243 | * @see {goog.dom.query}
244 | * @param {string} className the name of the class to look for.
245 | * @param {!Element|!Document=} opt_root Optional element or document to look
246 | * in.
247 | * @return {!Element} The first item with the class name provided.
248 | * @throws {goog.asserts.AssertionError} Thrown if no element is found.
249 | */
250 | goog.dom.getRequiredElementByClass = function(className, opt_root) {
251 | var retValue = goog.dom.getElementByClass(className, opt_root);
252 | return goog.asserts.assert(retValue,
253 | 'No element found with className: ' + className);
254 | };
255 |
256 |
257 | /**
258 | * Prefer the standardized (http://www.w3.org/TR/selectors-api/), native and
259 | * fast W3C Selectors API.
260 | * @param {!(Element|Document)} parent The parent document object.
261 | * @return {boolean} whether or not we can use parent.querySelector* APIs.
262 | * @private
263 | */
264 | goog.dom.canUseQuerySelector_ = function(parent) {
265 | return !!(parent.querySelectorAll && parent.querySelector);
266 | };
267 |
268 |
269 | /**
270 | * Helper for {@code getElementsByTagNameAndClass}.
271 | * @param {!Document} doc The document to get the elements in.
272 | * @param {?string=} opt_tag Element tag name.
273 | * @param {?string=} opt_class Optional class name.
274 | * @param {(Document|Element)=} opt_el Optional element to look in.
275 | * @return { {length: number} } Array-like list of elements (only a length
276 | * property and numerical indices are guaranteed to exist).
277 | * @private
278 | */
279 | goog.dom.getElementsByTagNameAndClass_ = function(doc, opt_tag, opt_class,
280 | opt_el) {
281 | var parent = opt_el || doc;
282 | var tagName = (opt_tag && opt_tag != '*') ? opt_tag.toUpperCase() : '';
283 |
284 | if (goog.dom.canUseQuerySelector_(parent) &&
285 | (tagName || opt_class)) {
286 | var query = tagName + (opt_class ? '.' + opt_class : '');
287 | return parent.querySelectorAll(query);
288 | }
289 |
290 | // Use the native getElementsByClassName if available, under the assumption
291 | // that even when the tag name is specified, there will be fewer elements to
292 | // filter through when going by class than by tag name
293 | if (opt_class && parent.getElementsByClassName) {
294 | var els = parent.getElementsByClassName(opt_class);
295 |
296 | if (tagName) {
297 | var arrayLike = {};
298 | var len = 0;
299 |
300 | // Filter for specific tags if requested.
301 | for (var i = 0, el; el = els[i]; i++) {
302 | if (tagName == el.nodeName) {
303 | arrayLike[len++] = el;
304 | }
305 | }
306 | arrayLike.length = len;
307 |
308 | return arrayLike;
309 | } else {
310 | return els;
311 | }
312 | }
313 |
314 | var els = parent.getElementsByTagName(tagName || '*');
315 |
316 | if (opt_class) {
317 | var arrayLike = {};
318 | var len = 0;
319 | for (var i = 0, el; el = els[i]; i++) {
320 | var className = el.className;
321 | // Check if className has a split function since SVG className does not.
322 | if (typeof className.split == 'function' &&
323 | goog.array.contains(className.split(/\s+/), opt_class)) {
324 | arrayLike[len++] = el;
325 | }
326 | }
327 | arrayLike.length = len;
328 | return arrayLike;
329 | } else {
330 | return els;
331 | }
332 | };
333 |
334 |
335 | /**
336 | * Alias for {@code getElementsByTagNameAndClass}.
337 | * @param {?string=} opt_tag Element tag name.
338 | * @param {?string=} opt_class Optional class name.
339 | * @param {Element=} opt_el Optional element to look in.
340 | * @return { {length: number} } Array-like list of elements (only a length
341 | * property and numerical indices are guaranteed to exist).
342 | * @deprecated Use {@link goog.dom.getElementsByTagNameAndClass} instead.
343 | */
344 | goog.dom.$$ = goog.dom.getElementsByTagNameAndClass;
345 |
346 |
347 | /**
348 | * Sets multiple properties on a node.
349 | * @param {Element} element DOM node to set properties on.
350 | * @param {Object} properties Hash of property:value pairs.
351 | */
352 | goog.dom.setProperties = function(element, properties) {
353 | goog.object.forEach(properties, function(val, key) {
354 | if (key == 'style') {
355 | element.style.cssText = val;
356 | } else if (key == 'class') {
357 | element.className = val;
358 | } else if (key == 'for') {
359 | element.htmlFor = val;
360 | } else if (key in goog.dom.DIRECT_ATTRIBUTE_MAP_) {
361 | element.setAttribute(goog.dom.DIRECT_ATTRIBUTE_MAP_[key], val);
362 | } else if (goog.string.startsWith(key, 'aria-') ||
363 | goog.string.startsWith(key, 'data-')) {
364 | element.setAttribute(key, val);
365 | } else {
366 | element[key] = val;
367 | }
368 | });
369 | };
370 |
371 |
372 | /**
373 | * Map of attributes that should be set using
374 | * element.setAttribute(key, val) instead of element[key] = val. Used
375 | * by goog.dom.setProperties.
376 | *
377 | * @private {!Object<string, string>}
378 | * @const
379 | */
380 | goog.dom.DIRECT_ATTRIBUTE_MAP_ = {
381 | 'cellpadding': 'cellPadding',
382 | 'cellspacing': 'cellSpacing',
383 | 'colspan': 'colSpan',
384 | 'frameborder': 'frameBorder',
385 | 'height': 'height',
386 | 'maxlength': 'maxLength',
387 | 'role': 'role',
388 | 'rowspan': 'rowSpan',
389 | 'type': 'type',
390 | 'usemap': 'useMap',
391 | 'valign': 'vAlign',
392 | 'width': 'width'
393 | };
394 |
395 |
396 | /**
397 | * Gets the dimensions of the viewport.
398 | *
399 | * Gecko Standards mode:
400 | * docEl.clientWidth Width of viewport excluding scrollbar.
401 | * win.innerWidth Width of viewport including scrollbar.
402 | * body.clientWidth Width of body element.
403 | *
404 | * docEl.clientHeight Height of viewport excluding scrollbar.
405 | * win.innerHeight Height of viewport including scrollbar.
406 | * body.clientHeight Height of document.
407 | *
408 | * Gecko Backwards compatible mode:
409 | * docEl.clientWidth Width of viewport excluding scrollbar.
410 | * win.innerWidth Width of viewport including scrollbar.
411 | * body.clientWidth Width of viewport excluding scrollbar.
412 | *
413 | * docEl.clientHeight Height of document.
414 | * win.innerHeight Height of viewport including scrollbar.
415 | * body.clientHeight Height of viewport excluding scrollbar.
416 | *
417 | * IE6/7 Standards mode:
418 | * docEl.clientWidth Width of viewport excluding scrollbar.
419 | * win.innerWidth Undefined.
420 | * body.clientWidth Width of body element.
421 | *
422 | * docEl.clientHeight Height of viewport excluding scrollbar.
423 | * win.innerHeight Undefined.
424 | * body.clientHeight Height of document element.
425 | *
426 | * IE5 + IE6/7 Backwards compatible mode:
427 | * docEl.clientWidth 0.
428 | * win.innerWidth Undefined.
429 | * body.clientWidth Width of viewport excluding scrollbar.
430 | *
431 | * docEl.clientHeight 0.
432 | * win.innerHeight Undefined.
433 | * body.clientHeight Height of viewport excluding scrollbar.
434 | *
435 | * Opera 9 Standards and backwards compatible mode:
436 | * docEl.clientWidth Width of viewport excluding scrollbar.
437 | * win.innerWidth Width of viewport including scrollbar.
438 | * body.clientWidth Width of viewport excluding scrollbar.
439 | *
440 | * docEl.clientHeight Height of document.
441 | * win.innerHeight Height of viewport including scrollbar.
442 | * body.clientHeight Height of viewport excluding scrollbar.
443 | *
444 | * WebKit:
445 | * Safari 2
446 | * docEl.clientHeight Same as scrollHeight.
447 | * docEl.clientWidth Same as innerWidth.
448 | * win.innerWidth Width of viewport excluding scrollbar.
449 | * win.innerHeight Height of the viewport including scrollbar.
450 | * frame.innerHeight Height of the viewport exluding scrollbar.
451 | *
452 | * Safari 3 (tested in 522)
453 | *
454 | * docEl.clientWidth Width of viewport excluding scrollbar.
455 | * docEl.clientHeight Height of viewport excluding scrollbar in strict mode.
456 | * body.clientHeight Height of viewport excluding scrollbar in quirks mode.
457 | *
458 | * @param {Window=} opt_window Optional window element to test.
459 | * @return {!goog.math.Size} Object with values 'width' and 'height'.
460 | */
461 | goog.dom.getViewportSize = function(opt_window) {
462 | // TODO(arv): This should not take an argument
463 | return goog.dom.getViewportSize_(opt_window || window);
464 | };
465 |
466 |
467 | /**
468 | * Helper for {@code getViewportSize}.
469 | * @param {Window} win The window to get the view port size for.
470 | * @return {!goog.math.Size} Object with values 'width' and 'height'.
471 | * @private
472 | */
473 | goog.dom.getViewportSize_ = function(win) {
474 | var doc = win.document;
475 | var el = goog.dom.isCss1CompatMode_(doc) ? doc.documentElement : doc.body;
476 | return new goog.math.Size(el.clientWidth, el.clientHeight);
477 | };
478 |
479 |
480 | /**
481 | * Calculates the height of the document.
482 | *
483 | * @return {number} The height of the current document.
484 | */
485 | goog.dom.getDocumentHeight = function() {
486 | return goog.dom.getDocumentHeight_(window);
487 | };
488 |
489 |
490 | /**
491 | * Calculates the height of the document of the given window.
492 | *
493 | * Function code copied from the opensocial gadget api:
494 | * gadgets.window.adjustHeight(opt_height)
495 | *
496 | * @private
497 | * @param {!Window} win The window whose document height to retrieve.
498 | * @return {number} The height of the document of the given window.
499 | */
500 | goog.dom.getDocumentHeight_ = function(win) {
501 | // NOTE(eae): This method will return the window size rather than the document
502 | // size in webkit quirks mode.
503 | var doc = win.document;
504 | var height = 0;
505 |
506 | if (doc) {
507 | // Calculating inner content height is hard and different between
508 | // browsers rendering in Strict vs. Quirks mode. We use a combination of
509 | // three properties within document.body and document.documentElement:
510 | // - scrollHeight
511 | // - offsetHeight
512 | // - clientHeight
513 | // These values differ significantly between browsers and rendering modes.
514 | // But there are patterns. It just takes a lot of time and persistence
515 | // to figure out.
516 |
517 | var body = doc.body;
518 | var docEl = doc.documentElement;
519 | if (!(docEl && body)) {
520 | return 0;
521 | }
522 |
523 | // Get the height of the viewport
524 | var vh = goog.dom.getViewportSize_(win).height;
525 | if (goog.dom.isCss1CompatMode_(doc) && docEl.scrollHeight) {
526 | // In Strict mode:
527 | // The inner content height is contained in either:
528 | // document.documentElement.scrollHeight
529 | // document.documentElement.offsetHeight
530 | // Based on studying the values output by different browsers,
531 | // use the value that's NOT equal to the viewport height found above.
532 | height = docEl.scrollHeight != vh ?
533 | docEl.scrollHeight : docEl.offsetHeight;
534 | } else {
535 | // In Quirks mode:
536 | // documentElement.clientHeight is equal to documentElement.offsetHeight
537 | // except in IE. In most browsers, document.documentElement can be used
538 | // to calculate the inner content height.
539 | // However, in other browsers (e.g. IE), document.body must be used
540 | // instead. How do we know which one to use?
541 | // If document.documentElement.clientHeight does NOT equal
542 | // document.documentElement.offsetHeight, then use document.body.
543 | var sh = docEl.scrollHeight;
544 | var oh = docEl.offsetHeight;
545 | if (docEl.clientHeight != oh) {
546 | sh = body.scrollHeight;
547 | oh = body.offsetHeight;
548 | }
549 |
550 | // Detect whether the inner content height is bigger or smaller
551 | // than the bounding box (viewport). If bigger, take the larger
552 | // value. If smaller, take the smaller value.
553 | if (sh > vh) {
554 | // Content is larger
555 | height = sh > oh ? sh : oh;
556 | } else {
557 | // Content is smaller
558 | height = sh < oh ? sh : oh;
559 | }
560 | }
561 | }
562 |
563 | return height;
564 | };
565 |
566 |
567 | /**
568 | * Gets the page scroll distance as a coordinate object.
569 | *
570 | * @param {Window=} opt_window Optional window element to test.
571 | * @return {!goog.math.Coordinate} Object with values 'x' and 'y'.
572 | * @deprecated Use {@link goog.dom.getDocumentScroll} instead.
573 | */
574 | goog.dom.getPageScroll = function(opt_window) {
575 | var win = opt_window || goog.global || window;
576 | return goog.dom.getDomHelper(win.document).getDocumentScroll();
577 | };
578 |
579 |
580 | /**
581 | * Gets the document scroll distance as a coordinate object.
582 | *
583 | * @return {!goog.math.Coordinate} Object with values 'x' and 'y'.
584 | */
585 | goog.dom.getDocumentScroll = function() {
586 | return goog.dom.getDocumentScroll_(document);
587 | };
588 |
589 |
590 | /**
591 | * Helper for {@code getDocumentScroll}.
592 | *
593 | * @param {!Document} doc The document to get the scroll for.
594 | * @return {!goog.math.Coordinate} Object with values 'x' and 'y'.
595 | * @private
596 | */
597 | goog.dom.getDocumentScroll_ = function(doc) {
598 | var el = goog.dom.getDocumentScrollElement_(doc);
599 | var win = goog.dom.getWindow_(doc);
600 | if (goog.userAgent.IE && goog.userAgent.isVersionOrHigher('10') &&
601 | win.pageYOffset != el.scrollTop) {
602 | // The keyboard on IE10 touch devices shifts the page using the pageYOffset
603 | // without modifying scrollTop. For this case, we want the body scroll
604 | // offsets.
605 | return new goog.math.Coordinate(el.scrollLeft, el.scrollTop);
606 | }
607 | return new goog.math.Coordinate(win.pageXOffset || el.scrollLeft,
608 | win.pageYOffset || el.scrollTop);
609 | };
610 |
611 |
612 | /**
613 | * Gets the document scroll element.
614 | * @return {!Element} Scrolling element.
615 | */
616 | goog.dom.getDocumentScrollElement = function() {
617 | return goog.dom.getDocumentScrollElement_(document);
618 | };
619 |
620 |
621 | /**
622 | * Helper for {@code getDocumentScrollElement}.
623 | * @param {!Document} doc The document to get the scroll element for.
624 | * @return {!Element} Scrolling element.
625 | * @private
626 | */
627 | goog.dom.getDocumentScrollElement_ = function(doc) {
628 | // WebKit needs body.scrollLeft in both quirks mode and strict mode. We also
629 | // default to the documentElement if the document does not have a body (e.g.
630 | // a SVG document).
631 | if (!goog.userAgent.WEBKIT && goog.dom.isCss1CompatMode_(doc)) {
632 | return doc.documentElement;
633 | }
634 | return doc.body || doc.documentElement;
635 | };
636 |
637 |
638 | /**
639 | * Gets the window object associated with the given document.
640 | *
641 | * @param {Document=} opt_doc Document object to get window for.
642 | * @return {!Window} The window associated with the given document.
643 | */
644 | goog.dom.getWindow = function(opt_doc) {
645 | // TODO(arv): This should not take an argument.
646 | return opt_doc ? goog.dom.getWindow_(opt_doc) : window;
647 | };
648 |
649 |
650 | /**
651 | * Helper for {@code getWindow}.
652 | *
653 | * @param {!Document} doc Document object to get window for.
654 | * @return {!Window} The window associated with the given document.
655 | * @private
656 | */
657 | goog.dom.getWindow_ = function(doc) {
658 | return doc.parentWindow || doc.defaultView;
659 | };
660 |
661 |
662 | /**
663 | * Returns a dom node with a set of attributes. This function accepts varargs
664 | * for subsequent nodes to be added. Subsequent nodes will be added to the
665 | * first node as childNodes.
666 | *
667 | * So:
668 | * <code>createDom('div', null, createDom('p'), createDom('p'));</code>
669 | * would return a div with two child paragraphs
670 | *
671 | * @param {string} tagName Tag to create.
672 | * @param {(Object|Array<string>|string)=} opt_attributes If object, then a map
673 | * of name-value pairs for attributes. If a string, then this is the
674 | * className of the new element. If an array, the elements will be joined
675 | * together as the className of the new element.
676 | * @param {...(Object|string|Array|NodeList)} var_args Further DOM nodes or
677 | * strings for text nodes. If one of the var_args is an array or NodeList,i
678 | * its elements will be added as childNodes instead.
679 | * @return {!Element} Reference to a DOM node.
680 | */
681 | goog.dom.createDom = function(tagName, opt_attributes, var_args) {
682 | return goog.dom.createDom_(document, arguments);
683 | };
684 |
685 |
686 | /**
687 | * Helper for {@code createDom}.
688 | * @param {!Document} doc The document to create the DOM in.
689 | * @param {!Arguments} args Argument object passed from the callers. See
690 | * {@code goog.dom.createDom} for details.
691 | * @return {!Element} Reference to a DOM node.
692 | * @private
693 | */
694 | goog.dom.createDom_ = function(doc, args) {
695 | var tagName = args[0];
696 | var attributes = args[1];
697 |
698 | // Internet Explorer is dumb: http://msdn.microsoft.com/workshop/author/
699 | // dhtml/reference/properties/name_2.asp
700 | // Also does not allow setting of 'type' attribute on 'input' or 'button'.
701 | if (!goog.dom.BrowserFeature.CAN_ADD_NAME_OR_TYPE_ATTRIBUTES && attributes &&
702 | (attributes.name || attributes.type)) {
703 | var tagNameArr = ['<', tagName];
704 | if (attributes.name) {
705 | tagNameArr.push(' name="', goog.string.htmlEscape(attributes.name),
706 | '"');
707 | }
708 | if (attributes.type) {
709 | tagNameArr.push(' type="', goog.string.htmlEscape(attributes.type),
710 | '"');
711 |
712 | // Clone attributes map to remove 'type' without mutating the input.
713 | var clone = {};
714 | goog.object.extend(clone, attributes);
715 |
716 | // JSCompiler can't see how goog.object.extend added this property,
717 | // because it was essentially added by reflection.
718 | // So it needs to be quoted.
719 | delete clone['type'];
720 |
721 | attributes = clone;
722 | }
723 | tagNameArr.push('>');
724 | tagName = tagNameArr.join('');
725 | }
726 |
727 | var element = doc.createElement(tagName);
728 |
729 | if (attributes) {
730 | if (goog.isString(attributes)) {
731 | element.className = attributes;
732 | } else if (goog.isArray(attributes)) {
733 | element.className = attributes.join(' ');
734 | } else {
735 | goog.dom.setProperties(element, attributes);
736 | }
737 | }
738 |
739 | if (args.length > 2) {
740 | goog.dom.append_(doc, element, args, 2);
741 | }
742 |
743 | return element;
744 | };
745 |
746 |
747 | /**
748 | * Appends a node with text or other nodes.
749 | * @param {!Document} doc The document to create new nodes in.
750 | * @param {!Node} parent The node to append nodes to.
751 | * @param {!Arguments} args The values to add. See {@code goog.dom.append}.
752 | * @param {number} startIndex The index of the array to start from.
753 | * @private
754 | */
755 | goog.dom.append_ = function(doc, parent, args, startIndex) {
756 | function childHandler(child) {
757 | // TODO(user): More coercion, ala MochiKit?
758 | if (child) {
759 | parent.appendChild(goog.isString(child) ?
760 | doc.createTextNode(child) : child);
761 | }
762 | }
763 |
764 | for (var i = startIndex; i < args.length; i++) {
765 | var arg = args[i];
766 | // TODO(attila): Fix isArrayLike to return false for a text node.
767 | if (goog.isArrayLike(arg) && !goog.dom.isNodeLike(arg)) {
768 | // If the argument is a node list, not a real array, use a clone,
769 | // because forEach can't be used to mutate a NodeList.
770 | goog.array.forEach(goog.dom.isNodeList(arg) ?
771 | goog.array.toArray(arg) : arg,
772 | childHandler);
773 | } else {
774 | childHandler(arg);
775 | }
776 | }
777 | };
778 |
779 |
780 | /**
781 | * Alias for {@code createDom}.
782 | * @param {string} tagName Tag to create.
783 | * @param {(string|Object)=} opt_attributes If object, then a map of name-value
784 | * pairs for attributes. If a string, then this is the className of the new
785 | * element.
786 | * @param {...(Object|string|Array|NodeList)} var_args Further DOM nodes or
787 | * strings for text nodes. If one of the var_args is an array, its
788 | * children will be added as childNodes instead.
789 | * @return {!Element} Reference to a DOM node.
790 | * @deprecated Use {@link goog.dom.createDom} instead.
791 | */
792 | goog.dom.$dom = goog.dom.createDom;
793 |
794 |
795 | /**
796 | * Creates a new element.
797 | * @param {string} name Tag name.
798 | * @return {!Element} The new element.
799 | */
800 | goog.dom.createElement = function(name) {
801 | return document.createElement(name);
802 | };
803 |
804 |
805 | /**
806 | * Creates a new text node.
807 | * @param {number|string} content Content.
808 | * @return {!Text} The new text node.
809 | */
810 | goog.dom.createTextNode = function(content) {
811 | return document.createTextNode(String(content));
812 | };
813 |
814 |
815 | /**
816 | * Create a table.
817 | * @param {number} rows The number of rows in the table. Must be >= 1.
818 | * @param {number} columns The number of columns in the table. Must be >= 1.
819 | * @param {boolean=} opt_fillWithNbsp If true, fills table entries with nsbps.
820 | * @return {!Element} The created table.
821 | */
822 | goog.dom.createTable = function(rows, columns, opt_fillWithNbsp) {
823 | return goog.dom.createTable_(document, rows, columns, !!opt_fillWithNbsp);
824 | };
825 |
826 |
827 | /**
828 | * Create a table.
829 | * @param {!Document} doc Document object to use to create the table.
830 | * @param {number} rows The number of rows in the table. Must be >= 1.
831 | * @param {number} columns The number of columns in the table. Must be >= 1.
832 | * @param {boolean} fillWithNbsp If true, fills table entries with nsbps.
833 | * @return {!Element} The created table.
834 | * @private
835 | */
836 | goog.dom.createTable_ = function(doc, rows, columns, fillWithNbsp) {
837 | var rowHtml = ['<tr>'];
838 | for (var i = 0; i < columns; i++) {
839 | rowHtml.push(fillWithNbsp ? '<td>&nbsp;</td>' : '<td></td>');
840 | }
841 | rowHtml.push('</tr>');
842 | rowHtml = rowHtml.join('');
843 | var totalHtml = ['<table>'];
844 | for (i = 0; i < rows; i++) {
845 | totalHtml.push(rowHtml);
846 | }
847 | totalHtml.push('</table>');
848 |
849 | var elem = doc.createElement(goog.dom.TagName.DIV);
850 | elem.innerHTML = totalHtml.join('');
851 | return /** @type {!Element} */ (elem.removeChild(elem.firstChild));
852 | };
853 |
854 |
855 | /**
856 | * Converts an HTML string into a document fragment. The string must be
857 | * sanitized in order to avoid cross-site scripting. For example
858 | * {@code goog.dom.htmlToDocumentFragment('&lt;img src=x onerror=alert(0)&gt;')}
859 | * triggers an alert in all browsers, even if the returned document fragment
860 | * is thrown away immediately.
861 | *
862 | * @param {string} htmlString The HTML string to convert.
863 | * @return {!Node} The resulting document fragment.
864 | */
865 | goog.dom.htmlToDocumentFragment = function(htmlString) {
866 | return goog.dom.htmlToDocumentFragment_(document, htmlString);
867 | };
868 |
869 |
870 | /**
871 | * Helper for {@code htmlToDocumentFragment}.
872 | *
873 | * @param {!Document} doc The document.
874 | * @param {string} htmlString The HTML string to convert.
875 | * @return {!Node} The resulting document fragment.
876 | * @private
877 | */
878 | goog.dom.htmlToDocumentFragment_ = function(doc, htmlString) {
879 | var tempDiv = doc.createElement('div');
880 | if (goog.dom.BrowserFeature.INNER_HTML_NEEDS_SCOPED_ELEMENT) {
881 | tempDiv.innerHTML = '<br>' + htmlString;
882 | tempDiv.removeChild(tempDiv.firstChild);
883 | } else {
884 | tempDiv.innerHTML = htmlString;
885 | }
886 | if (tempDiv.childNodes.length == 1) {
887 | return /** @type {!Node} */ (tempDiv.removeChild(tempDiv.firstChild));
888 | } else {
889 | var fragment = doc.createDocumentFragment();
890 | while (tempDiv.firstChild) {
891 | fragment.appendChild(tempDiv.firstChild);
892 | }
893 | return fragment;
894 | }
895 | };
896 |
897 |
898 | /**
899 | * Returns true if the browser is in "CSS1-compatible" (standards-compliant)
900 | * mode, false otherwise.
901 | * @return {boolean} True if in CSS1-compatible mode.
902 | */
903 | goog.dom.isCss1CompatMode = function() {
904 | return goog.dom.isCss1CompatMode_(document);
905 | };
906 |
907 |
908 | /**
909 | * Returns true if the browser is in "CSS1-compatible" (standards-compliant)
910 | * mode, false otherwise.
911 | * @param {!Document} doc The document to check.
912 | * @return {boolean} True if in CSS1-compatible mode.
913 | * @private
914 | */
915 | goog.dom.isCss1CompatMode_ = function(doc) {
916 | if (goog.dom.COMPAT_MODE_KNOWN_) {
917 | return goog.dom.ASSUME_STANDARDS_MODE;
918 | }
919 |
920 | return doc.compatMode == 'CSS1Compat';
921 | };
922 |
923 |
924 | /**
925 | * Determines if the given node can contain children, intended to be used for
926 | * HTML generation.
927 | *
928 | * IE natively supports node.canHaveChildren but has inconsistent behavior.
929 | * Prior to IE8 the base tag allows children and in IE9 all nodes return true
930 | * for canHaveChildren.
931 | *
932 | * In practice all non-IE browsers allow you to add children to any node, but
933 | * the behavior is inconsistent:
934 | *
935 | * <pre>
936 | * var a = document.createElement('br');
937 | * a.appendChild(document.createTextNode('foo'));
938 | * a.appendChild(document.createTextNode('bar'));
939 | * console.log(a.childNodes.length); // 2
940 | * console.log(a.innerHTML); // Chrome: "", IE9: "foobar", FF3.5: "foobar"
941 | * </pre>
942 | *
943 | * For more information, see:
944 | * http://dev.w3.org/html5/markup/syntax.html#syntax-elements
945 | *
946 | * TODO(user): Rename shouldAllowChildren() ?
947 | *
948 | * @param {Node} node The node to check.
949 | * @return {boolean} Whether the node can contain children.
950 | */
951 | goog.dom.canHaveChildren = function(node) {
952 | if (node.nodeType != goog.dom.NodeType.ELEMENT) {
953 | return false;
954 | }
955 | switch (node.tagName) {
956 | case goog.dom.TagName.APPLET:
957 | case goog.dom.TagName.AREA:
958 | case goog.dom.TagName.BASE:
959 | case goog.dom.TagName.BR:
960 | case goog.dom.TagName.COL:
961 | case goog.dom.TagName.COMMAND:
962 | case goog.dom.TagName.EMBED:
963 | case goog.dom.TagName.FRAME:
964 | case goog.dom.TagName.HR:
965 | case goog.dom.TagName.IMG:
966 | case goog.dom.TagName.INPUT:
967 | case goog.dom.TagName.IFRAME:
968 | case goog.dom.TagName.ISINDEX:
969 | case goog.dom.TagName.KEYGEN:
970 | case goog.dom.TagName.LINK:
971 | case goog.dom.TagName.NOFRAMES:
972 | case goog.dom.TagName.NOSCRIPT:
973 | case goog.dom.TagName.META:
974 | case goog.dom.TagName.OBJECT:
975 | case goog.dom.TagName.PARAM:
976 | case goog.dom.TagName.SCRIPT:
977 | case goog.dom.TagName.SOURCE:
978 | case goog.dom.TagName.STYLE:
979 | case goog.dom.TagName.TRACK:
980 | case goog.dom.TagName.WBR:
981 | return false;
982 | }
983 | return true;
984 | };
985 |
986 |
987 | /**
988 | * Appends a child to a node.
989 | * @param {Node} parent Parent.
990 | * @param {Node} child Child.
991 | */
992 | goog.dom.appendChild = function(parent, child) {
993 | parent.appendChild(child);
994 | };
995 |
996 |
997 | /**
998 | * Appends a node with text or other nodes.
999 | * @param {!Node} parent The node to append nodes to.
1000 | * @param {...goog.dom.Appendable} var_args The things to append to the node.
1001 | * If this is a Node it is appended as is.
1002 | * If this is a string then a text node is appended.
1003 | * If this is an array like object then fields 0 to length - 1 are appended.
1004 | */
1005 | goog.dom.append = function(parent, var_args) {
1006 | goog.dom.append_(goog.dom.getOwnerDocument(parent), parent, arguments, 1);
1007 | };
1008 |
1009 |
1010 | /**
1011 | * Removes all the child nodes on a DOM node.
1012 | * @param {Node} node Node to remove children from.
1013 | */
1014 | goog.dom.removeChildren = function(node) {
1015 | // Note: Iterations over live collections can be slow, this is the fastest
1016 | // we could find. The double parenthesis are used to prevent JsCompiler and
1017 | // strict warnings.
1018 | var child;
1019 | while ((child = node.firstChild)) {
1020 | node.removeChild(child);
1021 | }
1022 | };
1023 |
1024 |
1025 | /**
1026 | * Inserts a new node before an existing reference node (i.e. as the previous
1027 | * sibling). If the reference node has no parent, then does nothing.
1028 | * @param {Node} newNode Node to insert.
1029 | * @param {Node} refNode Reference node to insert before.
1030 | */
1031 | goog.dom.insertSiblingBefore = function(newNode, refNode) {
1032 | if (refNode.parentNode) {
1033 | refNode.parentNode.insertBefore(newNode, refNode);
1034 | }
1035 | };
1036 |
1037 |
1038 | /**
1039 | * Inserts a new node after an existing reference node (i.e. as the next
1040 | * sibling). If the reference node has no parent, then does nothing.
1041 | * @param {Node} newNode Node to insert.
1042 | * @param {Node} refNode Reference node to insert after.
1043 | */
1044 | goog.dom.insertSiblingAfter = function(newNode, refNode) {
1045 | if (refNode.parentNode) {
1046 | refNode.parentNode.insertBefore(newNode, refNode.nextSibling);
1047 | }
1048 | };
1049 |
1050 |
1051 | /**
1052 | * Insert a child at a given index. If index is larger than the number of child
1053 | * nodes that the parent currently has, the node is inserted as the last child
1054 | * node.
1055 | * @param {Element} parent The element into which to insert the child.
1056 | * @param {Node} child The element to insert.
1057 | * @param {number} index The index at which to insert the new child node. Must
1058 | * not be negative.
1059 | */
1060 | goog.dom.insertChildAt = function(parent, child, index) {
1061 | // Note that if the second argument is null, insertBefore
1062 | // will append the child at the end of the list of children.
1063 | parent.insertBefore(child, parent.childNodes[index] || null);
1064 | };
1065 |
1066 |
1067 | /**
1068 | * Removes a node from its parent.
1069 | * @param {Node} node The node to remove.
1070 | * @return {Node} The node removed if removed; else, null.
1071 | */
1072 | goog.dom.removeNode = function(node) {
1073 | return node && node.parentNode ? node.parentNode.removeChild(node) : null;
1074 | };
1075 |
1076 |
1077 | /**
1078 | * Replaces a node in the DOM tree. Will do nothing if {@code oldNode} has no
1079 | * parent.
1080 | * @param {Node} newNode Node to insert.
1081 | * @param {Node} oldNode Node to replace.
1082 | */
1083 | goog.dom.replaceNode = function(newNode, oldNode) {
1084 | var parent = oldNode.parentNode;
1085 | if (parent) {
1086 | parent.replaceChild(newNode, oldNode);
1087 | }
1088 | };
1089 |
1090 |
1091 | /**
1092 | * Flattens an element. That is, removes it and replace it with its children.
1093 | * Does nothing if the element is not in the document.
1094 | * @param {Element} element The element to flatten.
1095 | * @return {Element|undefined} The original element, detached from the document
1096 | * tree, sans children; or undefined, if the element was not in the document
1097 | * to begin with.
1098 | */
1099 | goog.dom.flattenElement = function(element) {
1100 | var child, parent = element.parentNode;
1101 | if (parent && parent.nodeType != goog.dom.NodeType.DOCUMENT_FRAGMENT) {
1102 | // Use IE DOM method (supported by Opera too) if available
1103 | if (element.removeNode) {
1104 | return /** @type {Element} */ (element.removeNode(false));
1105 | } else {
1106 | // Move all children of the original node up one level.
1107 | while ((child = element.firstChild)) {
1108 | parent.insertBefore(child, element);
1109 | }
1110 |
1111 | // Detach the original element.
1112 | return /** @type {Element} */ (goog.dom.removeNode(element));
1113 | }
1114 | }
1115 | };
1116 |
1117 |
1118 | /**
1119 | * Returns an array containing just the element children of the given element.
1120 | * @param {Element} element The element whose element children we want.
1121 | * @return {!(Array|NodeList)} An array or array-like list of just the element
1122 | * children of the given element.
1123 | */
1124 | goog.dom.getChildren = function(element) {
1125 | // We check if the children attribute is supported for child elements
1126 | // since IE8 misuses the attribute by also including comments.
1127 | if (goog.dom.BrowserFeature.CAN_USE_CHILDREN_ATTRIBUTE &&
1128 | element.children != undefined) {
1129 | return element.children;
1130 | }
1131 | // Fall back to manually filtering the element's child nodes.
1132 | return goog.array.filter(element.childNodes, function(node) {
1133 | return node.nodeType == goog.dom.NodeType.ELEMENT;
1134 | });
1135 | };
1136 |
1137 |
1138 | /**
1139 | * Returns the first child node that is an element.
1140 | * @param {Node} node The node to get the first child element of.
1141 | * @return {Element} The first child node of {@code node} that is an element.
1142 | */
1143 | goog.dom.getFirstElementChild = function(node) {
1144 | if (node.firstElementChild != undefined) {
1145 | return /** @type {!Element} */(node).firstElementChild;
1146 | }
1147 | return goog.dom.getNextElementNode_(node.firstChild, true);
1148 | };
1149 |
1150 |
1151 | /**
1152 | * Returns the last child node that is an element.
1153 | * @param {Node} node The node to get the last child element of.
1154 | * @return {Element} The last child node of {@code node} that is an element.
1155 | */
1156 | goog.dom.getLastElementChild = function(node) {
1157 | if (node.lastElementChild != undefined) {
1158 | return /** @type {!Element} */(node).lastElementChild;
1159 | }
1160 | return goog.dom.getNextElementNode_(node.lastChild, false);
1161 | };
1162 |
1163 |
1164 | /**
1165 | * Returns the first next sibling that is an element.
1166 | * @param {Node} node The node to get the next sibling element of.
1167 | * @return {Element} The next sibling of {@code node} that is an element.
1168 | */
1169 | goog.dom.getNextElementSibling = function(node) {
1170 | if (node.nextElementSibling != undefined) {
1171 | return /** @type {!Element} */(node).nextElementSibling;
1172 | }
1173 | return goog.dom.getNextElementNode_(node.nextSibling, true);
1174 | };
1175 |
1176 |
1177 | /**
1178 | * Returns the first previous sibling that is an element.
1179 | * @param {Node} node The node to get the previous sibling element of.
1180 | * @return {Element} The first previous sibling of {@code node} that is
1181 | * an element.
1182 | */
1183 | goog.dom.getPreviousElementSibling = function(node) {
1184 | if (node.previousElementSibling != undefined) {
1185 | return /** @type {!Element} */(node).previousElementSibling;
1186 | }
1187 | return goog.dom.getNextElementNode_(node.previousSibling, false);
1188 | };
1189 |
1190 |
1191 | /**
1192 | * Returns the first node that is an element in the specified direction,
1193 | * starting with {@code node}.
1194 | * @param {Node} node The node to get the next element from.
1195 | * @param {boolean} forward Whether to look forwards or backwards.
1196 | * @return {Element} The first element.
1197 | * @private
1198 | */
1199 | goog.dom.getNextElementNode_ = function(node, forward) {
1200 | while (node && node.nodeType != goog.dom.NodeType.ELEMENT) {
1201 | node = forward ? node.nextSibling : node.previousSibling;
1202 | }
1203 |
1204 | return /** @type {Element} */ (node);
1205 | };
1206 |
1207 |
1208 | /**
1209 | * Returns the next node in source order from the given node.
1210 | * @param {Node} node The node.
1211 | * @return {Node} The next node in the DOM tree, or null if this was the last
1212 | * node.
1213 | */
1214 | goog.dom.getNextNode = function(node) {
1215 | if (!node) {
1216 | return null;
1217 | }
1218 |
1219 | if (node.firstChild) {
1220 | return node.firstChild;
1221 | }
1222 |
1223 | while (node && !node.nextSibling) {
1224 | node = node.parentNode;
1225 | }
1226 |
1227 | return node ? node.nextSibling : null;
1228 | };
1229 |
1230 |
1231 | /**
1232 | * Returns the previous node in source order from the given node.
1233 | * @param {Node} node The node.
1234 | * @return {Node} The previous node in the DOM tree, or null if this was the
1235 | * first node.
1236 | */
1237 | goog.dom.getPreviousNode = function(node) {
1238 | if (!node) {
1239 | return null;
1240 | }
1241 |
1242 | if (!node.previousSibling) {
1243 | return node.parentNode;
1244 | }
1245 |
1246 | node = node.previousSibling;
1247 | while (node && node.lastChild) {
1248 | node = node.lastChild;
1249 | }
1250 |
1251 | return node;
1252 | };
1253 |
1254 |
1255 | /**
1256 | * Whether the object looks like a DOM node.
1257 | * @param {?} obj The object being tested for node likeness.
1258 | * @return {boolean} Whether the object looks like a DOM node.
1259 | */
1260 | goog.dom.isNodeLike = function(obj) {
1261 | return goog.isObject(obj) && obj.nodeType > 0;
1262 | };
1263 |
1264 |
1265 | /**
1266 | * Whether the object looks like an Element.
1267 | * @param {?} obj The object being tested for Element likeness.
1268 | * @return {boolean} Whether the object looks like an Element.
1269 | */
1270 | goog.dom.isElement = function(obj) {
1271 | return goog.isObject(obj) && obj.nodeType == goog.dom.NodeType.ELEMENT;
1272 | };
1273 |
1274 |
1275 | /**
1276 | * Returns true if the specified value is a Window object. This includes the
1277 | * global window for HTML pages, and iframe windows.
1278 | * @param {?} obj Variable to test.
1279 | * @return {boolean} Whether the variable is a window.
1280 | */
1281 | goog.dom.isWindow = function(obj) {
1282 | return goog.isObject(obj) && obj['window'] == obj;
1283 | };
1284 |
1285 |
1286 | /**
1287 | * Returns an element's parent, if it's an Element.
1288 | * @param {Element} element The DOM element.
1289 | * @return {Element} The parent, or null if not an Element.
1290 | */
1291 | goog.dom.getParentElement = function(element) {
1292 | var parent;
1293 | if (goog.dom.BrowserFeature.CAN_USE_PARENT_ELEMENT_PROPERTY) {
1294 | var isIe9 = goog.userAgent.IE &&
1295 | goog.userAgent.isVersionOrHigher('9') &&
1296 | !goog.userAgent.isVersionOrHigher('10');
1297 | // SVG elements in IE9 can't use the parentElement property.
1298 | // goog.global['SVGElement'] is not defined in IE9 quirks mode.
1299 | if (!(isIe9 && goog.global['SVGElement'] &&
1300 | element instanceof goog.global['SVGElement'])) {
1301 | parent = element.parentElement;
1302 | if (parent) {
1303 | return parent;
1304 | }
1305 | }
1306 | }
1307 | parent = element.parentNode;
1308 | return goog.dom.isElement(parent) ? /** @type {!Element} */ (parent) : null;
1309 | };
1310 |
1311 |
1312 | /**
1313 | * Whether a node contains another node.
1314 | * @param {Node} parent The node that should contain the other node.
1315 | * @param {Node} descendant The node to test presence of.
1316 | * @return {boolean} Whether the parent node contains the descendent node.
1317 | */
1318 | goog.dom.contains = function(parent, descendant) {
1319 | // We use browser specific methods for this if available since it is faster
1320 | // that way.
1321 |
1322 | // IE DOM
1323 | if (parent.contains && descendant.nodeType == goog.dom.NodeType.ELEMENT) {
1324 | return parent == descendant || parent.contains(descendant);
1325 | }
1326 |
1327 | // W3C DOM Level 3
1328 | if (typeof parent.compareDocumentPosition != 'undefined') {
1329 | return parent == descendant ||
1330 | Boolean(parent.compareDocumentPosition(descendant) & 16);
1331 | }
1332 |
1333 | // W3C DOM Level 1
1334 | while (descendant && parent != descendant) {
1335 | descendant = descendant.parentNode;
1336 | }
1337 | return descendant == parent;
1338 | };
1339 |
1340 |
1341 | /**
1342 | * Compares the document order of two nodes, returning 0 if they are the same
1343 | * node, a negative number if node1 is before node2, and a positive number if
1344 | * node2 is before node1. Note that we compare the order the tags appear in the
1345 | * document so in the tree <b><i>text</i></b> the B node is considered to be
1346 | * before the I node.
1347 | *
1348 | * @param {Node} node1 The first node to compare.
1349 | * @param {Node} node2 The second node to compare.
1350 | * @return {number} 0 if the nodes are the same node, a negative number if node1
1351 | * is before node2, and a positive number if node2 is before node1.
1352 | */
1353 | goog.dom.compareNodeOrder = function(node1, node2) {
1354 | // Fall out quickly for equality.
1355 | if (node1 == node2) {
1356 | return 0;
1357 | }
1358 |
1359 | // Use compareDocumentPosition where available
1360 | if (node1.compareDocumentPosition) {
1361 | // 4 is the bitmask for FOLLOWS.
1362 | return node1.compareDocumentPosition(node2) & 2 ? 1 : -1;
1363 | }
1364 |
1365 | // Special case for document nodes on IE 7 and 8.
1366 | if (goog.userAgent.IE && !goog.userAgent.isDocumentModeOrHigher(9)) {
1367 | if (node1.nodeType == goog.dom.NodeType.DOCUMENT) {
1368 | return -1;
1369 | }
1370 | if (node2.nodeType == goog.dom.NodeType.DOCUMENT) {
1371 | return 1;
1372 | }
1373 | }
1374 |
1375 | // Process in IE using sourceIndex - we check to see if the first node has
1376 | // a source index or if its parent has one.
1377 | if ('sourceIndex' in node1 ||
1378 | (node1.parentNode && 'sourceIndex' in node1.parentNode)) {
1379 | var isElement1 = node1.nodeType == goog.dom.NodeType.ELEMENT;
1380 | var isElement2 = node2.nodeType == goog.dom.NodeType.ELEMENT;
1381 |
1382 | if (isElement1 && isElement2) {
1383 | return node1.sourceIndex - node2.sourceIndex;
1384 | } else {
1385 | var parent1 = node1.parentNode;
1386 | var parent2 = node2.parentNode;
1387 |
1388 | if (parent1 == parent2) {
1389 | return goog.dom.compareSiblingOrder_(node1, node2);
1390 | }
1391 |
1392 | if (!isElement1 && goog.dom.contains(parent1, node2)) {
1393 | return -1 * goog.dom.compareParentsDescendantNodeIe_(node1, node2);
1394 | }
1395 |
1396 |
1397 | if (!isElement2 && goog.dom.contains(parent2, node1)) {
1398 | return goog.dom.compareParentsDescendantNodeIe_(node2, node1);
1399 | }
1400 |
1401 | return (isElement1 ? node1.sourceIndex : parent1.sourceIndex) -
1402 | (isElement2 ? node2.sourceIndex : parent2.sourceIndex);
1403 | }
1404 | }
1405 |
1406 | // For Safari, we compare ranges.
1407 | var doc = goog.dom.getOwnerDocument(node1);
1408 |
1409 | var range1, range2;
1410 | range1 = doc.createRange();
1411 | range1.selectNode(node1);
1412 | range1.collapse(true);
1413 |
1414 | range2 = doc.createRange();
1415 | range2.selectNode(node2);
1416 | range2.collapse(true);
1417 |
1418 | return range1.compareBoundaryPoints(goog.global['Range'].START_TO_END,
1419 | range2);
1420 | };
1421 |
1422 |
1423 | /**
1424 | * Utility function to compare the position of two nodes, when
1425 | * {@code textNode}'s parent is an ancestor of {@code node}. If this entry
1426 | * condition is not met, this function will attempt to reference a null object.
1427 | * @param {!Node} textNode The textNode to compare.
1428 | * @param {Node} node The node to compare.
1429 | * @return {number} -1 if node is before textNode, +1 otherwise.
1430 | * @private
1431 | */
1432 | goog.dom.compareParentsDescendantNodeIe_ = function(textNode, node) {
1433 | var parent = textNode.parentNode;
1434 | if (parent == node) {
1435 | // If textNode is a child of node, then node comes first.
1436 | return -1;
1437 | }
1438 | var sibling = node;
1439 | while (sibling.parentNode != parent) {
1440 | sibling = sibling.parentNode;
1441 | }
1442 | return goog.dom.compareSiblingOrder_(sibling, textNode);
1443 | };
1444 |
1445 |
1446 | /**
1447 | * Utility function to compare the position of two nodes known to be non-equal
1448 | * siblings.
1449 | * @param {Node} node1 The first node to compare.
1450 | * @param {!Node} node2 The second node to compare.
1451 | * @return {number} -1 if node1 is before node2, +1 otherwise.
1452 | * @private
1453 | */
1454 | goog.dom.compareSiblingOrder_ = function(node1, node2) {
1455 | var s = node2;
1456 | while ((s = s.previousSibling)) {
1457 | if (s == node1) {
1458 | // We just found node1 before node2.
1459 | return -1;
1460 | }
1461 | }
1462 |
1463 | // Since we didn't find it, node1 must be after node2.
1464 | return 1;
1465 | };
1466 |
1467 |
1468 | /**
1469 | * Find the deepest common ancestor of the given nodes.
1470 | * @param {...Node} var_args The nodes to find a common ancestor of.
1471 | * @return {Node} The common ancestor of the nodes, or null if there is none.
1472 | * null will only be returned if two or more of the nodes are from different
1473 | * documents.
1474 | */
1475 | goog.dom.findCommonAncestor = function(var_args) {
1476 | var i, count = arguments.length;
1477 | if (!count) {
1478 | return null;
1479 | } else if (count == 1) {
1480 | return arguments[0];
1481 | }
1482 |
1483 | var paths = [];
1484 | var minLength = Infinity;
1485 | for (i = 0; i < count; i++) {
1486 | // Compute the list of ancestors.
1487 | var ancestors = [];
1488 | var node = arguments[i];
1489 | while (node) {
1490 | ancestors.unshift(node);
1491 | node = node.parentNode;
1492 | }
1493 |
1494 | // Save the list for comparison.
1495 | paths.push(ancestors);
1496 | minLength = Math.min(minLength, ancestors.length);
1497 | }
1498 | var output = null;
1499 | for (i = 0; i < minLength; i++) {
1500 | var first = paths[0][i];
1501 | for (var j = 1; j < count; j++) {
1502 | if (first != paths[j][i]) {
1503 | return output;
1504 | }
1505 | }
1506 | output = first;
1507 | }
1508 | return output;
1509 | };
1510 |
1511 |
1512 | /**
1513 | * Returns the owner document for a node.
1514 | * @param {Node|Window} node The node to get the document for.
1515 | * @return {!Document} The document owning the node.
1516 | */
1517 | goog.dom.getOwnerDocument = function(node) {
1518 | // TODO(nnaze): Update param signature to be non-nullable.
1519 | goog.asserts.assert(node, 'Node cannot be null or undefined.');
1520 | return /** @type {!Document} */ (
1521 | node.nodeType == goog.dom.NodeType.DOCUMENT ? node :
1522 | node.ownerDocument || node.document);
1523 | };
1524 |
1525 |
1526 | /**
1527 | * Cross-browser function for getting the document element of a frame or iframe.
1528 | * @param {Element} frame Frame element.
1529 | * @return {!Document} The frame content document.
1530 | */
1531 | goog.dom.getFrameContentDocument = function(frame) {
1532 | var doc = frame.contentDocument || frame.contentWindow.document;
1533 | return doc;
1534 | };
1535 |
1536 |
1537 | /**
1538 | * Cross-browser function for getting the window of a frame or iframe.
1539 | * @param {Element} frame Frame element.
1540 | * @return {Window} The window associated with the given frame.
1541 | */
1542 | goog.dom.getFrameContentWindow = function(frame) {
1543 | return frame.contentWindow ||
1544 | goog.dom.getWindow(goog.dom.getFrameContentDocument(frame));
1545 | };
1546 |
1547 |
1548 | /**
1549 | * Sets the text content of a node, with cross-browser support.
1550 | * @param {Node} node The node to change the text content of.
1551 | * @param {string|number} text The value that should replace the node's content.
1552 | */
1553 | goog.dom.setTextContent = function(node, text) {
1554 | goog.asserts.assert(node != null,
1555 | 'goog.dom.setTextContent expects a non-null value for node');
1556 |
1557 | if ('textContent' in node) {
1558 | node.textContent = text;
1559 | } else if (node.nodeType == goog.dom.NodeType.TEXT) {
1560 | node.data = text;
1561 | } else if (node.firstChild &&
1562 | node.firstChild.nodeType == goog.dom.NodeType.TEXT) {
1563 | // If the first child is a text node we just change its data and remove the
1564 | // rest of the children.
1565 | while (node.lastChild != node.firstChild) {
1566 | node.removeChild(node.lastChild);
1567 | }
1568 | node.firstChild.data = text;
1569 | } else {
1570 | goog.dom.removeChildren(node);
1571 | var doc = goog.dom.getOwnerDocument(node);
1572 | node.appendChild(doc.createTextNode(String(text)));
1573 | }
1574 | };
1575 |
1576 |
1577 | /**
1578 | * Gets the outerHTML of a node, which islike innerHTML, except that it
1579 | * actually contains the HTML of the node itself.
1580 | * @param {Element} element The element to get the HTML of.
1581 | * @return {string} The outerHTML of the given element.
1582 | */
1583 | goog.dom.getOuterHtml = function(element) {
1584 | // IE, Opera and WebKit all have outerHTML.
1585 | if ('outerHTML' in element) {
1586 | return element.outerHTML;
1587 | } else {
1588 | var doc = goog.dom.getOwnerDocument(element);
1589 | var div = doc.createElement('div');
1590 | div.appendChild(element.cloneNode(true));
1591 | return div.innerHTML;
1592 | }
1593 | };
1594 |
1595 |
1596 | /**
1597 | * Finds the first descendant node that matches the filter function, using
1598 | * a depth first search. This function offers the most general purpose way
1599 | * of finding a matching element. You may also wish to consider
1600 | * {@code goog.dom.query} which can express many matching criteria using
1601 | * CSS selector expressions. These expressions often result in a more
1602 | * compact representation of the desired result.
1603 | * @see goog.dom.query
1604 | *
1605 | * @param {Node} root The root of the tree to search.
1606 | * @param {function(Node) : boolean} p The filter function.
1607 | * @return {Node|undefined} The found node or undefined if none is found.
1608 | */
1609 | goog.dom.findNode = function(root, p) {
1610 | var rv = [];
1611 | var found = goog.dom.findNodes_(root, p, rv, true);
1612 | return found ? rv[0] : undefined;
1613 | };
1614 |
1615 |
1616 | /**
1617 | * Finds all the descendant nodes that match the filter function, using a
1618 | * a depth first search. This function offers the most general-purpose way
1619 | * of finding a set of matching elements. You may also wish to consider
1620 | * {@code goog.dom.query} which can express many matching criteria using
1621 | * CSS selector expressions. These expressions often result in a more
1622 | * compact representation of the desired result.
1623 |
1624 | * @param {Node} root The root of the tree to search.
1625 | * @param {function(Node) : boolean} p The filter function.
1626 | * @return {!Array<!Node>} The found nodes or an empty array if none are found.
1627 | */
1628 | goog.dom.findNodes = function(root, p) {
1629 | var rv = [];
1630 | goog.dom.findNodes_(root, p, rv, false);
1631 | return rv;
1632 | };
1633 |
1634 |
1635 | /**
1636 | * Finds the first or all the descendant nodes that match the filter function,
1637 | * using a depth first search.
1638 | * @param {Node} root The root of the tree to search.
1639 | * @param {function(Node) : boolean} p The filter function.
1640 | * @param {!Array<!Node>} rv The found nodes are added to this array.
1641 | * @param {boolean} findOne If true we exit after the first found node.
1642 | * @return {boolean} Whether the search is complete or not. True in case findOne
1643 | * is true and the node is found. False otherwise.
1644 | * @private
1645 | */
1646 | goog.dom.findNodes_ = function(root, p, rv, findOne) {
1647 | if (root != null) {
1648 | var child = root.firstChild;
1649 | while (child) {
1650 | if (p(child)) {
1651 | rv.push(child);
1652 | if (findOne) {
1653 | return true;
1654 | }
1655 | }
1656 | if (goog.dom.findNodes_(child, p, rv, findOne)) {
1657 | return true;
1658 | }
1659 | child = child.nextSibling;
1660 | }
1661 | }
1662 | return false;
1663 | };
1664 |
1665 |
1666 | /**
1667 | * Map of tags whose content to ignore when calculating text length.
1668 | * @private {!Object<string, number>}
1669 | * @const
1670 | */
1671 | goog.dom.TAGS_TO_IGNORE_ = {
1672 | 'SCRIPT': 1,
1673 | 'STYLE': 1,
1674 | 'HEAD': 1,
1675 | 'IFRAME': 1,
1676 | 'OBJECT': 1
1677 | };
1678 |
1679 |
1680 | /**
1681 | * Map of tags which have predefined values with regard to whitespace.
1682 | * @private {!Object<string, string>}
1683 | * @const
1684 | */
1685 | goog.dom.PREDEFINED_TAG_VALUES_ = {'IMG': ' ', 'BR': '\n'};
1686 |
1687 |
1688 | /**
1689 | * Returns true if the element has a tab index that allows it to receive
1690 | * keyboard focus (tabIndex >= 0), false otherwise. Note that some elements
1691 | * natively support keyboard focus, even if they have no tab index.
1692 | * @param {!Element} element Element to check.
1693 | * @return {boolean} Whether the element has a tab index that allows keyboard
1694 | * focus.
1695 | * @see http://fluidproject.org/blog/2008/01/09/getting-setting-and-removing-tabindex-values-with-javascript/
1696 | */
1697 | goog.dom.isFocusableTabIndex = function(element) {
1698 | return goog.dom.hasSpecifiedTabIndex_(element) &&
1699 | goog.dom.isTabIndexFocusable_(element);
1700 | };
1701 |
1702 |
1703 | /**
1704 | * Enables or disables keyboard focus support on the element via its tab index.
1705 | * Only elements for which {@link goog.dom.isFocusableTabIndex} returns true
1706 | * (or elements that natively support keyboard focus, like form elements) can
1707 | * receive keyboard focus. See http://go/tabindex for more info.
1708 | * @param {Element} element Element whose tab index is to be changed.
1709 | * @param {boolean} enable Whether to set or remove a tab index on the element
1710 | * that supports keyboard focus.
1711 | */
1712 | goog.dom.setFocusableTabIndex = function(element, enable) {
1713 | if (enable) {
1714 | element.tabIndex = 0;
1715 | } else {
1716 | // Set tabIndex to -1 first, then remove it. This is a workaround for
1717 | // Safari (confirmed in version 4 on Windows). When removing the attribute
1718 | // without setting it to -1 first, the element remains keyboard focusable
1719 | // despite not having a tabIndex attribute anymore.
1720 | element.tabIndex = -1;
1721 | element.removeAttribute('tabIndex'); // Must be camelCase!
1722 | }
1723 | };
1724 |
1725 |
1726 | /**
1727 | * Returns true if the element can be focused, i.e. it has a tab index that
1728 | * allows it to receive keyboard focus (tabIndex >= 0), or it is an element
1729 | * that natively supports keyboard focus.
1730 | * @param {!Element} element Element to check.
1731 | * @return {boolean} Whether the element allows keyboard focus.
1732 | */
1733 | goog.dom.isFocusable = function(element) {
1734 | var focusable;
1735 | // Some elements can have unspecified tab index and still receive focus.
1736 | if (goog.dom.nativelySupportsFocus_(element)) {
1737 | // Make sure the element is not disabled ...
1738 | focusable = !element.disabled &&
1739 | // ... and if a tab index is specified, it allows focus.
1740 | (!goog.dom.hasSpecifiedTabIndex_(element) ||
1741 | goog.dom.isTabIndexFocusable_(element));
1742 | } else {
1743 | focusable = goog.dom.isFocusableTabIndex(element);
1744 | }
1745 |
1746 | // IE requires elements to be visible in order to focus them.
1747 | return focusable && goog.userAgent.IE ?
1748 | goog.dom.hasNonZeroBoundingRect_(element) : focusable;
1749 | };
1750 |
1751 |
1752 | /**
1753 | * Returns true if the element has a specified tab index.
1754 | * @param {!Element} element Element to check.
1755 | * @return {boolean} Whether the element has a specified tab index.
1756 | * @private
1757 | */
1758 | goog.dom.hasSpecifiedTabIndex_ = function(element) {
1759 | // IE returns 0 for an unset tabIndex, so we must use getAttributeNode(),
1760 | // which returns an object with a 'specified' property if tabIndex is
1761 | // specified. This works on other browsers, too.
1762 | var attrNode = element.getAttributeNode('tabindex'); // Must be lowercase!
1763 | return goog.isDefAndNotNull(attrNode) && attrNode.specified;
1764 | };
1765 |
1766 |
1767 | /**
1768 | * Returns true if the element's tab index allows the element to be focused.
1769 | * @param {!Element} element Element to check.
1770 | * @return {boolean} Whether the element's tab index allows focus.
1771 | * @private
1772 | */
1773 | goog.dom.isTabIndexFocusable_ = function(element) {
1774 | var index = element.tabIndex;
1775 | // NOTE: IE9 puts tabIndex in 16-bit int, e.g. -2 is 65534.
1776 | return goog.isNumber(index) && index >= 0 && index < 32768;
1777 | };
1778 |
1779 |
1780 | /**
1781 | * Returns true if the element is focusable even when tabIndex is not set.
1782 | * @param {!Element} element Element to check.
1783 | * @return {boolean} Whether the element natively supports focus.
1784 | * @private
1785 | */
1786 | goog.dom.nativelySupportsFocus_ = function(element) {
1787 | return element.tagName == goog.dom.TagName.A ||
1788 | element.tagName == goog.dom.TagName.INPUT ||
1789 | element.tagName == goog.dom.TagName.TEXTAREA ||
1790 | element.tagName == goog.dom.TagName.SELECT ||
1791 | element.tagName == goog.dom.TagName.BUTTON;
1792 | };
1793 |
1794 |
1795 | /**
1796 | * Returns true if the element has a bounding rectangle that would be visible
1797 | * (i.e. its width and height are greater than zero).
1798 | * @param {!Element} element Element to check.
1799 | * @return {boolean} Whether the element has a non-zero bounding rectangle.
1800 | * @private
1801 | */
1802 | goog.dom.hasNonZeroBoundingRect_ = function(element) {
1803 | var rect = goog.isFunction(element['getBoundingClientRect']) ?
1804 | element.getBoundingClientRect() :
1805 | {'height': element.offsetHeight, 'width': element.offsetWidth};
1806 | return goog.isDefAndNotNull(rect) && rect.height > 0 && rect.width > 0;
1807 | };
1808 |
1809 |
1810 | /**
1811 | * Returns the text content of the current node, without markup and invisible
1812 | * symbols. New lines are stripped and whitespace is collapsed,
1813 | * such that each character would be visible.
1814 | *
1815 | * In browsers that support it, innerText is used. Other browsers attempt to
1816 | * simulate it via node traversal. Line breaks are canonicalized in IE.
1817 | *
1818 | * @param {Node} node The node from which we are getting content.
1819 | * @return {string} The text content.
1820 | */
1821 | goog.dom.getTextContent = function(node) {
1822 | var textContent;
1823 | // Note(arv): IE9, Opera, and Safari 3 support innerText but they include
1824 | // text nodes in script tags. So we revert to use a user agent test here.
1825 | if (goog.dom.BrowserFeature.CAN_USE_INNER_TEXT && ('innerText' in node)) {
1826 | textContent = goog.string.canonicalizeNewlines(node.innerText);
1827 | // Unfortunately .innerText() returns text with &shy; symbols
1828 | // We need to filter it out and then remove duplicate whitespaces
1829 | } else {
1830 | var buf = [];
1831 | goog.dom.getTextContent_(node, buf, true);
1832 | textContent = buf.join('');
1833 | }
1834 |
1835 | // Strip &shy; entities. goog.format.insertWordBreaks inserts them in Opera.
1836 | textContent = textContent.replace(/ \xAD /g, ' ').replace(/\xAD/g, '');
1837 | // Strip &#8203; entities. goog.format.insertWordBreaks inserts them in IE8.
1838 | textContent = textContent.replace(/\u200B/g, '');
1839 |
1840 | // Skip this replacement on old browsers with working innerText, which
1841 | // automatically turns &nbsp; into ' ' and / +/ into ' ' when reading
1842 | // innerText.
1843 | if (!goog.dom.BrowserFeature.CAN_USE_INNER_TEXT) {
1844 | textContent = textContent.replace(/ +/g, ' ');
1845 | }
1846 | if (textContent != ' ') {
1847 | textContent = textContent.replace(/^\s*/, '');
1848 | }
1849 |
1850 | return textContent;
1851 | };
1852 |
1853 |
1854 | /**
1855 | * Returns the text content of the current node, without markup.
1856 | *
1857 | * Unlike {@code getTextContent} this method does not collapse whitespaces
1858 | * or normalize lines breaks.
1859 | *
1860 | * @param {Node} node The node from which we are getting content.
1861 | * @return {string} The raw text content.
1862 | */
1863 | goog.dom.getRawTextContent = function(node) {
1864 | var buf = [];
1865 | goog.dom.getTextContent_(node, buf, false);
1866 |
1867 | return buf.join('');
1868 | };
1869 |
1870 |
1871 | /**
1872 | * Recursive support function for text content retrieval.
1873 | *
1874 | * @param {Node} node The node from which we are getting content.
1875 | * @param {Array<string>} buf string buffer.
1876 | * @param {boolean} normalizeWhitespace Whether to normalize whitespace.
1877 | * @private
1878 | */
1879 | goog.dom.getTextContent_ = function(node, buf, normalizeWhitespace) {
1880 | if (node.nodeName in goog.dom.TAGS_TO_IGNORE_) {
1881 | // ignore certain tags
1882 | } else if (node.nodeType == goog.dom.NodeType.TEXT) {
1883 | if (normalizeWhitespace) {
1884 | buf.push(String(node.nodeValue).replace(/(\r\n|\r|\n)/g, ''));
1885 | } else {
1886 | buf.push(node.nodeValue);
1887 | }
1888 | } else if (node.nodeName in goog.dom.PREDEFINED_TAG_VALUES_) {
1889 | buf.push(goog.dom.PREDEFINED_TAG_VALUES_[node.nodeName]);
1890 | } else {
1891 | var child = node.firstChild;
1892 | while (child) {
1893 | goog.dom.getTextContent_(child, buf, normalizeWhitespace);
1894 | child = child.nextSibling;
1895 | }
1896 | }
1897 | };
1898 |
1899 |
1900 | /**
1901 | * Returns the text length of the text contained in a node, without markup. This
1902 | * is equivalent to the selection length if the node was selected, or the number
1903 | * of cursor movements to traverse the node. Images & BRs take one space. New
1904 | * lines are ignored.
1905 | *
1906 | * @param {Node} node The node whose text content length is being calculated.
1907 | * @return {number} The length of {@code node}'s text content.
1908 | */
1909 | goog.dom.getNodeTextLength = function(node) {
1910 | return goog.dom.getTextContent(node).length;
1911 | };
1912 |
1913 |
1914 | /**
1915 | * Returns the text offset of a node relative to one of its ancestors. The text
1916 | * length is the same as the length calculated by goog.dom.getNodeTextLength.
1917 | *
1918 | * @param {Node} node The node whose offset is being calculated.
1919 | * @param {Node=} opt_offsetParent The node relative to which the offset will
1920 | * be calculated. Defaults to the node's owner document's body.
1921 | * @return {number} The text offset.
1922 | */
1923 | goog.dom.getNodeTextOffset = function(node, opt_offsetParent) {
1924 | var root = opt_offsetParent || goog.dom.getOwnerDocument(node).body;
1925 | var buf = [];
1926 | while (node && node != root) {
1927 | var cur = node;
1928 | while ((cur = cur.previousSibling)) {
1929 | buf.unshift(goog.dom.getTextContent(cur));
1930 | }
1931 | node = node.parentNode;
1932 | }
1933 | // Trim left to deal with FF cases when there might be line breaks and empty
1934 | // nodes at the front of the text
1935 | return goog.string.trimLeft(buf.join('')).replace(/ +/g, ' ').length;
1936 | };
1937 |
1938 |
1939 | /**
1940 | * Returns the node at a given offset in a parent node. If an object is
1941 | * provided for the optional third parameter, the node and the remainder of the
1942 | * offset will stored as properties of this object.
1943 | * @param {Node} parent The parent node.
1944 | * @param {number} offset The offset into the parent node.
1945 | * @param {Object=} opt_result Object to be used to store the return value. The
1946 | * return value will be stored in the form {node: Node, remainder: number}
1947 | * if this object is provided.
1948 | * @return {Node} The node at the given offset.
1949 | */
1950 | goog.dom.getNodeAtOffset = function(parent, offset, opt_result) {
1951 | var stack = [parent], pos = 0, cur = null;
1952 | while (stack.length > 0 && pos < offset) {
1953 | cur = stack.pop();
1954 | if (cur.nodeName in goog.dom.TAGS_TO_IGNORE_) {
1955 | // ignore certain tags
1956 | } else if (cur.nodeType == goog.dom.NodeType.TEXT) {
1957 | var text = cur.nodeValue.replace(/(\r\n|\r|\n)/g, '').replace(/ +/g, ' ');
1958 | pos += text.length;
1959 | } else if (cur.nodeName in goog.dom.PREDEFINED_TAG_VALUES_) {
1960 | pos += goog.dom.PREDEFINED_TAG_VALUES_[cur.nodeName].length;
1961 | } else {
1962 | for (var i = cur.childNodes.length - 1; i >= 0; i--) {
1963 | stack.push(cur.childNodes[i]);
1964 | }
1965 | }
1966 | }
1967 | if (goog.isObject(opt_result)) {
1968 | opt_result.remainder = cur ? cur.nodeValue.length + offset - pos - 1 : 0;
1969 | opt_result.node = cur;
1970 | }
1971 |
1972 | return cur;
1973 | };
1974 |
1975 |
1976 | /**
1977 | * Returns true if the object is a {@code NodeList}. To qualify as a NodeList,
1978 | * the object must have a numeric length property and an item function (which
1979 | * has type 'string' on IE for some reason).
1980 | * @param {Object} val Object to test.
1981 | * @return {boolean} Whether the object is a NodeList.
1982 | */
1983 | goog.dom.isNodeList = function(val) {
1984 | // TODO(attila): Now the isNodeList is part of goog.dom we can use
1985 | // goog.userAgent to make this simpler.
1986 | // A NodeList must have a length property of type 'number' on all platforms.
1987 | if (val && typeof val.length == 'number') {
1988 | // A NodeList is an object everywhere except Safari, where it's a function.
1989 | if (goog.isObject(val)) {
1990 | // A NodeList must have an item function (on non-IE platforms) or an item
1991 | // property of type 'string' (on IE).
1992 | return typeof val.item == 'function' || typeof val.item == 'string';
1993 | } else if (goog.isFunction(val)) {
1994 | // On Safari, a NodeList is a function with an item property that is also
1995 | // a function.
1996 | return typeof val.item == 'function';
1997 | }
1998 | }
1999 |
2000 | // Not a NodeList.
2001 | return false;
2002 | };
2003 |
2004 |
2005 | /**
2006 | * Walks up the DOM hierarchy returning the first ancestor that has the passed
2007 | * tag name and/or class name. If the passed element matches the specified
2008 | * criteria, the element itself is returned.
2009 | * @param {Node} element The DOM node to start with.
2010 | * @param {?(goog.dom.TagName|string)=} opt_tag The tag name to match (or
2011 | * null/undefined to match only based on class name).
2012 | * @param {?string=} opt_class The class name to match (or null/undefined to
2013 | * match only based on tag name).
2014 | * @param {number=} opt_maxSearchSteps Maximum number of levels to search up the
2015 | * dom.
2016 | * @return {Element} The first ancestor that matches the passed criteria, or
2017 | * null if no match is found.
2018 | */
2019 | goog.dom.getAncestorByTagNameAndClass = function(element, opt_tag, opt_class,
2020 | opt_maxSearchSteps) {
2021 | if (!opt_tag && !opt_class) {
2022 | return null;
2023 | }
2024 | var tagName = opt_tag ? opt_tag.toUpperCase() : null;
2025 | return /** @type {Element} */ (goog.dom.getAncestor(element,
2026 | function(node) {
2027 | return (!tagName || node.nodeName == tagName) &&
2028 | (!opt_class || goog.isString(node.className) &&
2029 | goog.array.contains(node.className.split(/\s+/), opt_class));
2030 | }, true, opt_maxSearchSteps));
2031 | };
2032 |
2033 |
2034 | /**
2035 | * Walks up the DOM hierarchy returning the first ancestor that has the passed
2036 | * class name. If the passed element matches the specified criteria, the
2037 | * element itself is returned.
2038 | * @param {Node} element The DOM node to start with.
2039 | * @param {string} className The class name to match.
2040 | * @param {number=} opt_maxSearchSteps Maximum number of levels to search up the
2041 | * dom.
2042 | * @return {Element} The first ancestor that matches the passed criteria, or
2043 | * null if none match.
2044 | */
2045 | goog.dom.getAncestorByClass = function(element, className, opt_maxSearchSteps) {
2046 | return goog.dom.getAncestorByTagNameAndClass(element, null, className,
2047 | opt_maxSearchSteps);
2048 | };
2049 |
2050 |
2051 | /**
2052 | * Walks up the DOM hierarchy returning the first ancestor that passes the
2053 | * matcher function.
2054 | * @param {Node} element The DOM node to start with.
2055 | * @param {function(Node) : boolean} matcher A function that returns true if the
2056 | * passed node matches the desired criteria.
2057 | * @param {boolean=} opt_includeNode If true, the node itself is included in
2058 | * the search (the first call to the matcher will pass startElement as
2059 | * the node to test).
2060 | * @param {number=} opt_maxSearchSteps Maximum number of levels to search up the
2061 | * dom.
2062 | * @return {Node} DOM node that matched the matcher, or null if there was
2063 | * no match.
2064 | */
2065 | goog.dom.getAncestor = function(
2066 | element, matcher, opt_includeNode, opt_maxSearchSteps) {
2067 | if (!opt_includeNode) {
2068 | element = element.parentNode;
2069 | }
2070 | var ignoreSearchSteps = opt_maxSearchSteps == null;
2071 | var steps = 0;
2072 | while (element && (ignoreSearchSteps || steps <= opt_maxSearchSteps)) {
2073 | if (matcher(element)) {
2074 | return element;
2075 | }
2076 | element = element.parentNode;
2077 | steps++;
2078 | }
2079 | // Reached the root of the DOM without a match
2080 | return null;
2081 | };
2082 |
2083 |
2084 | /**
2085 | * Determines the active element in the given document.
2086 | * @param {Document} doc The document to look in.
2087 | * @return {Element} The active element.
2088 | */
2089 | goog.dom.getActiveElement = function(doc) {
2090 | try {
2091 | return doc && doc.activeElement;
2092 | } catch (e) {
2093 | // NOTE(nicksantos): Sometimes, evaluating document.activeElement in IE
2094 | // throws an exception. I'm not 100% sure why, but I suspect it chokes
2095 | // on document.activeElement if the activeElement has been recently
2096 | // removed from the DOM by a JS operation.
2097 | //
2098 | // We assume that an exception here simply means
2099 | // "there is no active element."
2100 | }
2101 |
2102 | return null;
2103 | };
2104 |
2105 |
2106 | /**
2107 | * Gives the current devicePixelRatio.
2108 | *
2109 | * By default, this is the value of window.devicePixelRatio (which should be
2110 | * preferred if present).
2111 | *
2112 | * If window.devicePixelRatio is not present, the ratio is calculated with
2113 | * window.matchMedia, if present. Otherwise, gives 1.0.
2114 | *
2115 | * Some browsers (including Chrome) consider the browser zoom level in the pixel
2116 | * ratio, so the value may change across multiple calls.
2117 | *
2118 | * @return {number} The number of actual pixels per virtual pixel.
2119 | */
2120 | goog.dom.getPixelRatio = function() {
2121 | var win = goog.dom.getWindow();
2122 |
2123 | // devicePixelRatio does not work on Mobile firefox.
2124 | // TODO(user): Enable this check on a known working mobile Gecko version.
2125 | // Filed a bug: https://bugzilla.mozilla.org/show_bug.cgi?id=896804
2126 | var isFirefoxMobile = goog.userAgent.GECKO && goog.userAgent.MOBILE;
2127 |
2128 | if (goog.isDef(win.devicePixelRatio) && !isFirefoxMobile) {
2129 | return win.devicePixelRatio;
2130 | } else if (win.matchMedia) {
2131 | return goog.dom.matchesPixelRatio_(.75) ||
2132 | goog.dom.matchesPixelRatio_(1.5) ||
2133 | goog.dom.matchesPixelRatio_(2) ||
2134 | goog.dom.matchesPixelRatio_(3) || 1;
2135 | }
2136 | return 1;
2137 | };
2138 |
2139 |
2140 | /**
2141 | * Calculates a mediaQuery to check if the current device supports the
2142 | * given actual to virtual pixel ratio.
2143 | * @param {number} pixelRatio The ratio of actual pixels to virtual pixels.
2144 | * @return {number} pixelRatio if applicable, otherwise 0.
2145 | * @private
2146 | */
2147 | goog.dom.matchesPixelRatio_ = function(pixelRatio) {
2148 | var win = goog.dom.getWindow();
2149 | var query = ('(-webkit-min-device-pixel-ratio: ' + pixelRatio + '),' +
2150 | '(min--moz-device-pixel-ratio: ' + pixelRatio + '),' +
2151 | '(min-resolution: ' + pixelRatio + 'dppx)');
2152 | return win.matchMedia(query).matches ? pixelRatio : 0;
2153 | };
2154 |
2155 |
2156 |
2157 | /**
2158 | * Create an instance of a DOM helper with a new document object.
2159 | * @param {Document=} opt_document Document object to associate with this
2160 | * DOM helper.
2161 | * @constructor
2162 | */
2163 | goog.dom.DomHelper = function(opt_document) {
2164 | /**
2165 | * Reference to the document object to use
2166 | * @type {!Document}
2167 | * @private
2168 | */
2169 | this.document_ = opt_document || goog.global.document || document;
2170 | };
2171 |
2172 |
2173 | /**
2174 | * Gets the dom helper object for the document where the element resides.
2175 | * @param {Node=} opt_node If present, gets the DomHelper for this node.
2176 | * @return {!goog.dom.DomHelper} The DomHelper.
2177 | */
2178 | goog.dom.DomHelper.prototype.getDomHelper = goog.dom.getDomHelper;
2179 |
2180 |
2181 | /**
2182 | * Sets the document object.
2183 | * @param {!Document} document Document object.
2184 | */
2185 | goog.dom.DomHelper.prototype.setDocument = function(document) {
2186 | this.document_ = document;
2187 | };
2188 |
2189 |
2190 | /**
2191 | * Gets the document object being used by the dom library.
2192 | * @return {!Document} Document object.
2193 | */
2194 | goog.dom.DomHelper.prototype.getDocument = function() {
2195 | return this.document_;
2196 | };
2197 |
2198 |
2199 | /**
2200 | * Alias for {@code getElementById}. If a DOM node is passed in then we just
2201 | * return that.
2202 | * @param {string|Element} element Element ID or a DOM node.
2203 | * @return {Element} The element with the given ID, or the node passed in.
2204 | */
2205 | goog.dom.DomHelper.prototype.getElement = function(element) {
2206 | return goog.dom.getElementHelper_(this.document_, element);
2207 | };
2208 |
2209 |
2210 | /**
2211 | * Gets an element by id, asserting that the element is found.
2212 | *
2213 | * This is used when an element is expected to exist, and should fail with
2214 | * an assertion error if it does not (if assertions are enabled).
2215 | *
2216 | * @param {string} id Element ID.
2217 | * @return {!Element} The element with the given ID, if it exists.
2218 | */
2219 | goog.dom.DomHelper.prototype.getRequiredElement = function(id) {
2220 | return goog.dom.getRequiredElementHelper_(this.document_, id);
2221 | };
2222 |
2223 |
2224 | /**
2225 | * Alias for {@code getElement}.
2226 | * @param {string|Element} element Element ID or a DOM node.
2227 | * @return {Element} The element with the given ID, or the node passed in.
2228 | * @deprecated Use {@link goog.dom.DomHelper.prototype.getElement} instead.
2229 | */
2230 | goog.dom.DomHelper.prototype.$ = goog.dom.DomHelper.prototype.getElement;
2231 |
2232 |
2233 | /**
2234 | * Looks up elements by both tag and class name, using browser native functions
2235 | * ({@code querySelectorAll}, {@code getElementsByTagName} or
2236 | * {@code getElementsByClassName}) where possible. The returned array is a live
2237 | * NodeList or a static list depending on the code path taken.
2238 | *
2239 | * @see goog.dom.query
2240 | *
2241 | * @param {?string=} opt_tag Element tag name or * for all tags.
2242 | * @param {?string=} opt_class Optional class name.
2243 | * @param {(Document|Element)=} opt_el Optional element to look in.
2244 | * @return { {length: number} } Array-like list of elements (only a length
2245 | * property and numerical indices are guaranteed to exist).
2246 | */
2247 | goog.dom.DomHelper.prototype.getElementsByTagNameAndClass = function(opt_tag,
2248 | opt_class,
2249 | opt_el) {
2250 | return goog.dom.getElementsByTagNameAndClass_(this.document_, opt_tag,
2251 | opt_class, opt_el);
2252 | };
2253 |
2254 |
2255 | /**
2256 | * Returns an array of all the elements with the provided className.
2257 | * @see {goog.dom.query}
2258 | * @param {string} className the name of the class to look for.
2259 | * @param {Element|Document=} opt_el Optional element to look in.
2260 | * @return { {length: number} } The items found with the class name provided.
2261 | */
2262 | goog.dom.DomHelper.prototype.getElementsByClass = function(className, opt_el) {
2263 | var doc = opt_el || this.document_;
2264 | return goog.dom.getElementsByClass(className, doc);
2265 | };
2266 |
2267 |
2268 | /**
2269 | * Returns the first element we find matching the provided class name.
2270 | * @see {goog.dom.query}
2271 | * @param {string} className the name of the class to look for.
2272 | * @param {(Element|Document)=} opt_el Optional element to look in.
2273 | * @return {Element} The first item found with the class name provided.
2274 | */
2275 | goog.dom.DomHelper.prototype.getElementByClass = function(className, opt_el) {
2276 | var doc = opt_el || this.document_;
2277 | return goog.dom.getElementByClass(className, doc);
2278 | };
2279 |
2280 |
2281 | /**
2282 | * Ensures an element with the given className exists, and then returns the
2283 | * first element with the provided className.
2284 | * @see {goog.dom.query}
2285 | * @param {string} className the name of the class to look for.
2286 | * @param {(!Element|!Document)=} opt_root Optional element or document to look
2287 | * in.
2288 | * @return {!Element} The first item found with the class name provided.
2289 | * @throws {goog.asserts.AssertionError} Thrown if no element is found.
2290 | */
2291 | goog.dom.DomHelper.prototype.getRequiredElementByClass = function(className,
2292 | opt_root) {
2293 | var root = opt_root || this.document_;
2294 | return goog.dom.getRequiredElementByClass(className, root);
2295 | };
2296 |
2297 |
2298 | /**
2299 | * Alias for {@code getElementsByTagNameAndClass}.
2300 | * @deprecated Use DomHelper getElementsByTagNameAndClass.
2301 | * @see goog.dom.query
2302 | *
2303 | * @param {?string=} opt_tag Element tag name.
2304 | * @param {?string=} opt_class Optional class name.
2305 | * @param {Element=} opt_el Optional element to look in.
2306 | * @return { {length: number} } Array-like list of elements (only a length
2307 | * property and numerical indices are guaranteed to exist).
2308 | */
2309 | goog.dom.DomHelper.prototype.$$ =
2310 | goog.dom.DomHelper.prototype.getElementsByTagNameAndClass;
2311 |
2312 |
2313 | /**
2314 | * Sets a number of properties on a node.
2315 | * @param {Element} element DOM node to set properties on.
2316 | * @param {Object} properties Hash of property:value pairs.
2317 | */
2318 | goog.dom.DomHelper.prototype.setProperties = goog.dom.setProperties;
2319 |
2320 |
2321 | /**
2322 | * Gets the dimensions of the viewport.
2323 | * @param {Window=} opt_window Optional window element to test. Defaults to
2324 | * the window of the Dom Helper.
2325 | * @return {!goog.math.Size} Object with values 'width' and 'height'.
2326 | */
2327 | goog.dom.DomHelper.prototype.getViewportSize = function(opt_window) {
2328 | // TODO(arv): This should not take an argument. That breaks the rule of a
2329 | // a DomHelper representing a single frame/window/document.
2330 | return goog.dom.getViewportSize(opt_window || this.getWindow());
2331 | };
2332 |
2333 |
2334 | /**
2335 | * Calculates the height of the document.
2336 | *
2337 | * @return {number} The height of the document.
2338 | */
2339 | goog.dom.DomHelper.prototype.getDocumentHeight = function() {
2340 | return goog.dom.getDocumentHeight_(this.getWindow());
2341 | };
2342 |
2343 |
2344 | /**
2345 | * Typedef for use with goog.dom.createDom and goog.dom.append.
2346 | * @typedef {Object|string|Array|NodeList}
2347 | */
2348 | goog.dom.Appendable;
2349 |
2350 |
2351 | /**
2352 | * Returns a dom node with a set of attributes. This function accepts varargs
2353 | * for subsequent nodes to be added. Subsequent nodes will be added to the
2354 | * first node as childNodes.
2355 | *
2356 | * So:
2357 | * <code>createDom('div', null, createDom('p'), createDom('p'));</code>
2358 | * would return a div with two child paragraphs
2359 | *
2360 | * An easy way to move all child nodes of an existing element to a new parent
2361 | * element is:
2362 | * <code>createDom('div', null, oldElement.childNodes);</code>
2363 | * which will remove all child nodes from the old element and add them as
2364 | * child nodes of the new DIV.
2365 | *
2366 | * @param {string} tagName Tag to create.
2367 | * @param {Object|string=} opt_attributes If object, then a map of name-value
2368 | * pairs for attributes. If a string, then this is the className of the new
2369 | * element.
2370 | * @param {...goog.dom.Appendable} var_args Further DOM nodes or
2371 | * strings for text nodes. If one of the var_args is an array or
2372 | * NodeList, its elements will be added as childNodes instead.
2373 | * @return {!Element} Reference to a DOM node.
2374 | */
2375 | goog.dom.DomHelper.prototype.createDom = function(tagName,
2376 | opt_attributes,
2377 | var_args) {
2378 | return goog.dom.createDom_(this.document_, arguments);
2379 | };
2380 |
2381 |
2382 | /**
2383 | * Alias for {@code createDom}.
2384 | * @param {string} tagName Tag to create.
2385 | * @param {(Object|string)=} opt_attributes If object, then a map of name-value
2386 | * pairs for attributes. If a string, then this is the className of the new
2387 | * element.
2388 | * @param {...goog.dom.Appendable} var_args Further DOM nodes or strings for
2389 | * text nodes. If one of the var_args is an array, its children will be
2390 | * added as childNodes instead.
2391 | * @return {!Element} Reference to a DOM node.
2392 | * @deprecated Use {@link goog.dom.DomHelper.prototype.createDom} instead.
2393 | */
2394 | goog.dom.DomHelper.prototype.$dom = goog.dom.DomHelper.prototype.createDom;
2395 |
2396 |
2397 | /**
2398 | * Creates a new element.
2399 | * @param {string} name Tag name.
2400 | * @return {!Element} The new element.
2401 | */
2402 | goog.dom.DomHelper.prototype.createElement = function(name) {
2403 | return this.document_.createElement(name);
2404 | };
2405 |
2406 |
2407 | /**
2408 | * Creates a new text node.
2409 | * @param {number|string} content Content.
2410 | * @return {!Text} The new text node.
2411 | */
2412 | goog.dom.DomHelper.prototype.createTextNode = function(content) {
2413 | return this.document_.createTextNode(String(content));
2414 | };
2415 |
2416 |
2417 | /**
2418 | * Create a table.
2419 | * @param {number} rows The number of rows in the table. Must be >= 1.
2420 | * @param {number} columns The number of columns in the table. Must be >= 1.
2421 | * @param {boolean=} opt_fillWithNbsp If true, fills table entries with nsbps.
2422 | * @return {!Element} The created table.
2423 | */
2424 | goog.dom.DomHelper.prototype.createTable = function(rows, columns,
2425 | opt_fillWithNbsp) {
2426 | return goog.dom.createTable_(this.document_, rows, columns,
2427 | !!opt_fillWithNbsp);
2428 | };
2429 |
2430 |
2431 | /**
2432 | * Converts an HTML string into a node or a document fragment. A single Node
2433 | * is used if the {@code htmlString} only generates a single node. If the
2434 | * {@code htmlString} generates multiple nodes then these are put inside a
2435 | * {@code DocumentFragment}.
2436 | *
2437 | * @param {string} htmlString The HTML string to convert.
2438 | * @return {!Node} The resulting node.
2439 | */
2440 | goog.dom.DomHelper.prototype.htmlToDocumentFragment = function(htmlString) {
2441 | return goog.dom.htmlToDocumentFragment_(this.document_, htmlString);
2442 | };
2443 |
2444 |
2445 | /**
2446 | * Returns true if the browser is in "CSS1-compatible" (standards-compliant)
2447 | * mode, false otherwise.
2448 | * @return {boolean} True if in CSS1-compatible mode.
2449 | */
2450 | goog.dom.DomHelper.prototype.isCss1CompatMode = function() {
2451 | return goog.dom.isCss1CompatMode_(this.document_);
2452 | };
2453 |
2454 |
2455 | /**
2456 | * Gets the window object associated with the document.
2457 | * @return {!Window} The window associated with the given document.
2458 | */
2459 | goog.dom.DomHelper.prototype.getWindow = function() {
2460 | return goog.dom.getWindow_(this.document_);
2461 | };
2462 |
2463 |
2464 | /**
2465 | * Gets the document scroll element.
2466 | * @return {!Element} Scrolling element.
2467 | */
2468 | goog.dom.DomHelper.prototype.getDocumentScrollElement = function() {
2469 | return goog.dom.getDocumentScrollElement_(this.document_);
2470 | };
2471 |
2472 |
2473 | /**
2474 | * Gets the document scroll distance as a coordinate object.
2475 | * @return {!goog.math.Coordinate} Object with properties 'x' and 'y'.
2476 | */
2477 | goog.dom.DomHelper.prototype.getDocumentScroll = function() {
2478 | return goog.dom.getDocumentScroll_(this.document_);
2479 | };
2480 |
2481 |
2482 | /**
2483 | * Determines the active element in the given document.
2484 | * @param {Document=} opt_doc The document to look in.
2485 | * @return {Element} The active element.
2486 | */
2487 | goog.dom.DomHelper.prototype.getActiveElement = function(opt_doc) {
2488 | return goog.dom.getActiveElement(opt_doc || this.document_);
2489 | };
2490 |
2491 |
2492 | /**
2493 | * Appends a child to a node.
2494 | * @param {Node} parent Parent.
2495 | * @param {Node} child Child.
2496 | */
2497 | goog.dom.DomHelper.prototype.appendChild = goog.dom.appendChild;
2498 |
2499 |
2500 | /**
2501 | * Appends a node with text or other nodes.
2502 | * @param {!Node} parent The node to append nodes to.
2503 | * @param {...goog.dom.Appendable} var_args The things to append to the node.
2504 | * If this is a Node it is appended as is.
2505 | * If this is a string then a text node is appended.
2506 | * If this is an array like object then fields 0 to length - 1 are appended.
2507 | */
2508 | goog.dom.DomHelper.prototype.append = goog.dom.append;
2509 |
2510 |
2511 | /**
2512 | * Determines if the given node can contain children, intended to be used for
2513 | * HTML generation.
2514 | *
2515 | * @param {Node} node The node to check.
2516 | * @return {boolean} Whether the node can contain children.
2517 | */
2518 | goog.dom.DomHelper.prototype.canHaveChildren = goog.dom.canHaveChildren;
2519 |
2520 |
2521 | /**
2522 | * Removes all the child nodes on a DOM node.
2523 | * @param {Node} node Node to remove children from.
2524 | */
2525 | goog.dom.DomHelper.prototype.removeChildren = goog.dom.removeChildren;
2526 |
2527 |
2528 | /**
2529 | * Inserts a new node before an existing reference node (i.e., as the previous
2530 | * sibling). If the reference node has no parent, then does nothing.
2531 | * @param {Node} newNode Node to insert.
2532 | * @param {Node} refNode Reference node to insert before.
2533 | */
2534 | goog.dom.DomHelper.prototype.insertSiblingBefore = goog.dom.insertSiblingBefore;
2535 |
2536 |
2537 | /**
2538 | * Inserts a new node after an existing reference node (i.e., as the next
2539 | * sibling). If the reference node has no parent, then does nothing.
2540 | * @param {Node} newNode Node to insert.
2541 | * @param {Node} refNode Reference node to insert after.
2542 | */
2543 | goog.dom.DomHelper.prototype.insertSiblingAfter = goog.dom.insertSiblingAfter;
2544 |
2545 |
2546 | /**
2547 | * Insert a child at a given index. If index is larger than the number of child
2548 | * nodes that the parent currently has, the node is inserted as the last child
2549 | * node.
2550 | * @param {Element} parent The element into which to insert the child.
2551 | * @param {Node} child The element to insert.
2552 | * @param {number} index The index at which to insert the new child node. Must
2553 | * not be negative.
2554 | */
2555 | goog.dom.DomHelper.prototype.insertChildAt = goog.dom.insertChildAt;
2556 |
2557 |
2558 | /**
2559 | * Removes a node from its parent.
2560 | * @param {Node} node The node to remove.
2561 | * @return {Node} The node removed if removed; else, null.
2562 | */
2563 | goog.dom.DomHelper.prototype.removeNode = goog.dom.removeNode;
2564 |
2565 |
2566 | /**
2567 | * Replaces a node in the DOM tree. Will do nothing if {@code oldNode} has no
2568 | * parent.
2569 | * @param {Node} newNode Node to insert.
2570 | * @param {Node} oldNode Node to replace.
2571 | */
2572 | goog.dom.DomHelper.prototype.replaceNode = goog.dom.replaceNode;
2573 |
2574 |
2575 | /**
2576 | * Flattens an element. That is, removes it and replace it with its children.
2577 | * @param {Element} element The element to flatten.
2578 | * @return {Element|undefined} The original element, detached from the document
2579 | * tree, sans children, or undefined if the element was already not in the
2580 | * document.
2581 | */
2582 | goog.dom.DomHelper.prototype.flattenElement = goog.dom.flattenElement;
2583 |
2584 |
2585 | /**
2586 | * Returns an array containing just the element children of the given element.
2587 | * @param {Element} element The element whose element children we want.
2588 | * @return {!(Array|NodeList)} An array or array-like list of just the element
2589 | * children of the given element.
2590 | */
2591 | goog.dom.DomHelper.prototype.getChildren = goog.dom.getChildren;
2592 |
2593 |
2594 | /**
2595 | * Returns the first child node that is an element.
2596 | * @param {Node} node The node to get the first child element of.
2597 | * @return {Element} The first child node of {@code node} that is an element.
2598 | */
2599 | goog.dom.DomHelper.prototype.getFirstElementChild =
2600 | goog.dom.getFirstElementChild;
2601 |
2602 |
2603 | /**
2604 | * Returns the last child node that is an element.
2605 | * @param {Node} node The node to get the last child element of.
2606 | * @return {Element} The last child node of {@code node} that is an element.
2607 | */
2608 | goog.dom.DomHelper.prototype.getLastElementChild = goog.dom.getLastElementChild;
2609 |
2610 |
2611 | /**
2612 | * Returns the first next sibling that is an element.
2613 | * @param {Node} node The node to get the next sibling element of.
2614 | * @return {Element} The next sibling of {@code node} that is an element.
2615 | */
2616 | goog.dom.DomHelper.prototype.getNextElementSibling =
2617 | goog.dom.getNextElementSibling;
2618 |
2619 |
2620 | /**
2621 | * Returns the first previous sibling that is an element.
2622 | * @param {Node} node The node to get the previous sibling element of.
2623 | * @return {Element} The first previous sibling of {@code node} that is
2624 | * an element.
2625 | */
2626 | goog.dom.DomHelper.prototype.getPreviousElementSibling =
2627 | goog.dom.getPreviousElementSibling;
2628 |
2629 |
2630 | /**
2631 | * Returns the next node in source order from the given node.
2632 | * @param {Node} node The node.
2633 | * @return {Node} The next node in the DOM tree, or null if this was the last
2634 | * node.
2635 | */
2636 | goog.dom.DomHelper.prototype.getNextNode = goog.dom.getNextNode;
2637 |
2638 |
2639 | /**
2640 | * Returns the previous node in source order from the given node.
2641 | * @param {Node} node The node.
2642 | * @return {Node} The previous node in the DOM tree, or null if this was the
2643 | * first node.
2644 | */
2645 | goog.dom.DomHelper.prototype.getPreviousNode = goog.dom.getPreviousNode;
2646 |
2647 |
2648 | /**
2649 | * Whether the object looks like a DOM node.
2650 | * @param {?} obj The object being tested for node likeness.
2651 | * @return {boolean} Whether the object looks like a DOM node.
2652 | */
2653 | goog.dom.DomHelper.prototype.isNodeLike = goog.dom.isNodeLike;
2654 |
2655 |
2656 | /**
2657 | * Whether the object looks like an Element.
2658 | * @param {?} obj The object being tested for Element likeness.
2659 | * @return {boolean} Whether the object looks like an Element.
2660 | */
2661 | goog.dom.DomHelper.prototype.isElement = goog.dom.isElement;
2662 |
2663 |
2664 | /**
2665 | * Returns true if the specified value is a Window object. This includes the
2666 | * global window for HTML pages, and iframe windows.
2667 | * @param {?} obj Variable to test.
2668 | * @return {boolean} Whether the variable is a window.
2669 | */
2670 | goog.dom.DomHelper.prototype.isWindow = goog.dom.isWindow;
2671 |
2672 |
2673 | /**
2674 | * Returns an element's parent, if it's an Element.
2675 | * @param {Element} element The DOM element.
2676 | * @return {Element} The parent, or null if not an Element.
2677 | */
2678 | goog.dom.DomHelper.prototype.getParentElement = goog.dom.getParentElement;
2679 |
2680 |
2681 | /**
2682 | * Whether a node contains another node.
2683 | * @param {Node} parent The node that should contain the other node.
2684 | * @param {Node} descendant The node to test presence of.
2685 | * @return {boolean} Whether the parent node contains the descendent node.
2686 | */
2687 | goog.dom.DomHelper.prototype.contains = goog.dom.contains;
2688 |
2689 |
2690 | /**
2691 | * Compares the document order of two nodes, returning 0 if they are the same
2692 | * node, a negative number if node1 is before node2, and a positive number if
2693 | * node2 is before node1. Note that we compare the order the tags appear in the
2694 | * document so in the tree <b><i>text</i></b> the B node is considered to be
2695 | * before the I node.
2696 | *
2697 | * @param {Node} node1 The first node to compare.
2698 | * @param {Node} node2 The second node to compare.
2699 | * @return {number} 0 if the nodes are the same node, a negative number if node1
2700 | * is before node2, and a positive number if node2 is before node1.
2701 | */
2702 | goog.dom.DomHelper.prototype.compareNodeOrder = goog.dom.compareNodeOrder;
2703 |
2704 |
2705 | /**
2706 | * Find the deepest common ancestor of the given nodes.
2707 | * @param {...Node} var_args The nodes to find a common ancestor of.
2708 | * @return {Node} The common ancestor of the nodes, or null if there is none.
2709 | * null will only be returned if two or more of the nodes are from different
2710 | * documents.
2711 | */
2712 | goog.dom.DomHelper.prototype.findCommonAncestor = goog.dom.findCommonAncestor;
2713 |
2714 |
2715 | /**
2716 | * Returns the owner document for a node.
2717 | * @param {Node} node The node to get the document for.
2718 | * @return {!Document} The document owning the node.
2719 | */
2720 | goog.dom.DomHelper.prototype.getOwnerDocument = goog.dom.getOwnerDocument;
2721 |
2722 |
2723 | /**
2724 | * Cross browser function for getting the document element of an iframe.
2725 | * @param {Element} iframe Iframe element.
2726 | * @return {!Document} The frame content document.
2727 | */
2728 | goog.dom.DomHelper.prototype.getFrameContentDocument =
2729 | goog.dom.getFrameContentDocument;
2730 |
2731 |
2732 | /**
2733 | * Cross browser function for getting the window of a frame or iframe.
2734 | * @param {Element} frame Frame element.
2735 | * @return {Window} The window associated with the given frame.
2736 | */
2737 | goog.dom.DomHelper.prototype.getFrameContentWindow =
2738 | goog.dom.getFrameContentWindow;
2739 |
2740 |
2741 | /**
2742 | * Sets the text content of a node, with cross-browser support.
2743 | * @param {Node} node The node to change the text content of.
2744 | * @param {string|number} text The value that should replace the node's content.
2745 | */
2746 | goog.dom.DomHelper.prototype.setTextContent = goog.dom.setTextContent;
2747 |
2748 |
2749 | /**
2750 | * Gets the outerHTML of a node, which islike innerHTML, except that it
2751 | * actually contains the HTML of the node itself.
2752 | * @param {Element} element The element to get the HTML of.
2753 | * @return {string} The outerHTML of the given element.
2754 | */
2755 | goog.dom.DomHelper.prototype.getOuterHtml = goog.dom.getOuterHtml;
2756 |
2757 |
2758 | /**
2759 | * Finds the first descendant node that matches the filter function. This does
2760 | * a depth first search.
2761 | * @param {Node} root The root of the tree to search.
2762 | * @param {function(Node) : boolean} p The filter function.
2763 | * @return {Node|undefined} The found node or undefined if none is found.
2764 | */
2765 | goog.dom.DomHelper.prototype.findNode = goog.dom.findNode;
2766 |
2767 |
2768 | /**
2769 | * Finds all the descendant nodes that matches the filter function. This does a
2770 | * depth first search.
2771 | * @param {Node} root The root of the tree to search.
2772 | * @param {function(Node) : boolean} p The filter function.
2773 | * @return {Array<Node>} The found nodes or an empty array if none are found.
2774 | */
2775 | goog.dom.DomHelper.prototype.findNodes = goog.dom.findNodes;
2776 |
2777 |
2778 | /**
2779 | * Returns true if the element has a tab index that allows it to receive
2780 | * keyboard focus (tabIndex >= 0), false otherwise. Note that some elements
2781 | * natively support keyboard focus, even if they have no tab index.
2782 | * @param {!Element} element Element to check.
2783 | * @return {boolean} Whether the element has a tab index that allows keyboard
2784 | * focus.
2785 | */
2786 | goog.dom.DomHelper.prototype.isFocusableTabIndex = goog.dom.isFocusableTabIndex;
2787 |
2788 |
2789 | /**
2790 | * Enables or disables keyboard focus support on the element via its tab index.
2791 | * Only elements for which {@link goog.dom.isFocusableTabIndex} returns true
2792 | * (or elements that natively support keyboard focus, like form elements) can
2793 | * receive keyboard focus. See http://go/tabindex for more info.
2794 | * @param {Element} element Element whose tab index is to be changed.
2795 | * @param {boolean} enable Whether to set or remove a tab index on the element
2796 | * that supports keyboard focus.
2797 | */
2798 | goog.dom.DomHelper.prototype.setFocusableTabIndex =
2799 | goog.dom.setFocusableTabIndex;
2800 |
2801 |
2802 | /**
2803 | * Returns true if the element can be focused, i.e. it has a tab index that
2804 | * allows it to receive keyboard focus (tabIndex >= 0), or it is an element
2805 | * that natively supports keyboard focus.
2806 | * @param {!Element} element Element to check.
2807 | * @return {boolean} Whether the element allows keyboard focus.
2808 | */
2809 | goog.dom.DomHelper.prototype.isFocusable = goog.dom.isFocusable;
2810 |
2811 |
2812 | /**
2813 | * Returns the text contents of the current node, without markup. New lines are
2814 | * stripped and whitespace is collapsed, such that each character would be
2815 | * visible.
2816 | *
2817 | * In browsers that support it, innerText is used. Other browsers attempt to
2818 | * simulate it via node traversal. Line breaks are canonicalized in IE.
2819 | *
2820 | * @param {Node} node The node from which we are getting content.
2821 | * @return {string} The text content.
2822 | */
2823 | goog.dom.DomHelper.prototype.getTextContent = goog.dom.getTextContent;
2824 |
2825 |
2826 | /**
2827 | * Returns the text length of the text contained in a node, without markup. This
2828 | * is equivalent to the selection length if the node was selected, or the number
2829 | * of cursor movements to traverse the node. Images & BRs take one space. New
2830 | * lines are ignored.
2831 | *
2832 | * @param {Node} node The node whose text content length is being calculated.
2833 | * @return {number} The length of {@code node}'s text content.
2834 | */
2835 | goog.dom.DomHelper.prototype.getNodeTextLength = goog.dom.getNodeTextLength;
2836 |
2837 |
2838 | /**
2839 | * Returns the text offset of a node relative to one of its ancestors. The text
2840 | * length is the same as the length calculated by
2841 | * {@code goog.dom.getNodeTextLength}.
2842 | *
2843 | * @param {Node} node The node whose offset is being calculated.
2844 | * @param {Node=} opt_offsetParent Defaults to the node's owner document's body.
2845 | * @return {number} The text offset.
2846 | */
2847 | goog.dom.DomHelper.prototype.getNodeTextOffset = goog.dom.getNodeTextOffset;
2848 |
2849 |
2850 | /**
2851 | * Returns the node at a given offset in a parent node. If an object is
2852 | * provided for the optional third parameter, the node and the remainder of the
2853 | * offset will stored as properties of this object.
2854 | * @param {Node} parent The parent node.
2855 | * @param {number} offset The offset into the parent node.
2856 | * @param {Object=} opt_result Object to be used to store the return value. The
2857 | * return value will be stored in the form {node: Node, remainder: number}
2858 | * if this object is provided.
2859 | * @return {Node} The node at the given offset.
2860 | */
2861 | goog.dom.DomHelper.prototype.getNodeAtOffset = goog.dom.getNodeAtOffset;
2862 |
2863 |
2864 | /**
2865 | * Returns true if the object is a {@code NodeList}. To qualify as a NodeList,
2866 | * the object must have a numeric length property and an item function (which
2867 | * has type 'string' on IE for some reason).
2868 | * @param {Object} val Object to test.
2869 | * @return {boolean} Whether the object is a NodeList.
2870 | */
2871 | goog.dom.DomHelper.prototype.isNodeList = goog.dom.isNodeList;
2872 |
2873 |
2874 | /**
2875 | * Walks up the DOM hierarchy returning the first ancestor that has the passed
2876 | * tag name and/or class name. If the passed element matches the specified
2877 | * criteria, the element itself is returned.
2878 | * @param {Node} element The DOM node to start with.
2879 | * @param {?(goog.dom.TagName|string)=} opt_tag The tag name to match (or
2880 | * null/undefined to match only based on class name).
2881 | * @param {?string=} opt_class The class name to match (or null/undefined to
2882 | * match only based on tag name).
2883 | * @param {number=} opt_maxSearchSteps Maximum number of levels to search up the
2884 | * dom.
2885 | * @return {Element} The first ancestor that matches the passed criteria, or
2886 | * null if no match is found.
2887 | */
2888 | goog.dom.DomHelper.prototype.getAncestorByTagNameAndClass =
2889 | goog.dom.getAncestorByTagNameAndClass;
2890 |
2891 |
2892 | /**
2893 | * Walks up the DOM hierarchy returning the first ancestor that has the passed
2894 | * class name. If the passed element matches the specified criteria, the
2895 | * element itself is returned.
2896 | * @param {Node} element The DOM node to start with.
2897 | * @param {string} class The class name to match.
2898 | * @param {number=} opt_maxSearchSteps Maximum number of levels to search up the
2899 | * dom.
2900 | * @return {Element} The first ancestor that matches the passed criteria, or
2901 | * null if none match.
2902 | */
2903 | goog.dom.DomHelper.prototype.getAncestorByClass =
2904 | goog.dom.getAncestorByClass;
2905 |
2906 |
2907 | /**
2908 | * Walks up the DOM hierarchy returning the first ancestor that passes the
2909 | * matcher function.
2910 | * @param {Node} element The DOM node to start with.
2911 | * @param {function(Node) : boolean} matcher A function that returns true if the
2912 | * passed node matches the desired criteria.
2913 | * @param {boolean=} opt_includeNode If true, the node itself is included in
2914 | * the search (the first call to the matcher will pass startElement as
2915 | * the node to test).
2916 | * @param {number=} opt_maxSearchSteps Maximum number of levels to search up the
2917 | * dom.
2918 | * @return {Node} DOM node that matched the matcher, or null if there was
2919 | * no match.
2920 | */
2921 | goog.dom.DomHelper.prototype.getAncestor = goog.dom.getAncestor;