2
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
3
Code licensed under the BSD License:
4
http://developer.yahoo.net/yui/license.txt
8
YUI.add('dom-base', function(Y) {
12
* The DOM utility provides a cross-browser abtraction layer
13
* normalizing DOM tasks, and adds extra helper functionality
14
* for other common tasks.
21
* Provides DOM helper methods.
25
var NODE_TYPE = 'nodeType',
26
OWNER_DOCUMENT = 'ownerDocument',
27
DEFAULT_VIEW = 'defaultView',
28
PARENT_WINDOW = 'parentWindow',
30
PARENT_NODE = 'parentNode',
31
FIRST_CHILD = 'firstChild',
32
PREVIOUS_SIBLING = 'previousSibling',
33
NEXT_SIBLING = 'nextSibling',
34
CONTAINS = 'contains',
35
COMPARE_DOCUMENT_POSITION = 'compareDocumentPosition',
37
documentElement = document.documentElement,
39
re_tag = /<([a-z]+)/i;
43
* Returns the HTMLElement with the given ID (Wrapper for document.getElementById).
45
* @param {String} id the id attribute
46
* @param {Object} doc optional The document to search. Defaults to current document
47
* @return {HTMLElement | null} The HTMLElement with the id, or null if none found.
49
byId: function(id, doc) {
50
doc = doc || Y.config.doc;
52
return doc.getElementById(id);
56
children: function(node, tag) {
60
ret = Y.Selector.query('> ' + tag, node);
66
firstByTag: function(tag, root) {
68
root = root || Y.config.doc;
70
if (tag && root.getElementsByTagName) {
71
ret = root.getElementsByTagName(tag)[0];
78
* Returns the text content of the HTMLElement.
80
* @param {HTMLElement} element The html element.
81
* @return {String} The text content of the element (includes text of any descending elements).
83
getText: (documentElement.textContent !== undefined) ?
87
ret = element.textContent;
90
} : function(element) {
93
ret = element.innerText;
99
* Sets the text content of the HTMLElement.
101
* @param {HTMLElement} element The html element.
102
* @param {String} content The content to add.
104
setText: (documentElement.textContent !== undefined) ?
105
function(element, content) {
107
element.textContent = content;
109
} : function(element, content) {
111
element.innerText = content;
116
* Finds the previous sibling of the element.
118
* @deprecated Use elementByAxis
119
* @param {HTMLElement} element The html element.
120
* @param {Function} fn optional An optional boolean test to apply.
121
* The optional function is passed the current DOM node being tested as its only argument.
122
* If no function is given, the first sibling is returned.
123
* @param {Boolean} all optional Whether all node types should be scanned, or just element nodes.
124
* @return {HTMLElement | null} The matching DOM node or null if none found.
126
previous: function(element, fn, all) {
127
return Y.DOM.elementByAxis(element, PREVIOUS_SIBLING, fn, all);
131
* Finds the next sibling of the element.
133
* @deprecated Use elementByAxis
134
* @param {HTMLElement} element The html element.
135
* @param {Function} fn optional An optional boolean test to apply.
136
* The optional function is passed the current DOM node being tested as its only argument.
137
* If no function is given, the first sibling is returned.
138
* @param {Boolean} all optional Whether all node types should be scanned, or just element nodes.
139
* @return {HTMLElement | null} The matching DOM node or null if none found.
141
next: function(element, fn, all) {
142
return Y.DOM.elementByAxis(element, NEXT_SIBLING, fn, all);
146
* Finds the ancestor of the element.
148
* @deprecated Use elementByAxis
149
* @param {HTMLElement} element The html element.
150
* @param {Function} fn optional An optional boolean test to apply.
151
* The optional function is passed the current DOM node being tested as its only argument.
152
* If no function is given, the parentNode is returned.
153
* @param {Boolean} all optional Whether all node types should be scanned, or just element nodes.
154
* @return {HTMLElement | null} The matching DOM node or null if none found.
156
// TODO: optional stopAt node?
157
ancestor: function(element, fn, all) {
158
return Y.DOM.elementByAxis(element, PARENT_NODE, fn, all);
162
* Searches the element by the given axis for the first matching element.
163
* @method elementByAxis
164
* @param {HTMLElement} element The html element.
165
* @param {String} axis The axis to search (parentNode, nextSibling, previousSibling).
166
* @param {Function} fn optional An optional boolean test to apply.
167
* @param {Boolean} all optional Whether all node types should be returned, or just element nodes.
168
* The optional function is passed the current HTMLElement being tested as its only argument.
169
* If no function is given, the first element is returned.
170
* @return {HTMLElement | null} The matching element or null if none found.
172
elementByAxis: function(element, axis, fn, all) {
173
while (element && (element = element[axis])) { // NOTE: assignment
174
if ( (all || element[TAG_NAME]) && (!fn || fn(element)) ) {
182
* Determines whether or not one HTMLElement is or contains another HTMLElement.
184
* @param {HTMLElement} element The containing html element.
185
* @param {HTMLElement} needle The html element that may be contained.
186
* @return {Boolean} Whether or not the element is or contains the needle.
188
contains: function(element, needle) {
191
if ( !needle || !element || !needle[NODE_TYPE] || !element[NODE_TYPE]) {
193
} else if (element[CONTAINS]) {
194
if (Y.UA.opera || needle[NODE_TYPE] === 1) { // IE & SAF contains fail if needle not an ELEMENT_NODE
195
ret = element[CONTAINS](needle);
197
ret = Y.DOM._bruteContains(element, needle);
199
} else if (element[COMPARE_DOCUMENT_POSITION]) { // gecko
200
if (element === needle || !!(element[COMPARE_DOCUMENT_POSITION](needle) & 16)) {
209
* Determines whether or not the HTMLElement is part of the document.
211
* @param {HTMLElement} element The containing html element.
212
* @param {HTMLElement} doc optional The document to check.
213
* @return {Boolean} Whether or not the element is attached to the document.
215
inDoc: function(element, doc) {
216
doc = doc || element[OWNER_DOCUMENT];
218
if (!id) { // TODO: remove when done?
219
id = element.id = Y.guid();
222
return !! (doc.getElementById(id));
226
* Creates a new dom node using the provided markup string.
228
* @param {String} html The markup used to create the element
229
* @param {HTMLDocument} doc An optional document context
231
create: function(html, doc) {
232
if (typeof html === 'string') {
233
html = Y.Lang.trim(html); // match IE which trims whitespace from innerHTML
236
if (!doc && Y.DOM._cloneCache[html]) {
237
return Y.DOM._cloneCache[html].cloneNode(true); // NOTE: return
240
doc = doc || Y.config.doc;
241
var m = re_tag.exec(html),
242
create = Y.DOM._create,
243
custom = Y.DOM.creators,
247
if (m && custom[m[1]]) {
248
if (typeof custom[m[1]] === 'function') {
249
create = custom[m[1]];
255
nodes = create(html, doc, tag).childNodes;
257
if (nodes.length === 1) { // return single node, breaking parentNode ref from "fragment"
258
ret = nodes[0].parentNode.removeChild(nodes[0]);
259
} else { // return multiple nodes as a fragment
260
ret = Y.DOM._nl2frag(nodes, doc);
264
Y.DOM._cloneCache[html] = ret.cloneNode(true);
269
_nl2frag: function(nodes, doc) {
273
if (nodes && (nodes.push || nodes.item) && nodes[0]) {
274
doc = doc || nodes[0].ownerDocument;
275
ret = doc.createDocumentFragment();
277
if (nodes.item) { // convert live list to static array
278
nodes = Y.Array(nodes, 0, true);
281
for (i = 0, len = nodes.length; i < len; i++) {
282
ret.appendChild(nodes[i]);
284
} // else inline with log for minification
285
else { Y.log('unable to convert ' + nodes + ' to fragment', 'warn', 'dom'); }
290
CUSTOM_ATTRIBUTES: (!documentElement.hasAttribute) ? { // IE < 8
299
* Provides a normalized attribute interface.
300
* @method setAttibute
301
* @param {String | HTMLElement} el The target element for the attribute.
302
* @param {String} attr The attribute to set.
303
* @param {String} val The value of the attribute.
305
setAttribute: function(el, attr, val, ieAttr) {
306
if (el && el.setAttribute) {
307
attr = Y.DOM.CUSTOM_ATTRIBUTES[attr] || attr;
308
el.setAttribute(attr, val, ieAttr);
314
* Provides a normalized attribute interface.
315
* @method getAttibute
316
* @param {String | HTMLElement} el The target element for the attribute.
317
* @param {String} attr The attribute to get.
318
* @return {String} The current value of the attribute.
320
getAttribute: function(el, attr, ieAttr) {
321
ieAttr = (ieAttr !== undefined) ? ieAttr : 2;
323
if (el && el.getAttribute) {
324
attr = Y.DOM.CUSTOM_ATTRIBUTES[attr] || attr;
325
ret = el.getAttribute(attr, ieAttr);
328
ret = ''; // per DOM spec
334
isWindow: function(obj) {
335
return obj.alert && obj.document;
339
div: document.createElement('div')
342
_create: function(html, doc, tag) {
345
var frag = Y.DOM._fragClones[tag];
347
frag = frag.cloneNode(false);
349
frag = Y.DOM._fragClones[tag] = doc.createElement(tag);
351
frag.innerHTML = html;
355
_removeChildNodes: function(node) {
356
while (node.firstChild) {
357
node.removeChild(node.firstChild);
364
* Inserts content in a node at the given location
366
* @param {HTMLElement} node The node to insert into
367
* @param {String} content The content to be inserted
368
* @param {String} where Where to insert the content; default is after lastChild
370
addHTML: function(node, content, where) {
371
if (typeof content === 'string') {
372
content = Y.Lang.trim(content); // match IE which trims whitespace from innerHTML
375
var newNode = Y.DOM._cloneCache[content],
376
nodeParent = node.parentNode;
379
newNode = newNode.cloneNode(true);
381
if (content.nodeType) { // domNode
383
} else { // create from string and cache
384
newNode = Y.DOM.create(content);
389
if (where.nodeType) { // insert regardless of relationship to node
390
// TODO: check if node.contains(where)?
391
where.parentNode.insertBefore(newNode, where);
395
while (node.firstChild) {
396
node.removeChild(node.firstChild);
398
node.appendChild(newNode);
401
nodeParent.insertBefore(newNode, node);
404
if (node.nextSibling) { // IE errors if refNode is null
405
nodeParent.insertBefore(newNode, node.nextSibling);
407
nodeParent.appendChild(newNode);
411
node.appendChild(newNode);
415
node.appendChild(newNode);
425
getValue: function(node) {
426
var ret = '', // TODO: return null?
429
if (node && node[TAG_NAME]) {
430
getter = Y.DOM.VALUE_GETTERS[node[TAG_NAME].toLowerCase()];
439
return (typeof ret === 'string') ? ret : '';
442
setValue: function(node, val) {
445
if (node && node[TAG_NAME]) {
446
setter = Y.DOM.VALUE_SETTERS[node[TAG_NAME].toLowerCase()];
457
* Brute force version of contains.
458
* Used for browsers without contains support for non-HTMLElement Nodes (textNodes, etc).
459
* @method _bruteContains
461
* @param {HTMLElement} element The containing html element.
462
* @param {HTMLElement} needle The html element that may be contained.
463
* @return {Boolean} Whether or not the element is or contains the needle.
465
_bruteContains: function(element, needle) {
467
if (element === needle) {
470
needle = needle.parentNode;
475
// TODO: move to Lang?
477
* Memoizes dynamic regular expressions to boost runtime performance.
480
* @param {String} str The string to convert to a regular expression.
481
* @param {String} flags optional An optinal string of flags.
482
* @return {RegExp} An instance of RegExp
484
_getRegExp: function(str, flags) {
486
Y.DOM._regexCache = Y.DOM._regexCache || {};
487
if (!Y.DOM._regexCache[str + flags]) {
488
Y.DOM._regexCache[str + flags] = new RegExp(str, flags);
490
return Y.DOM._regexCache[str + flags];
493
// TODO: make getDoc/Win true privates?
495
* returns the appropriate document.
498
* @param {HTMLElement} element optional Target element.
499
* @return {Object} The document for the given element or the default document.
501
_getDoc: function(element) {
502
element = element || {};
504
return (element[NODE_TYPE] === 9) ? element : // element === document
505
element[OWNER_DOCUMENT] || // element === DOM node
506
element.document || // element === window
507
Y.config.doc; // default
511
* returns the appropriate window.
514
* @param {HTMLElement} element optional Target element.
515
* @return {Object} The window for the given element or the default window.
517
_getWin: function(element) {
518
var doc = Y.DOM._getDoc(element);
519
return doc[DEFAULT_VIEW] || doc[PARENT_WINDOW] || Y.config.win;
522
_batch: function(nodes, fn, arg1, arg2, arg3, etc) {
523
fn = (typeof name === 'string') ? Y.DOM[fn] : fn;
528
Y.each(nodes, function(node) {
529
if ((result = fn.call(Y.DOM, node, arg1, arg2, arg3, etc)) !== undefined) {
530
ret[ret.length] = result;
535
return ret.length ? ret : nodes;
538
_testElement: function(element, tag, fn) {
539
tag = (tag && tag !== '*') ? tag.toUpperCase() : null;
540
return (element && element[TAG_NAME] &&
541
(!tag || element[TAG_NAME].toUpperCase() === tag) &&
542
(!fn || fn(element)));
547
_IESimpleCreate: function(html, doc) {
548
doc = doc || Y.config.doc;
549
return doc.createElement(html);
555
var creators = Y.DOM.creators,
556
create = Y.DOM.create,
557
re_tbody = /(?:\/(?:thead|tfoot|tbody|caption|col|colgroup)>)+\s*<tbody/,
559
TABLE_OPEN = '<table>',
560
TABLE_CLOSE = '</table>';
564
// TODO: thead/tfoot with nested tbody
565
// IE adds TBODY when creating TABLE elements (which may share this impl)
566
tbody: function(html, doc) {
567
var frag = create(TABLE_OPEN + html + TABLE_CLOSE, doc),
568
tb = frag.children.tags('tbody')[0];
570
if (frag.children.length > 1 && tb && !re_tbody.test(html)) {
571
tb[PARENT_NODE].removeChild(tb); // strip extraneous tbody
576
script: function(html, doc) {
577
var frag = doc.createElement('div');
579
frag.innerHTML = '-' + html;
580
frag.removeChild(frag[FIRST_CHILD]);
586
Y.mix(Y.DOM.VALUE_GETTERS, {
587
button: function(node) {
588
return (node.attributes && node.attributes.value) ? node.attributes.value.value : '';
592
Y.mix(Y.DOM.VALUE_SETTERS, {
593
// IE: node.value changes the button text, which should be handled via innerHTML
594
button: function(node, val) {
595
var attr = node.attributes.value;
597
attr = node[OWNER_DOCUMENT].createAttribute('value');
598
node.setAttributeNode(attr);
606
if (Y.UA.gecko || Y.UA.ie) {
608
option: function(html, doc) {
609
return create('<select>' + html + '</select>', doc);
612
tr: function(html, doc) {
613
return create('<tbody>' + html + '</tbody>', doc);
616
td: function(html, doc) {
617
return create('<tr>' + html + '</tr>', doc);
620
tbody: function(html, doc) {
621
return create(TABLE_OPEN + html + TABLE_CLOSE, doc);
628
thead: creators.tbody,
629
tfoot: creators.tbody,
630
caption: creators.tbody,
631
colgroup: creators.tbody,
633
optgroup: creators.option
637
Y.mix(Y.DOM.VALUE_GETTERS, {
638
option: function(node) {
639
var attrs = node.attributes;
640
return (attrs.value && attrs.value.specified) ? node.value : node.text;
643
select: function(node) {
644
var val = node.value,
645
options = node.options;
647
if (options && val === '') {
649
Y.log('multiple select normalization not implemented', 'warn', 'DOM');
651
val = Y.DOM.getValue(options[node.selectedIndex], 'value');
661
var addClass, hasClass, removeClass;
665
* Determines whether a DOM element has the given className.
667
* @param {HTMLElement} element The DOM element.
668
* @param {String} className the class name to search for
669
* @return {Boolean} Whether or not the element has the given class.
671
hasClass: function(node, className) {
672
var re = Y.DOM._getRegExp('(?:^|\\s+)' + className + '(?:\\s+|$)');
673
return re.test(node.className);
677
* Adds a class name to a given DOM element.
679
* @param {HTMLElement} element The DOM element.
680
* @param {String} className the class name to add to the class attribute
682
addClass: function(node, className) {
683
if (!Y.DOM.hasClass(node, className)) { // skip if already present
684
node.className = Y.Lang.trim([node.className, className].join(' '));
689
* Removes a class name from a given element.
690
* @method removeClass
691
* @param {HTMLElement} element The DOM element.
692
* @param {String} className the class name to remove from the class attribute
694
removeClass: function(node, className) {
695
if (className && hasClass(node, className)) {
696
node.className = Y.Lang.trim(node.className.replace(Y.DOM._getRegExp('(?:^|\\s+)' +
697
className + '(?:\\s+|$)'), ' '));
699
if ( hasClass(node, className) ) { // in case of multiple adjacent
700
removeClass(node, className);
706
* Replace a class with another class for a given element.
707
* If no oldClassName is present, the newClassName is simply added.
708
* @method replaceClass
709
* @param {HTMLElement} element The DOM element.
710
* @param {String} oldClassName the class name to be replaced
711
* @param {String} newClassName the class name that will be replacing the old class name
713
replaceClass: function(node, oldC, newC) {
714
//Y.log('replaceClass replacing ' + oldC + ' with ' + newC, 'info', 'Node');
715
addClass(node, newC);
716
removeClass(node, oldC);
720
* If the className exists on the node it is removed, if it doesn't exist it is added.
721
* @method toggleClass
722
* @param {HTMLElement} element The DOM element.
723
* @param {String} className the class name to be toggled
725
toggleClass: function(node, className) {
726
if (hasClass(node, className)) {
727
removeClass(node, className);
729
addClass(node, className);
734
hasClass = Y.DOM.hasClass;
735
removeClass = Y.DOM.removeClass;
736
addClass = Y.DOM.addClass;
740
}, '3.0.0' ,{requires:['oop']});