3
Copyright 2011 Yahoo! Inc. All rights reserved.
4
Licensed under the BSD License.
5
http://yuilibrary.com/license/
7
YUI.add('dom-base', function(Y) {
9
var documentElement = Y.config.doc.documentElement,
12
OWNER_DOCUMENT = 'ownerDocument',
14
addFeature = Y.Features.add,
15
testFeature = Y.Features.test;
19
* Returns the text content of the HTMLElement.
21
* @param {HTMLElement} element The html element.
22
* @return {String} The text content of the element (includes text of any descending elements).
24
getText: (documentElement.textContent !== undefined) ?
28
ret = element.textContent;
31
} : function(element) {
34
ret = element.innerText || element.nodeValue; // might be a textNode
40
* Sets the text content of the HTMLElement.
42
* @param {HTMLElement} element The html element.
43
* @param {String} content The content to add.
45
setText: (documentElement.textContent !== undefined) ?
46
function(element, content) {
48
element.textContent = content;
50
} : function(element, content) {
51
if ('innerText' in element) {
52
element.innerText = content;
53
} else if ('nodeValue' in element) {
54
element.nodeValue = content;
58
CUSTOM_ATTRIBUTES: (!documentElement.hasAttribute) ? { // IE < 8
67
* Provides a normalized attribute interface.
68
* @method setAttribute
69
* @param {HTMLElement} el The target element for the attribute.
70
* @param {String} attr The attribute to set.
71
* @param {String} val The value of the attribute.
73
setAttribute: function(el, attr, val, ieAttr) {
74
if (el && attr && el.setAttribute) {
75
attr = Y_DOM.CUSTOM_ATTRIBUTES[attr] || attr;
76
el.setAttribute(attr, val, ieAttr);
82
* Provides a normalized attribute interface.
84
* @param {HTMLElement} el The target element for the attribute.
85
* @param {String} attr The attribute to get.
86
* @return {String} The current value of the attribute.
88
getAttribute: function(el, attr, ieAttr) {
89
ieAttr = (ieAttr !== undefined) ? ieAttr : 2;
91
if (el && attr && el.getAttribute) {
92
attr = Y_DOM.CUSTOM_ATTRIBUTES[attr] || attr;
93
ret = el.getAttribute(attr, ieAttr);
96
ret = ''; // per DOM spec
106
getValue: function(node) {
107
var ret = '', // TODO: return null?
110
if (node && node[TAG_NAME]) {
111
getter = Y_DOM.VALUE_GETTERS[node[TAG_NAME].toLowerCase()];
120
// workaround for IE8 JSON stringify bug
121
// which converts empty string values to null
122
if (ret === EMPTY_STRING) {
123
ret = EMPTY_STRING; // for real
126
return (typeof ret === 'string') ? ret : '';
129
setValue: function(node, val) {
132
if (node && node[TAG_NAME]) {
133
setter = Y_DOM.VALUE_SETTERS[node[TAG_NAME].toLowerCase()];
146
addFeature('value-set', 'select', {
148
var node = Y.config.doc.createElement('select');
149
node.innerHTML = '<option>1</option><option>2</option>';
151
return (node.value && node.value === '2');
155
if (!testFeature('value-set', 'select')) {
156
Y_DOM.VALUE_SETTERS.select = function(node, val) {
157
for (var i = 0, options = node.getElementsByTagName('option'), option;
158
option = options[i++];) {
159
if (Y_DOM.getValue(option) === val) {
160
option.selected = true;
161
//Y_DOM.setAttribute(option, 'selected', 'selected');
168
Y.mix(Y_DOM.VALUE_GETTERS, {
169
button: function(node) {
170
return (node.attributes && node.attributes.value) ? node.attributes.value.value : '';
174
Y.mix(Y_DOM.VALUE_SETTERS, {
175
// IE: node.value changes the button text, which should be handled via innerHTML
176
button: function(node, val) {
177
var attr = node.attributes.value;
179
attr = node[OWNER_DOCUMENT].createAttribute('value');
180
node.setAttributeNode(attr);
188
Y.mix(Y_DOM.VALUE_GETTERS, {
189
option: function(node) {
190
var attrs = node.attributes;
191
return (attrs.value && attrs.value.specified) ? node.value : node.text;
194
select: function(node) {
195
var val = node.value,
196
options = node.options;
198
if (options && options.length) {
199
// TODO: implement multipe select
202
val = Y_DOM.getValue(options[node.selectedIndex]);
209
var addClass, hasClass, removeClass;
213
* Determines whether a DOM element has the given className.
216
* @param {HTMLElement} element The DOM element.
217
* @param {String} className the class name to search for
218
* @return {Boolean} Whether or not the element has the given class.
220
hasClass: function(node, className) {
221
var re = Y.DOM._getRegExp('(?:^|\\s+)' + className + '(?:\\s+|$)');
222
return re.test(node.className);
226
* Adds a class name to a given DOM element.
229
* @param {HTMLElement} element The DOM element.
230
* @param {String} className the class name to add to the class attribute
232
addClass: function(node, className) {
233
if (!Y.DOM.hasClass(node, className)) { // skip if already present
234
node.className = Y.Lang.trim([node.className, className].join(' '));
239
* Removes a class name from a given element.
240
* @method removeClass
242
* @param {HTMLElement} element The DOM element.
243
* @param {String} className the class name to remove from the class attribute
245
removeClass: function(node, className) {
246
if (className && hasClass(node, className)) {
247
node.className = Y.Lang.trim(node.className.replace(Y.DOM._getRegExp('(?:^|\\s+)' +
248
className + '(?:\\s+|$)'), ' '));
250
if ( hasClass(node, className) ) { // in case of multiple adjacent
251
removeClass(node, className);
257
* Replace a class with another class for a given element.
258
* If no oldClassName is present, the newClassName is simply added.
259
* @method replaceClass
261
* @param {HTMLElement} element The DOM element
262
* @param {String} oldClassName the class name to be replaced
263
* @param {String} newClassName the class name that will be replacing the old class name
265
replaceClass: function(node, oldC, newC) {
266
removeClass(node, oldC); // remove first in case oldC === newC
267
addClass(node, newC);
271
* If the className exists on the node it is removed, if it doesn't exist it is added.
272
* @method toggleClass
274
* @param {HTMLElement} element The DOM element
275
* @param {String} className the class name to be toggled
276
* @param {Boolean} addClass optional boolean to indicate whether class
277
* should be added or removed regardless of current state
279
toggleClass: function(node, className, force) {
280
var add = (force !== undefined) ? force :
281
!(hasClass(node, className));
284
addClass(node, className);
286
removeClass(node, className);
291
hasClass = Y.DOM.hasClass;
292
removeClass = Y.DOM.removeClass;
293
addClass = Y.DOM.addClass;
295
var re_tag = /<([a-z]+)/i,
299
addFeature = Y.Features.add,
300
testFeature = Y.Features.test,
304
createFromDIV = function(html, tag) {
305
var div = Y.config.doc.createElement('div'),
308
div.innerHTML = html;
309
if (!div.firstChild || div.firstChild.tagName !== tag.toUpperCase()) {
316
re_tbody = /(?:\/(?:thead|tfoot|tbody|caption|col|colgroup)>)+\s*<tbody/,
318
TABLE_OPEN = '<table>',
319
TABLE_CLOSE = '</table>';
324
_create: function(html, doc, tag) {
327
var frag = Y_DOM._fragClones[tag];
329
frag = frag.cloneNode(false);
331
frag = Y_DOM._fragClones[tag] = doc.createElement(tag);
333
frag.innerHTML = html;
338
* Creates a new dom node using the provided markup string.
340
* @param {String} html The markup used to create the element
341
* @param {HTMLDocument} doc An optional document context
342
* @return {HTMLElement|DocumentFragment} returns a single HTMLElement
343
* when creating one node, and a documentFragment when creating
346
create: function(html, doc) {
347
if (typeof html === 'string') {
348
html = Y.Lang.trim(html); // match IE which trims whitespace from innerHTML
352
doc = doc || Y.config.doc;
353
var m = re_tag.exec(html),
354
create = Y_DOM._create,
360
if (html != undefined) { // not undefined or null
362
creator = custom[m[1].toLowerCase()];
363
if (typeof creator === 'function') {
370
nodes = create(html, doc, tag).childNodes;
372
if (nodes.length === 1) { // return single node, breaking parentNode ref from "fragment"
373
ret = nodes[0].parentNode.removeChild(nodes[0]);
374
} else if (nodes[0] && nodes[0].className === 'yui3-big-dummy') { // using dummy node to preserve some attributes (e.g. OPTION not selected)
375
if (nodes.length === 2) {
376
ret = nodes[0].nextSibling;
378
nodes[0].parentNode.removeChild(nodes[0]);
379
ret = Y_DOM._nl2frag(nodes, doc);
381
} else { // return multiple nodes as a fragment
382
ret = Y_DOM._nl2frag(nodes, doc);
389
_nl2frag: function(nodes, doc) {
393
if (nodes && (nodes.push || nodes.item) && nodes[0]) {
394
doc = doc || nodes[0].ownerDocument;
395
ret = doc.createDocumentFragment();
397
if (nodes.item) { // convert live list to static array
398
nodes = Y.Array(nodes, 0, true);
401
for (i = 0, len = nodes.length; i < len; i++) {
402
ret.appendChild(nodes[i]);
404
} // else inline with log for minification
409
* Inserts content in a node at the given location
411
* @param {HTMLElement} node The node to insert into
412
* @param {HTMLElement | Array | HTMLCollection} content The content to be inserted
413
* @param {HTMLElement} where Where to insert the content
414
* If no "where" is given, content is appended to the node
415
* Possible values for "where"
417
* <dt>HTMLElement</dt>
418
* <dd>The element to insert before</dd>
420
* <dd>Replaces the existing HTML</dd>
422
* <dd>Inserts before the existing HTML</dd>
424
* <dd>Inserts content before the node</dd>
426
* <dd>Inserts content after the node</dd>
429
addHTML: function(node, content, where) {
430
var nodeParent = node.parentNode,
437
if (content != undefined) { // not null or undefined (maybe 0)
438
if (content.nodeType) { // DOM node, just add it
440
} else if (typeof content == 'string' || typeof content == 'number') {
441
ret = newNode = Y_DOM.create(content);
442
} else if (content[0] && content[0].nodeType) { // array or collection
443
newNode = Y.config.doc.createDocumentFragment();
444
while ((item = content[i++])) {
445
newNode.appendChild(item); // append to fragment for insertion
451
if (newNode && where.parentNode) { // insert regardless of relationship to node
452
where.parentNode.insertBefore(newNode, where);
456
while (node.firstChild) {
457
node.removeChild(node.firstChild);
459
if (newNode) { // allow empty content to clear node
460
node.appendChild(newNode);
465
nodeParent.insertBefore(newNode, node);
470
if (node.nextSibling) { // IE errors if refNode is null
471
nodeParent.insertBefore(newNode, node.nextSibling);
473
nodeParent.appendChild(newNode);
479
node.appendChild(newNode);
483
} else if (newNode) {
484
node.appendChild(newNode);
491
addFeature('innerhtml', 'table', {
493
var node = Y.config.doc.createElement('table');
495
node.innerHTML = '<tbody></tbody>';
499
return (node.firstChild && node.firstChild.nodeName === 'TBODY');
503
addFeature('innerhtml-div', 'tr', {
505
return createFromDIV('<tr></tr>', 'tr');
509
addFeature('innerhtml-div', 'script', {
511
return createFromDIV('<script></script>', 'script');
515
if (!testFeature('innerhtml', 'table')) {
516
// TODO: thead/tfoot with nested tbody
517
// IE adds TBODY when creating TABLE elements (which may share this impl)
518
creators.tbody = function(html, doc) {
519
var frag = Y_DOM.create(TABLE_OPEN + html + TABLE_CLOSE, doc),
520
tb = frag.children.tags('tbody')[0];
522
if (frag.children.length > 1 && tb && !re_tbody.test(html)) {
523
tb.parentNode.removeChild(tb); // strip extraneous tbody
529
if (!testFeature('innerhtml-div', 'script')) {
530
creators.script = function(html, doc) {
531
var frag = doc.createElement('div');
533
frag.innerHTML = '-' + html;
534
frag.removeChild(frag.firstChild);
538
creators.link = creators.style = creators.script;
541
if (!testFeature('innerhtml-div', 'tr')) {
543
option: function(html, doc) {
544
return Y_DOM.create('<select><option class="yui3-big-dummy" selected></option>' + html + '</select>', doc);
547
tr: function(html, doc) {
548
return Y_DOM.create('<tbody>' + html + '</tbody>', doc);
551
td: function(html, doc) {
552
return Y_DOM.create('<tr>' + html + '</tr>', doc);
555
col: function(html, doc) {
556
return Y_DOM.create('<colgroup>' + html + '</colgroup>', doc);
565
thead: creators.tbody,
566
tfoot: creators.tbody,
567
caption: creators.tbody,
568
colgroup: creators.tbody,
569
optgroup: creators.option
573
Y_DOM.creators = creators;
576
* Sets the width of the element to the given size, regardless
577
* of box model, border, padding, etc.
579
* @param {HTMLElement} element The DOM element.
580
* @param {String|Int} size The pixel height to size to
583
setWidth: function(node, size) {
584
Y.DOM._setSize(node, 'width', size);
588
* Sets the height of the element to the given size, regardless
589
* of box model, border, padding, etc.
591
* @param {HTMLElement} element The DOM element.
592
* @param {String|Int} size The pixel height to size to
595
setHeight: function(node, size) {
596
Y.DOM._setSize(node, 'height', size);
599
_setSize: function(node, prop, val) {
600
val = (val > 0) ? val : 0;
603
node.style[prop] = val + 'px';
604
size = (prop === 'height') ? node.offsetHeight : node.offsetWidth;
607
val = val - (size - val);
613
node.style[prop] = val + 'px';
619
}, '3.4.1' ,{requires:['dom-core']});