Make Ox.$ work with more than one element

source/Ox/js/DOM.js

@@ -30,11 +30,10 @@ Ox.$ <f> Generic HTML element, mimics jQuery
 Ox.$ = Ox.element = function(value) {
 
     var data = {},
-        element = !Ox.isString(value) ? value // window, document or element
+        elements = Ox.isArray(value) ? value // array of elements
-            : value[0] == '<' ? document.createElement(value.slice(1, -1))
+            : !Ox.isString(value) ? [value] // window, document or element
-            : value[0] == '#' ? document.getElementById(value.slice(1))
+            : value[0] == '<' ? [document.createElement(value.slice(1, -1))]
-            : value[0] == '.' ? document.getElementsByClassName(value.slice(1))[0]
+            : Ox.slice(document.querySelectorAll(value)),
-            : document.getElementsByTagName(value)[0],
         mousewheelEvents = ['wheel', 'mousewheel'],
         originalMousewheelEvents = 'onwheel' in document ? ['wheel']
             : ['mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'];
@@ -53,207 +52,312 @@ Ox.$ = Ox.element = function(value) {
         return ret;
     }
 
-    return element ? {
+    function removeOxElements(parent, includeParent) {
-        //@ 0 <h> The DOM element itself
+        if (includeParent) {
-        0: element,
+            removeOxElement(parent);
+        } else {
+            parent.find('.OxElement').forEach(removeOxElement);
+        }
+        function removeOxElement(element) {
+            Ox.getOxElement(element).removeElement();
+        }
+    }
+
+    return elements.length ? Ox.extend(
+        Ox.zipObject(Ox.range(elements.length), elements
+    ), {
         /*@
-        addClass <f> Adds a class name
+        add <f> Adds another DOM object to this DOM object
-            (className) -> <o> This element
+            (other) -> This DOM object
+            other <o> Other DOM object
+        @*/
+        add: function add($other) {
+            elements = Ox.unique(elements.concat(other.elements()));
+            this.length = elements.length;
+            return this;
+        },
+        /*@
+        addClass <f> Adds a class name to all elements
+            (className) -> <o> This DOM object
             className <s> Class name
         @*/
-        addClass: function(string) {
+        addClass: function addClass(string) {
-            this[0].className = Ox.unique(((
+            string = Ox.clean(string);
-                this[0].className ? this[0].className + ' ' : ''
+            elements.forEach(function(element) {
-            ) + Ox.clean(string)).split(' ')).join(' ');
+                element.className = Ox.unique(((
-            return this;
+                    element.className ? element.className + ' ' : ''
-        },
+                ) + string).split(' ')).join(' ');
-        /*@
-        append <f> Appends one or more elements to this element
-            (element[, element[, ...]]) -> <o> This element
-            element <o> Another element
-        @*/
-        append: function() {
-            var that = this;
-            Ox.slice(arguments).forEach(function($element) {
-                that[0].appendChild($element[0]);                
             });
             return this;
         },
         /*@
-        appendTo <f> Appends this element object to another element object
+        append <f> Appends one or more DOM objects to this DOM object
-            (element) -> <o> This element
+            (object[, object[, ...]]) -> <o> This DOM object
-            element <o> Another element
+            element <o> Another DOM object
         @*/
-        appendTo: function($element) {
+        append: function append() {
-            $element[0].appendChild(this[0]);
+            var $others = Ox.slice(arguments);
+            elements.forEach(function(element) {
+                $others.forEach(function($other) {
+                    $other.forEach(function(otherElement) {
+                        element.appendChild(otherElement);
+                    });
+                });
+            });
             return this;
         },
         /*@
-        attr <f> Gets or sets an attribute
+        appendTo <f> Appends this DOM object to another DOM object
+            (object) -> <o> This DOM object
+            object <o> Another DOM object
+        @*/
+        appendTo: function appendTo($other) {
+            $other.forEach(function(otherElement) {
+                elements.forEach(function(element) {
+                    otherElement.appendChild(element);
+                });
+            });
+            return this;
+        },
+        /*@
+        attr <f> Gets or sets an attribute for all elements
             (key) -> <s> Value
-            (key, value) -> <o> This element
+            (key, value) -> <o> This DOM object
-            ({key0: value0, key1: value1, ...}) -> <o> This element
+            ({key0: value0, key1: value1, ...}) -> <o> This DOM object
             key <s> Attribute name
             value <s> Attribute value
         @*/
-        attr: function() {
+        attr: function attr() {
-            var ret, that = this;
+            var args = arguments, ret, that = this;
-            if (arguments.length == 1 && Ox.isString(arguments[0])) {
+            if (args.length == 1 && Ox.isString(args[0])) {
                 ret = this[0].getAttribute
-                    ? this[0].getAttribute(arguments[0])
+                    ? this[0].getAttribute(args[0])
-                    : null;
+                    : void 0;
                 // fixme: why exactly is this needed?
-                if (ret === null) {
+                return ret === null ? void 0 : ret;
-                    ret = void 0;
-                }
             } else {
-                Ox.forEach(Ox.makeObject(arguments), function(value, key) {
+                args = Ox.makeObject(args);
-                    that[0].setAttribute && that[0].setAttribute(key, value);
+                elements.forEach(function(element) {
-                });
+                    Ox.forEach(args, function(value, key) {
-                ret = this;
+                        if (element.setAttribute) {
+                            element.setAttribute(key, value);
+                        }
+                    });
+                });
+                return this;
             }
-            return ret;
         },
         /*@
-        children <f> Returns the children of this element
+        children <f> Returns the unique list of children of all elements
             () -> <[h]> Children
         @*/
-        children: function() {
+        children: function children() {
-            return Ox.slice(this[0].childNodes);
+            return Ox.unique(Ox.flatten(elements.map(function(element) {
+                return Ox.slice(element.childNodes);
+            })));
         },
         /*@
-        css <f> Gets or sets a CSS attribute
+        css <f> Gets or sets a CSS attribute for all elements
             (key) -> <s> Value
-            (key, value) -> <o> This element
+            (key, value) -> <o> This DOM object
-            ({key0: value0, key1: value1, ...}) -> <o> This element
+            ({key0: value0, key1: value1, ...}) -> <o> This DOM object
             key <s> Attribute name
             value <s> Attribute value
         @*/
-        css: function() {
+        css: function css() {
-            var ret, that = this;
+            var args = arguments;
-            if (arguments.length == 1 && Ox.isString(arguments[0])) {
+            if (args.length == 1 && Ox.isString(args[0])) {
-                ret = this[0].style[arguments[0]];
+                return elements[0].style[args[0]];
             } else {
-                Ox.forEach(Ox.makeObject(arguments), function(value, key) {
+                args = Ox.makeObject(args);
-                    that[0].style[key] = value;
+                elements.forEach(function(element) {
+                    Ox.forEach(args, function(value, key) {
+                        element.style[key] = value;
                     });
-                ret = this;
+                });
+                return this;
             }
-            return ret;
         },
         /*@
         data <f> Gets or sets data
             () -> <o> All data
             (key) -> <s> Value
-            (key, value) -> <o> This element
+            (key, value) -> <o> This DOM object
-            ({key0: value0, key1: value1, ...}) -> <o> This element
+            ({key0: value0, key1: value1, ...}) -> <o> This DOM object
             key <s> Property
             value <*> Value
         @*/
-        data: function() {
+        data: function data() {
-            var ret;
             if (arguments.length == 0) {
-                ret = data;
+                return data;
             } else if (arguments.length == 1 && Ox.isString(arguments[0])) {
-                ret = data[arguments[0]];
+                return data[arguments[0]];
             } else {
                 Ox.forEach(Ox.makeObject(arguments), function(value, key) {
                     data[key] = value;
                 });
-                ret = this;
+                return this;
             }
-            return ret;
         },
         /*@
-        empty <f> Empties the inner HTML
+        elements <f> Returns all elements
-            () -> <o> This element
+            () -> <[h]> All elements
         @*/
-        empty: function() {
+        elements: function elements() {
+            return elements;
+        },
+        /*@
+        empty <f> Empties the inner HTML of all elements
+            () -> <o> This DOM object
+        @*/
+        empty: function empty() {
             return this.html('');
         },
         /*@
-        find <f> Find descendant elements
+        every <f> Tests if every element satisfies a given condition
+            (test) -> True if every element passes the test
+            test <f> Test function
+        @*/
+        every: function every() {
+            return Array.prototype.every.apply(elements, arguments);
+        },
+        /*@
+        filter <f> Filters all elements by a given condition
+            (test) -> Array of matching elements
+            test <f> Test function
+        @*/
+        filter: function filter() {
+            return Array.prototype.filter.apply(elements, arguments);
+        },
+        /*@
+        find <f> Find all descendant elements matching a CSS selector
             ([selector]) -> <[h]> Elements
             selector <s|'*'> CSS selector
         @*/
-        find: function(string) {
+        find: function find(string) {
-            return Ox.slice(this[0].querySelectorAll(string || '*'));
+            return Ox.unique(elements.map(function(element) {
+                return this[0].querySelectorAll(string || '*');
+            }));
+        },
+        /*@
+        forEach <f> Loops over all elements
+            (iterator) -> This DOM object
+            iterator <f> Iterator function
+        @*/
+        forEach: function forEach() {
+            Array.prototype.forEach.apply(elements, arguments);
+            return this;
         },
         /*@
         hasClass <f> Returns true if this element has a given class
             (className) -> <b> True if this element has the class
             className <s> Class name
         @*/
-        hasClass: function(string) {
+        hasClass: function hasClass(string) {
-            return this[0].className.split(' ').indexOf(string) > -1;
+            return elements.any(function(element) {
+                return Ox.contains(element.className.split(' '), string);
+            });
         },
         /*@
-        height <f> Returns the height of this element
+        height <f> Returns the height of the first element
             () -> <n> Height in px
         @*/
-        height: function() {
+        height: function height() {
-            return this[0].offsetHeight;
+            return elements[0].offsetHeight;
         },
         /*@
-        hide <f> Hides this element
+        hide <f> Hides all elements
-            () -> <o> This element
+            () -> <o> This DOM object
         @*/
-        hide: function() {
+        hide: function hide() {
             return this.css({display: 'none'});
         },
         /*@
-        html <f> Gets or sets the inner HTML
+        html <f> Gets or sets the innerHTML of all elements
             () -> <s> The inner HTML
-            (html) -> <o> This element
+            (html) -> <o> This DOM object
             html <s> The inner HTML
         @*/
-        html: function(string) {
+        html: function html(string) {
-            var ret;
+            var html = '';
             if (arguments.length == 0) {
-                ret = this[0].innerHTML;
+                elements.forEach(function(element) {
+                    html += element.innerHTML;
+                })
+                return html;
             } else {
-                this[0].innerHTML = string;
+                elements.forEach(function(element) {
-                ret = this;
+                    removeOxElements(element);
+                    element.innerHTML = string;
+                });
+                return this;
             }
-            return ret;
         },
         /*@
-        insertAfter <f> Inserts this element after another element
+        insertAfter <f> Inserts this DOM object after another DOM object
-            (element) -> <o> This element
+            (object) -> <o> This DOM object
-            element <o> Another element
+            object <o> Another DOM object
         @*/
-        insertAfter: function($element) {
+        insertAfter: function insertAfter($other) {
-            $element[0].parentNode.insertBefore(this[0], $element[0].nextSibling);
+            var nextSibling = $element[0].nextSibling;
+            elements.forEach(function(element) {
+                $other[0].parentNode.insertBefore(element, nextSibling);
+            })
             return this;
         },
         /*@
-        insertBefore <f> Inserts this element before another element
+        insertBefore <f> Inserts this DOM object before another DOM object
-            (element) -> <o> This element
+            (object) -> <o> This DOM object
-            element <o> Another element
+            object <o> Another DOM object
         @*/
-        insertBefore: function($element) {
+        insertBefore: function insertBefore($other) {
-            $element[0].parentNode.insertBefore(this[0], $element[0]);
+            elements.forEach(function(element) {
+                $other[0].parentNode.insertBefore(element, $other[0]);
+            });
             return this;
         },
         /*@
-        is <f> Returns true if the element matches the query
+        is <f> Tests if any element matches a CSS selector
+            (selector) -> <b> True if the element matches the selector
+            selector <s> CSS selector
         @*/
-        is: function(query) {
+        is: function is(string) {
-            return Ox.contains(this.parent().querySelectorAll(query), this[0]);
+            return elements.some(function(element) {
+                return Ox.contains(
+                    (element.parentNode || document).querySelectorAll(string),
+                    element
+                );
+            });
         },
         /*@
-        next <f> Returns the sibling after this element
+        length <n> Number of elements
-            () -> <h> Next element
         @*/
-        next: function() {
+        length: elements.length,
-            return this[0].nextSibling;
+        /*@
+        map <f> Transforms all elements
+            (iterator) -> [] Transformed elements
+            iterator <f> Iterator function
+        @*/
+        map: function map() {
+            return Array.prototype.filter.map(elements, arguments);
         },
         /*@
-        nextAll <f> Returns all siblings after this element
+        next <f> Returns the unique list of siblings directly after all elements
-            () -> <[h]> Next elements
+            () -> <[h]> Siblings
         @*/
-        nextAll: function() {
+        next: function next() {
-            var sibling = this[0], siblings = [];
+            return Ox.unique(Ox.filter(elements.map(function(element) {
+                return element.nextSibling;
+            })));
+        },
+        /*@
+        nextAll <f> Returns the unique list of siblings after all elements
+            () -> <[h]> Siblings
+        @*/
+        nextAll: function nextAll() {
+            var siblings = [];
+            elements.forEach(function(element) {
+                var sibling = element;
                 while (true) {
                     sibling = sibling.nextSibling;
                     if (!sibling) {
@@ -261,51 +365,56 @@ Ox.$ = Ox.element = function(value) {
                     }
                     siblings.push(sibling);
                 }
-            return siblings;
+            });
+            return Ox.unique(siblings);
         },
         /*@
         off <f> Unbinds a callback from an event
-            (event) -> <o> This element (unbinds all callbacks)
+            (event) -> <o> This DOM object (unbinds all callbacks)
-            (event, callback) -> <o> This element
+            (event, callback) -> <o> This DOM object
-            ({event0: callback0, event1: callback1, ...}) -> <o> This element
+            ({event0: callback0, event1: callback1, ...}) -> <o> This DOM object
             event <s> Event name
             callback <f> Callback function
         @*/
-        off: function(event, callback) {
+        off: function off(event, callback) {
-            var that = this;
+            var args = normalizeEvents(arguments);
-            Ox.forEach(normalizeEvents(arguments), function(callback, event) {
+            elements.forEach(function(element) {
+                Ox.forEach(args, function(callback, event) {
                     if (callback) {
-                    that[0].removeEventListener(event, callback, false);
+                        element.removeEventListener(event, callback, false);
                     } else {
-                    that[0]['on' + event] = null;
+                        element['on' + event] = null;
                     }
                 });
+            });
             return this;
         },
         /*@
         on <f> Binds a callback to an event
-            (event, callback) -> <o> This element
+            (event, callback) -> <o> This DOM object
-            ({event0: callback0, event1: callback1, ...}) -> <o> This element
+            ({event0: callback0, event1: callback1, ...}) -> <o> This DOM object
             event <s> Event name
             callback <f> Callback function
                 e <o> Event properties
         @*/
-        on: function() {
+        on: function on() {
-            var that = this;
+            var args = normalizeEvents(arguments);
-            Ox.forEach(normalizeEvents(arguments), function(callback, event) {
+            elements.forEach(function(element) {
-                that[0].addEventListener(event, callback, false);
+                Ox.forEach(args, function(callback, event) {
+                    element.addEventListener(event, callback, false);
+                });
             });
             return this;
         },
         /*@
         one <f> Binds a callback to an event and unbinds it on first invocation
-            (event, callback) -> <o> This element
+            (event, callback) -> <o> This DOM object
-            ({event0: callback0, event1: callback1, ...}) -> <o> This element
+            ({event0: callback0, event1: callback1, ...}) -> <o> This DOM object
             event <s> Event name
             callback <f> Callback function
                 e <o> Event properties
         @*/
-        one: function(events) {
+        one: function one(events) {
             var args = Ox.slice(arguments), that = this;
             Ox.forEach(normalizeEvents(arguments), function(callback, event) {
                 that.on(event, function fn() {
@@ -316,18 +425,22 @@ Ox.$ = Ox.element = function(value) {
             return this;
         },
         /*@
-        parent <f> Returns the parent of this element
+        parent <f> Returns the unique list of parents of all elements
-            () -> <h> Parent element
+            () -> <[h]> Parent elements
         @*/
-        parent: function() {
+        parent: function parent() {
-            return this[0].parentNode;
+            return Ox.unique(elements.map(function(element) {
+                return element.parentNode;
+            }));
         },
         /*@
-        parents <f> Returns all ancestors of this element
+        parents <f> Returns the unique list of all ancestors of all elements
             () -> <[h]> Ancestor elements
         @*/
-        parents: function() {
+        parents: function parents() {
-            var parent = this[0], parents = [];
+            var parents = [];
+            Ox.reverse(elements).forEach(function(element) {
+                var parent = element;
                 while (true) {
                     parent = parent.parentNode;
                     if (!parent) {
@@ -335,43 +448,57 @@ Ox.$ = Ox.element = function(value) {
                     }
                     parents.unshift(parent);
                 }
-            return parents;
+            });
+            return Ox.unique(parents);
         },
         /*@
-        prepend <f> Prepends one or more elements to this element
+        prepend <f> Prepends one or more DOM objects to this DOM object
-            (element[, element[, ...]]) -> <o> This element
+            (object[, object[, ...]]) -> <o> DOM object
-            element <o> Another element
+            object <o> Another DOM objectt
         @*/
-        prepend: function() {
+        prepend: function prepend() {
-            var parent = this[0].parentNode;
+            var $others = Ox.slice(arguments).reverse();
-            Ox.slice(arguments).reverse().forEach(function($element) {
+            elements.forEach(function(element) {
-                parent.insertBefore($element[0], parent.firstChild);
+                var parent = element.parentNode;
+                $others.forEach(function($other) {
+                    $other.forEach(function(otherElement) {
+                        parent.insertBefore(otherElement, parent.firstChild);
+                    });
+                });
             });
             return this;
         },
         /*@
-        prependTo <f> Prepends this element object to another element object
+        prependTo <f> Prepends this DOM object to another DOM object
-            (element) -> <o> This element
+            (object) -> <o> This DOM object
-            element <o> Another element
+            object <o> Another DOM object
         @*/
-        prependTo: function($element) {
+        prependTo: function prependTo($other) {
-            var element = $element[0];
+            $other.forEach(function(otherElement) {
-            element.insertBefore(this[0], element.firstChild);
+                var firstChild = otherElement.firstChild
+                elements.forEach(function(element) {
+                    otherElement.insertBefore(element, firstChild);
+                });
+            });
             return this;
         },
         /*@
-        prev <f> Returns the sibling before this element
+        prev <f> Returns the unique list of siblings directly before all elements
-            () -> <h> Next element
+            () -> <[h]> Siblings
         @*/
-        prev: function() {
+        prev: function prev() {
-            return this[0].previousSibling;
+            return Ox.unique(Ox.filter(elements.map(function(element) {
+                return element.previousSibling;
+            })));
         },
         /*@
-        prevAll <f> Returns all siblings before this element
+        prevAll <f> Returns the unique list of siblings before all elements
-            () -> <[h]> Next elements
+            () -> <[h]> Siblings
         @*/
-        prevAll: function() {
+        prevAll: function prevAll() {
-            var sibling = this[0], siblings = [];
+            var siblings = [];
+            Ox.reverse(elements).forEach(function(element) {
+                var sibling = element;
                 while (true) {
                     sibling = sibling.previousSibling;
                     if (!sibling) {
@@ -379,143 +506,199 @@ Ox.$ = Ox.element = function(value) {
                     }
                     siblings.unshift(sibling);
                 }
-            return siblings;
+            });
+            return Ox.unique(siblings);
         },
         /*@
-        remove <f> Removes this element from the DOM
+        reduce <f> Applies `reduce` to all elements
-            () -> <o> This element
         @*/
-        remove: function() {
+        reduce: function reduce() {
-            this[0].parentNode.removeChild(this[0]);
+            return Array.prototype.reduce.apply(elements, arguments);
-            return this;
         },
         /*@
-        removeAttr <f> Removes an attribute
+        remove <f> Removes all element from the DOM
-            (key) -> <o> This element
+            () -> <o> This DOM object
-            ([key0, key1, ...]) -> <o> This element
-            key <s> The attribute
         @*/
-        removeAttr: function() {
+        remove: function remove() {
-            var that = this;
+            elements.forEach(function(element) {
-            Ox.makeArray(arguments[0]).forEach(function(key) {
+                if (element.parentNode) {
-                that[0].removeAttribute(key);
+                    removeOxElements(element, true);
+                    element.parentNode.removeChild(element);
+                }
             });
             return this;
         },
         /*@
-        removeClass <f> Removes a class name
+        removeAttr <f> Removes an attribute from all elements
-            (className) -> <o> This element
+            (key) -> <o> This DOM object
+            ([key0, key1, ...]) -> <o> This DOM object
+            key <s> The attribute
+        @*/
+        removeAttr: function removeAttr() {
+            var keys = Ox.makeArray(arguments);
+            elements.forEach(function(element) {
+                keys.forEach(function(key) {
+                    element.removeAttribute(key);
+                });
+            });
+            return this;
+        },
+        /*@
+        removeClass <f> Removes a class name from all elements
+            (className) -> <o> This DOM object
             className <s> Class name
         @*/
-        removeClass: function(string) {
+        removeClass: function removeClass(string) {
-            var array = Ox.clean(string).split(' ');
+            var classNames = Ox.clean(string).split(' ');
-            this[0].className = this[0].className.split(' ').filter(
+            elements.forEach(function(element) {
-                function(className) {
+                element.className = element.className.split(' ')
-                    return array.indexOf(className) == -1;
+                    .filter(function(className) {
+                        return !Ox.contains(classNames, className)
+                    })
+                    .join(' ');
+            });
+            return this;
+        },
+        /*@
+        replace <f> Replaces another DOM object with this DOM object
+            (object) -> <o> This DOM object
+            object <o> Another DOM object
+        @*/
+        replace: function replace($other) {
+            $other.forEach(function(otherElement) {
+                var parent = otherElement.parentNode,
+                    sibling = otherElement.nextSibling;
+                if (parent) {
+                    removeOxElements(otherElement, true);
+                    parent.removeChild(otherElement);
+                    elements.forEach(function(element) {
+                        parent.insertBefore(element, sibling)
+                    });
                 }
-            ).join(' ');
+            });
             return this;
         },
         /*@
-        replace <f> Replaces another element with this element
+        replaceWith <f> Replaces this DOM object with another DOM object
-            (element) -> <o> This element
+            (object) -> <o> This DOM object
-            element <o> Another element
+            object <o> Another DOM object
         @*/
-        replace: function($element) {
+        replaceWith: function replaceWith($element) {
-            var next = $element[0].nextSibling, parent = $element[0].parentNode;
+            elements.forEach(function(element) {
-            $element.remove();
+                var parent = element.parentNode,
-            parent.insertBefore(this[0], next);
+                    sibling = element.nextSibling;
+                if (parent) {
+                    removeOxElements(element, true);
+                    parent.removeChild(element);
+                    $other.forEach(function(otherElement) {
+                        parent.insertBefore(otherElement, sibling);
+                    });
+                }
+            });
             return this;
         },
         /*@
-        replaceWith <f> Replaces this element with another element
+        show <f> Shows all elements
-            (element) -> <o> This element
+            () -> This DOM object
-            element <o> Another element
         @*/
-        replaceWith: function($element) {
+        show: function show() {
-            var next = this[0].nextSibling, parent = this[0].parentNode;
-            this.remove();
-            parent.insertBefore($element[0], next);
-            return this;
-        },
-        /*@
-        show <f> Shows this element
-            () -> This element
-        @*/
-        show: function() {
             return this.css({display: 'block'});
         },
         /*@
-        siblings <f> Returns all siblings of this element
+        siblings <f> Returns all siblings of all elements
-        () -> <[oh]> Sibling elements
+        () -> <[h]> Siblings
         @*/
-        siblings: function() {
+        siblings: function siblings() {
-            var that = this;
+            return Ox.unique(elements.map(function(element) {
-            return Ox.filter(this[0].parentNode.childNodes, function(element) {
+                return Ox.filter(
-                return element !== that[0];
+                    element.parentNode.childNodes,
-            });
+                    function(sibling) {
+                        return sibling !== element;
+                    }
+                );
+            }));
         },
         /*@
-        text <f> Gets or sets the text contents
+        some <f> Tests if some elements satisfy a given condition
+            (test) -> True if some elements pass the test
+            test <f> Test function
+        @*/
+        some: function some() {
+            return Array.prototype.some.apply(elements, arguments);
+        },
+        /*@
+        text <f> Gets or sets the text contents of all elements
             () -> <s> The text contents
-            (text) -> <o> This element
+            (text) -> <o> This DOM object
             text <s> The text contents
         @*/
-        text: function(string) {
+        text: function text(string) {
-            var ret;
+            var text = '';
             if (arguments.length == 0) {
-                ret = Ox.isString(this.textContent)
+                elements.forEach(function(element) {
-                    ? this.textContent : this.innerText;
+                    text += Ox.isString(this.textContent) ? this.textContent
+                        : this.innerText; 
+                });
+                return text;
             } else {
-                this.empty()[0].appendChild(document.createTextNode(string));
+                elements.forEach(function(element) {
-                ret = this;
+                    element.empty();
+                    element.appendChild(document.createTextNode(string));
+                });
+                return this;
             }
-            return ret;
         },
         /*@
-        toggleClass <f> Toggles a class name
+        toggleClass <f> Toggles a class name for all elements
-            (className) -> <o> This element
+            (className) -> <o> This DOM object
             className <s> Class name
         @*/
-        toggleClass: function(string) {
+        toggleClass: function toggleClass(string) {
-            return this[
+            elements.forEach(function(element) {
-                this.hasClass(string) ? 'removeClass' : 'addClass'
+                var $element = Ox.$(element);
+                $element[
+                    $element.hasClass(string) ? 'removeClass' : 'addClass'
                 ](string);
-        },
+            })
-        /*@
-        trigger <f> Triggers an event
-            (event) -> <o> This element
-        @*/
-        trigger: function(event) {
-            var e = document.createEvent('MouseEvents');
-            e.initEvent(event, true, true);
-            this[0].dispatchEvent(e);
             return this;
         },
         /*@
-        val <f> Gets or sets the value property of this element
+        trigger <f> Triggers an event
-            () -> <s> Value
+            (event) -> <o> This DOM object
-            (value) -> <o> This element
-            value <s> Value
         @*/
-        val: function(value) {
+        trigger: function trigger(event) {
-            var ret;
+            elements.forEach(function(element) {
-            if (arguments.length == 0) {
+                var e = document.createEvent('MouseEvents');
-                ret = this[0].value;
+                e.initEvent(event, true, true);
-            } else {
+                element.dispatchEvent(e);
-                this[0].value = value;
+            });
-                ret = this;
+            return this;
-            }
-            return ret;
         },
         /*@
-        width <f> Returns the width of this element
+        val <f> Gets the value of the first or sets the value of all elements
+            () -> <s> Value
+            (value) -> <o> This DOM object
+            value <s> Value
+        @*/
+        val: function val(value) {
+            var ret;
+            if (arguments.length == 0) {
+                return elements[0].value;
+            } else {
+                elements.forEach(function(element) {
+                    element.value = value;
+                });
+                return this;
+            }
+        },
+        /*@
+        width <f> Returns the width of the first element
             () -> <n> Width in px
         @*/
-        width: function() {
+        width: function width() {
-            return this[0].offsetWidth;            
+            return elements[0].offsetWidth;            
         }
-    } : null;
+    }) : null;
 
 };