Docs/Element/Element.md

   1 Native: Window {#Window}
   2 ========================
   3
   4 The following functions are treated as Window methods.
   5
   6
   7 Function: $ {#dollar}
   8 ---------------------
   9
  10 The dollar function has a dual purpose: Getting the element by its id, and making an element in Internet Explorer "grab" all the [Element][] methods.
  11
  12 ### Syntax:
  13
  14         var myElement = $(el);
  15
  16 ### Arguments:
  17
  18 1. el - The Element to be extended. Can be one of the following types:
  19         * (*element*) The element will be extended if it is not already.
  20         * (*string*) A string containing the id of the DOM element desired.
  21         * (*object*) If the object has a toElement method, toElement will be called to get the Element.
  22
  23 ### Returns:
  24
  25 * (*element*) A DOM element.
  26 * (*null*) Null if no matching id was found or if toElement did not return an element.
  27
  28 ### Examples:
  29
  30 #### Get a DOM Element by ID:
  31
  32         var myElement = $('myElement');
  33
  34 #### Get a DOM Element by reference:
  35
  36         var div = document.getElementById('myElement');
  37         div = $(div); //The element with all the Element methods applied.
  38
  39 ### Notes:
  40
  41 - This method is useful when it's unclear if working with an actual element or an id.  It also serves as a shorthand for document.getElementById().
  42 - In Internet Explorer, the [Element][] is extended the first time $ is called on it, and all the [Element][] Methods become available.
  43 - Browsers with native HTMLElement support, such as Safari, Firefox, and Opera, apply all the [Element][] Methods to every DOM element automatically.
  44 - Because MooTools detects if an element needs to be extended or not, this function may be called on the same Element many times with no ill effects.
  45
  46
  47
  48 Function: $$ {#dollars}
  49 -----------------------
  50
  51 Selects and extends DOM elements. Elements arrays returned with $$ will also accept all the [Element][] methods.
  52
  53 ### Syntax:
  54
  55         var myElements = $$(aTag[, anElement[, Elements[, ...]);
  56
  57 ### Arguments:
  58
  59 * Any number of the following as arguments are accepted:
  60  * HTMLCollections,
  61  * arrays of elements,
  62  * elements, or
  63  * strings as selectors.
  64
  65 ### Returns:
  66
  67 * (*array*) - An array of all the DOM elements matched, extended with [$][].
  68
  69 ### Examples:
  70
  71 #### Get Elements by Their Tag Names:
  72
  73         $$('a'); //Returns all anchor elements in the page.
  74         $$('a', 'b'); //Returns all anchor and bold tags on the page.
  75
  76 #### Using CSS Selectors When [Selectors][] is Included:
  77
  78         $$('#myElement'); //Returns an array containing only the element with the id 'myElement'.
  79         $$('#myElement a.myClass'); //Returns an array of all anchor tags with the class 'myClass' within the DOM element with id 'myElement'.
  80
  81 #### More Complex $$ Usage:
  82
  83         //Creates an array of all elements and selectors passed as arguments.
  84         $$(myelement1, myelement2, 'a', '#myid, #myid2, #myid3', document.getElementsByTagName('div'));
  85
  86 ### Notes:
  87
  88 - When [Selectors][] is loaded, [$$][] will also accept CSS Selectors.  Otherwise, the only selectors supported are tag names.
  89 - If an expression doesn't find any elements, an empty array will be returned.
  90 - The return type of element methods run through [$$][] is always an array, regardless of the amount of results.
  91
  92 ### See Also:
  93
  94 - See [Selectors][] for documentation on selectors for use anywhere they are accepted throughout the framework.
  95
  96
  97
  98 Native: Element {#Element}
  99 ==========================
 100
 101 Custom Native to allow all of its methods to be used with any extended DOM Element.
 102
 103
 104
 105 Element Method: constructor {#Element:constructor}
 106 --------------------------------------------------
 107
 108 Creates a new Element of the type passed in.
 109
 110 ### Syntax:
 111
 112         var myEl = new Element(element[, properties]);
 113
 114 ### Arguments:
 115
 116 1. element - (*mixed*) The tag name for the Element to be created or an actual DOM element.
 117 2. properties - (*object*, optional) Calls the Single Argument version of [Element:set][] with the properties object passed in.
 118
 119 ### Returns:
 120
 121 * (*element*) A new MooTools extended HTML Element.
 122
 123 ### Examples:
 124
 125         var myAnchor = new Element('a', {
 126                 'href': 'http://mootools.net',
 127                 'class': 'myClass',
 128                 'html': 'Click me!',
 129                 'styles': {
 130                         'display': 'block',
 131                         'border': '1px solid black'
 132                 },
 133                 'events': {
 134                         'click': function(){
 135                                 alert('clicked');
 136                         },
 137                         'mouseover': function(){
 138                                 alert('mouseovered');
 139                         }
 140                 }
 141         });
 142
 143 ### See Also:
 144
 145 - [$][], [Element:set][]
 146
 147
 148
 149 Element Method: getElement {#Element:getElement}
 150 ------------------------------------------------
 151
 152 Gets the first descendant element whose tag name matches the tag provided.  If [Selectors][] is included, CSS selectors may also be passed.
 153
 154 ### Syntax:
 155
 156         var myElement = myElement.getElement(tag);
 157
 158 ### Arguments:
 159
 160 1. tag - (*string*) Tag name of the element to find.
 161
 162 ### Returns:
 163
 164 * (*mixed*) If a match is found, the Element will be returned. Otherwise, returns null.
 165
 166 ### Examples:
 167
 168         var firstDiv = $(document.body).getElement('div');
 169
 170 ### Notes:
 171
 172 - This method is also available for Document instances.
 173 - This method gets replaced when [Selectors][] is included.
 174 - [Selectors][] enhances [Element:getElement][] so that it matches based on CSS selectors.
 175
 176 ### See Also:
 177
 178 - See [Selectors][] for documentation on selectors for use anywhere they are accepted throughout the framework.
 179
 180
 181
 182 Element Method: getElements {#Element:getElements}
 183 --------------------------------------------------
 184
 185 Collects all decedent elements whose tag name matches the tag provided.  If [Selectors][] is included, CSS selectors may also be passed.
 186
 187 ### Syntax:
 188
 189         var myElements = myElement.getElements(tag);
 190
 191 ### Arguments:
 192
 193 1. tag - (*string*) String of the tag to match.
 194
 195 ### Returns:
 196
 197 * (*array*) An [Elements][] array of all matched Elements.
 198
 199 ### Examples:
 200
 201         var allAnchors = $(document.body).getElements('a');
 202
 203 ### Notes:
 204
 205 - This method is also available for Document instances.
 206 - This method gets replaced when [Selectors][] is included.
 207 - [Selectors][] enhances [Element:getElements][] so that it matches based on CSS selectors.
 208
 209 ### See Also:
 210
 211 - See [Selectors][] for documentation on selectors for use anywhere they are accepted throughout the framework.
 212
 213
 214
 215 Element Method: getElementById {#Element:getElementById}
 216 --------------------------------------------------------
 217
 218 Gets the element with the specified id found inside the current Element.
 219
 220 ### Syntax:
 221
 222         var myElement = anElement.getElementById(id);
 223
 224 ### Arguments:
 225
 226 1. id - (*string*) The ID of the Element to find.
 227
 228 ### Returns:
 229
 230 * (*mixed*) If a match is found, returns that Element. Otherwise, returns null.
 231
 232 ### Examples:
 233
 234         var myChild = $('myParent').getElementById('myChild');
 235
 236 ### Notes:
 237
 238 - This method is not provided for Document instances as document.getElementById is provided natively.
 239
 240
 241
 242 Element Method: set {#Element:set}
 243 ----------------------------
 244
 245 This is a "dynamic arguments" method. Properties passed in can be any of the 'set' properties in the [Element.Properties][] Hash.
 246
 247 ### Syntax:
 248
 249         myElement.set(arguments);
 250
 251 ### Arguments:
 252
 253 - Two Arguments (property, value)
 254         1. property - (*string*) The string key from the [Element.Properties][] Hash representing the property to set.
 255         2. value - (*mixed*) The value to set for the specified property.
 256 - One Argument (properties)
 257         1. properties - (*object*) Object with its keys/value pairs representing the properties and values to set for the Element (as described below).
 258
 259 ### Returns:
 260
 261 * (*element*) This Element.
 262
 263 ### Examples:
 264
 265 #### With Property and Value:
 266
 267         $('myElement').set('text', 'text goes here');
 268         $('myElement').set('class', 'active');
 269         //The 'styles' property passes the object to Element:setStyles.
 270         var body = $(document.body).set('styles', {
 271                 'font': '12px Arial',
 272                 'color': 'blue'
 273         });
 274
 275 #### With an Object:
 276
 277         var myElement = $('myElement').set({
 278                 //The 'styles' property passes the object to Element:setStyles.
 279                 'styles': {
 280                         'font': '12px Arial',
 281                         'color': 'blue',
 282                         'border': '1px solid #f00'
 283                 },
 284                 //The 'events' property passes the object to Element:addEvents.
 285                 'events': {
 286                         'click': function(){ alert('click'); },
 287                         'mouseover': function(){ this.addClass('over') }
 288                 },
 289                 //Any other property uses Element:setProperty.
 290                 'id': 'documentBody'
 291         });
 292
 293 ### Notes:
 294
 295 - All the property arguments are passed to the corresponding method of the [Element.Properties][] Hash.
 296 - If no matching property is found in [Element.Properties][], it falls back to [Element:setProperty][].
 297 - Whenever using [Element:setProperty][] to set an attribute, pass in the lowercase, simplified form of the property. For example:
 298         - use 'for', not 'htmlFor',
 299         - use 'class', not 'className'
 300         - use 'frameborder', not 'frameBorder'
 301         - etc.
 302
 303
 304 ### See Also:
 305
 306 - [Element][], [Element.Properties][], [Element:setProperty][], [Element:addEvents][], [Element:setStyles][]
 307
 308
 309
 310 Element Method: get {#Element:get}
 311 ----------------------------------
 312
 313 This is a "dynamic arguments" method. Properties passed in can be any of the 'get' properties in the [Element.Properties][] Hash.
 314
 315 ### Syntax:
 316
 317         myElement.get(property);
 318
 319 ### Arguments:
 320
 321 1. property - (*string*) The string key from the [Element.Properties][] Hash representing the property to get.
 322
 323 ### Returns:
 324
 325 * (*mixed*) The result of calling the corresponding 'get' function in the [Element.Properties][] Hash.
 326
 327 ### Examples:
 328
 329 #### Using Custom Getters:
 330
 331         var tag = $('myDiv').get('tag'); //Returns "div".
 332
 333 #### Fallback to Element Attributes:
 334
 335         var id = $('myDiv').get('id'); //Returns "myDiv".
 336         var value = $('myInput').get('value'); //Returns the myInput element's value.
 337
 338 ### Notes:
 339
 340 -  If the corresponding accessor doesn't exist in the [Element.Properties][] Hash, the result of [Element:getProperty][] on the property passed in is returned.
 341
 342 ### See Also:
 343
 344 - [Element][], [Element.Properties][], [Element:getProperty][]
 345
 346
 347
 348 Element Method: erase {#Element:erase}
 349 --------------------------------------
 350
 351 This is a "dynamic arguments" method. Properties passed in can be any of the 'erase' properties in the [Element.Properties][] Hash.
 352
 353 ### Syntax:
 354
 355         myElement.erase(property);
 356
 357 ### Arguments:
 358
 359 1. property - (*string*) The string key from the [Element.Properties][] Hash representing the property to erase.
 360
 361 ### Returns:
 362
 363 * (*mixed*) The result of calling the corresponding 'erase' function in the [Element.Properties][] Hash.
 364
 365 ### Examples:
 366
 367         $('myDiv').erase('id'); //Removes the id from myDiv.
 368         $('myDiv').erase('class'); //myDiv element no longer has any class names set.
 369
 370 ### Note:
 371
 372 -  If the corresponding eraser doesn't exist in the  [Element.Properties][] Hash, [Element:removeProperty][] is called with the property passed in.
 373
 374 ### See Also:
 375
 376 - [Element][], [Element.Properties][], [Element:removeProperty][]
 377
 378
 379
 380 Element Method: match {#Element:match}
 381 --------------------------------------
 382
 383 Tests this Element to see if it matches the argument passed in.
 384
 385 ### Syntax:
 386
 387         myElement.match(match);
 388
 389 ### Arguments:
 390
 391 1. match - can be a string or element
 392         - (*string*) The tag name to test against this element. If [Selectors][] is included, any single CSS selectors may also be passed.
 393         - (*element*) An element to match; returns true if this is the actual element passed in.
 394
 395 ### Returns:
 396
 397 * (*boolean*) If the element matched, returns true. Otherwise, returns false.
 398
 399 ### Examples:
 400
 401 #### Using a Tag Name:
 402
 403         //Returns true if #myDiv is a div.
 404         $('myDiv').match('div');
 405
 406 #### Using a CSS Selector:
 407
 408         //Returns true if #myDiv has the class foo and is named "bar"
 409         $('myDiv').match('.foo[name=bar]');
 410
 411 #### Using an Element:
 412
 413         var el = $('myDiv');
 414         $('myDiv').match(el); //Returns true
 415         $('otherElement').match(el); //Returns false
 416
 417
 418
 419 Element Method: inject {#Element:inject}
 420 ----------------------------------------
 421
 422 Injects, or inserts, the Element at a particular place relative to the Element's children (specified by the second the argument).
 423
 424 ### Syntax:
 425
 426         myElement.inject(el[, where]);
 427
 428 ### Arguments:
 429
 430 1. el   - (*mixed*) el can be the id of an element or an element.
 431 2. where - (*string*, optional: defaults to 'bottom') The place to inject this Element.  Can be 'top', 'bottom', 'after', or 'before'.
 432
 433 ### Returns:
 434
 435 * (*element*) This Element.
 436
 437 ### Examples:
 438
 439 ##### JavaScript
 440
 441         var myFirstElement  = new Element('div', {id: 'myFirstElement'});
 442         var mySecondElement = new Element('div', {id: 'mySecondElement'});
 443         var myThirdElement  = new Element('div', {id: 'myThirdElement'});
 444
 445 ##### Resulting HTML
 446
 447         <div id="myFirstElement"></div>
 448         <div id="mySecondElement"></div>
 449         <div id="myThirdElement"></div>
 450
 451 #### Inject to the bottom:
 452
 453 ##### JavaScript
 454
 455         myFirstElement.inject(mySecondElement);
 456
 457 ##### Resulting HTML
 458
 459         <div id="mySecondElement">
 460                 <div id="myFirstElement"></div>
 461         </div>
 462
 463 #### Inject to the top:
 464
 465 ##### JavaScript
 466
 467         myThirdElement.inject(mySecondElement, 'top');
 468
 469 ##### Resulting HTML
 470
 471         <div id="mySecondElement">
 472                 <div id="myThirdElement"></div>
 473                 <div id="myFirstElement"></div>
 474         </div>
 475
 476 #### Inject before:
 477
 478 ##### JavaScript
 479
 480         myFirstElement.inject(mySecondElement, 'before');
 481
 482 ##### Resulting HTML
 483
 484         <div id="myFirstElement"></div>
 485         <div id="mySecondElement"></div>
 486
 487 #### Inject After:
 488
 489 ##### JavaScript
 490
 491         myFirstElement.inject(mySecondElement, 'after');
 492
 493 ##### Resulting HTML
 494
 495         <div id="mySecondElement"></div>
 496         <div id="myFirstElement"></div>
 497
 498 ### See Also:
 499
 500 [Element:adopt](#Element:adopt), [Element:grab](#Element:grab), [Element:wraps](#Element:wraps)
 501
 502
 503
 504 Element Method: grab {#Element:grab}
 505 ------------------------------------
 506
 507 Works as [Element:inject](#Element:inject), but in reverse.
 508
 509 Appends the Element at a particular place relative to the Element's children (specified by the where parameter).
 510
 511 ### Syntax:
 512
 513         myElement.grab(el[, where]);
 514
 515 ### Arguments:
 516
 517 1. el - (*mixed*) el can be the id of an element or an Element.
 518 2. where - (*string*, optional: default 'bottom') The place to append this Element. Can be 'top' or 'bottom'.
 519
 520 ### Returns:
 521
 522 * (*element*) This Element.
 523
 524 ### Examples:
 525
 526 ##### JavaScript
 527
 528         var myFirstElement = new Element('div', {id: 'myFirstElement'});
 529         var mySecondElement = new Element('div', {id: 'mySecondElement'});
 530
 531         myFirstElement.grab(mySecondElement);
 532
 533 ##### Resulting HTML
 534
 535         <div id="myFirstElement">
 536                 <div id="mySecondElement"></div>
 537         </div>
 538
 539 ### See Also:
 540
 541 [Element:adopt](#Element:adopt), [Element:inject](#Element:inject), [Element:wraps](#Element:wraps)
 542
 543
 544
 545 Element Method: adopt {#Element:adopt}
 546 --------------------------------------
 547
 548 Works like [Element:grab](#Element:grab), but allows multiple elements to be adopted.
 549
 550 Inserts the passed element(s) inside the Element (which will then become the parent element).
 551
 552 ### Syntax:
 553
 554         myParent.adopt(el[, others]);
 555
 556 ### Arguments:
 557
 558 1. el - (*mixed*) The id of an element, an Element, or an array of elements.
 559 2. others - (*mixed*, optional) One or more additional Elements separated by a comma or as an array.
 560
 561 ### Returns:
 562
 563 * (*element*) This Element.
 564
 565 ### Examples:
 566
 567 ##### JavaScript
 568
 569         var myFirstElement  = new Element('div', {id: 'myFirstElement'});
 570         var mySecondElement = new Element('a', {id: 'mySecondElement'});
 571         var myThirdElement  = new Element('ul', {id: 'myThirdElement'});
 572
 573         myParent.adopt(myFirstElement);
 574         myParent2.adopt(myFirstElement, 'mySecondElement');
 575         myParent3.adopt([myFirstElement, mySecondElement, myThirdElement]);
 576
 577 ##### Resulting HTML
 578
 579         <div id="myParent">
 580                 <div id="myFirstElement" />
 581         </div>
 582         <div id="myParent2">
 583                 <div id="myFirstElement" />
 584                 <a />
 585         </div>
 586         <div id="myParent3">
 587                 <div id="myFirstElement" />
 588                 <a />
 589                 <ul />
 590         </div>
 591
 592 ### See Also:
 593
 594 [Element:grab](#Element:grab), [Element:inject](#Element:inject), [Element:wraps](#Element:wraps)
 595
 596
 597
 598 Element Method: wraps {#Element:wraps}
 599 --------------------------------------
 600
 601 Works like [Element:grab](#Element:grab), but instead of moving the grabbed element from its place, this method moves this Element around its target.
 602
 603 The Element is moved to the position of the passed element and becomes the parent.
 604
 605 ### Syntax:
 606
 607         myParent.wraps(el[, where]);
 608
 609 ### Arguments:
 610
 611 1. el - (*mixed*) The id of an element or an Element.
 612 2. where - (*string*, optional: default 'bottom') The place to insert the passed in element. Can be 'top' or 'bottom'.
 613
 614 ### Returns:
 615
 616 * (*element*) This Element.
 617
 618 ### Examples:
 619
 620 ##### HTML
 621
 622         <div id="myFirstElement"></div>
 623
 624 ##### JavaScript
 625
 626         var mySecondElement = new Element('div', {id: 'mySecondElement'});
 627         mySecondElement.wraps($('myFirstElement'));
 628
 629 ##### Resulting HTML
 630
 631         <div id="mySecondElement">
 632                 <div id="myFirstElement"></div>
 633         </div>
 634
 635
 636
 637 Element Method: appendText {#Element:appendText}
 638 ------------------------------------------------
 639
 640 Works like [Element:grab](#Element:grab), but instead of accepting an id or an element, it only accepts text.
 641 A text node will be created inside this Element, in either the top or bottom position.
 642
 643 ### Syntax:
 644
 645         myElement.appendText(text);
 646
 647 ### Arguments:
 648
 649 1. text  - (*string*) The text to append.
 650 1. where - (*string*, optional: default 'bottom') The position to inject the text to.
 651
 652 ### Returns:
 653
 654 * (*element*) The current Element instance.
 655
 656 ### Examples:
 657
 658 ##### HTML
 659
 660         <div id="myElement">Hey.</div>
 661
 662 ##### JavaScript
 663
 664         $('myElement').appendText(' Howdy.');
 665
 666 ##### Resulting HTML
 667
 668         <div id="myElement">Hey. Howdy.</div>
 669
 670
 671
 672 Element Method: dispose {#Element:dispose}
 673 ------------------------------------------
 674
 675 Removes the Element from the DOM.
 676
 677
 678 ### Syntax:
 679
 680         var removedElement = myElement.dispose();
 681
 682 ### Returns:
 683
 684 * (*element*) This Element. Useful to always grab the return from this function, as the element could be [injected](#Element:inject) back.
 685
 686 ### Examples:
 687
 688 ##### HTML
 689
 690         <div id="myElement"></div>
 691         <div id="mySecondElement"></div>
 692
 693 ##### JavaScript
 694
 695         $('myElement').dispose();
 696
 697 ##### Resulting HTML
 698
 699         <div id="mySecondElement"></div>
 700
 701 ### See Also:
 702
 703 - [MDC Element:removeChild](http://developer.mozilla.org/en/docs/DOM:element.removeChild)
 704
 705
 706
 707 Element Method: clone {#Element:clone}
 708 --------------------------------------
 709
 710 Clones the Element and returns the cloned one.
 711
 712
 713 ### Syntax:
 714
 715         var copy = myElement.clone([contents, keepid]);
 716
 717 ### Arguments:
 718
 719 1. contents - (*boolean*, optional: defaults to true) When set to false the Element's contents are not cloned.
 720 2. keepid - (*boolean*, optional: defaults to false) When true the cloned Element keeps the id attribute, if present. Same goes for any of the cloned childNodes.
 721
 722
 723 ### Returns:
 724
 725 * (*element*) The cloned Element.
 726
 727 ### Examples:
 728
 729 ##### HTML
 730
 731         <div id="myElement"></div>
 732
 733 ##### JavaScript
 734
 735         //Clones the Element and appends the clone after the Element.
 736         var clone = $('myElement').clone().injectAfter('myElement');
 737
 738 ##### Resulting HTML
 739
 740         <div id="myElement">ciao</div>
 741         <div>ciao</div>
 742
 743 ### Note:
 744
 745 - The returned Element does not have attached events. To clone the events use [Element:cloneEvents](/Element/Element.Event#Element:cloneEvents).
 746 - Values stored in Element.Storage are not cloned.
 747 - The clone element and its children are stripped of ids, unless otherwise specified by the keepid parameter.
 748
 749 ### See Also:
 750
 751 - [Element:cloneEvents](/Element/Element.Event#Element:cloneEvents).
 752
 753
 754
 755 Element Method: replaces {#Element:replaces}
 756 --------------------------------------------------
 757
 758 Replaces the Element with an Element passed.
 759
 760 ### Syntax:
 761
 762         var element = myElement.replaces(el);
 763
 764 ### Arguments:
 765
 766 1. el - (*mixed*) A string id representing the Element to be replaced with, or an Element reference.
 767
 768 ### Returns:
 769
 770 * (*element*) This Element.
 771
 772 ### Examples:
 773
 774         $('myNewElement').replaces($('myOldElement'));
 775         //$('myOldElement') is gone, and $('myNewElement') is in its place.
 776
 777 ### See Also:
 778
 779 - [MDC Element:replaceChild](http://developer.mozilla.org/en/docs/DOM:element.replaceChild)
 780
 781
 782
 783 Element Method: hasClass {#Element:hasClass}
 784 --------------------------------------------
 785
 786 Tests the Element to see if it has the passed in className.
 787
 788 ### Syntax:
 789
 790         var result = myElement.hasClass(className);
 791
 792 ### Arguments:
 793
 794 1. className - (*string*) The class name to test.
 795
 796 ### Returns:
 797
 798 * (*boolean*) Returns true if the Element has the class, otherwise false.
 799
 800 ### Examples:
 801
 802 ##### HTML
 803
 804         <div id="myElement" class="testClass"></div>
 805
 806 ##### JavaScript
 807
 808         $('myElement').hasClass('testClass'); //returns true
 809
 810
 811
 812 Element Method: addClass {#Element:addClass}
 813 --------------------------------------------
 814
 815 Adds the passed in class to the Element, if the Element doesnt already have it.
 816
 817 ### Syntax:
 818
 819         myElement.addClass(className);
 820
 821 ### Arguments:
 822
 823 1. className - (*string*) The class name to add.
 824
 825 ### Returns:
 826
 827 * (*element*) This Element.
 828
 829 ### Examples:
 830
 831 ##### HTML
 832
 833         <div id="myElement" class="testClass"></div>
 834
 835 ##### JavaScript
 836
 837         $('myElement').addClass('newClass');
 838
 839 ##### Resulting HTML
 840
 841         <div id="myElement" class="testClass newClass"></div>
 842
 843
 844
 845 Element Method: removeClass {#Element:removeClass}
 846 ----------------------------
 847
 848 Works like [Element:addClass](#Element:addClass), but removes the class from the Element.
 849
 850
 851 ### Syntax:
 852
 853         myElement.removeClass(className);
 854
 855 ### Arguments:
 856
 857 1. className - (*string*) The class name to remove.
 858
 859 ### Returns:
 860
 861 * (*element*) This Element.
 862
 863 ### Examples:
 864
 865 ##### HTML
 866
 867         <div id="myElement" class="testClass newClass"></div>
 868
 869 ##### JavaScript
 870
 871         $('myElement').removeClass('newClass');
 872
 873 ##### Resulting HTML
 874
 875         <div id="myElement" class="testClass"></div>
 876
 877
 878
 879 Element Method: toggleClass {#Element:toggleClass}
 880 --------------------------------------------------
 881
 882 Adds or removes the passed in class name to the Element, depending on whether or not it's already present.
 883
 884 ### Syntax:
 885
 886         myElement.toggleClass(className);
 887
 888 ### Arguments:
 889
 890 1. className - (*string*) The class to add or remove.
 891
 892 ### Returns:
 893
 894 * (*element*) This Element.
 895
 896 ### Examples:
 897
 898 ##### HTML
 899
 900         <div id="myElement" class="myClass"></div>
 901
 902 ##### JavaScript
 903
 904         $('myElement').toggleClass('myClass');
 905
 906 ##### Resulting HTML
 907
 908         <div id="myElement" class=""></div>
 909
 910 ##### JavaScript
 911
 912         $('myElement').toggleClass('myClass');
 913
 914 ##### Resulting HTML
 915
 916         <div id="myElement" class="myClass"></div>
 917
 918
 919
 920 Element Method: getPrevious {#Element:getPrevious}
 921 --------------------------------------------------
 922
 923 Returns the previousSibling of the Element (excluding text nodes).
 924
 925 ### Syntax:
 926
 927         var previousSibling = myElement.getPrevious([match]);
 928
 929 ### Arguments:
 930
 931 1. match - (*string*, optional): A tag name to match the the found element(s) with. If [Selectors][] is included, a full CSS selector can be passed.
 932
 933 ### Returns:
 934
 935 * (*mixed*) The previous sibling Element or null if none found.
 936
 937
 938
 939 Element Method: getAllPrevious {#Element:getAllPrevious}
 940 --------------------------------------------------------
 941
 942 Like [Element:getPrevious][], but returns a collection of all the matched previousSiblings.
 943
 944
 945
 946 Element Method: getNext {#Element:getNext}
 947 ------------------------------------------
 948
 949 As [Element:getPrevious][], but tries to find the nextSibling (excluding text nodes).
 950
 951
 952 ### Syntax:
 953
 954         var nextSibling = myElement.getNext([match]);
 955
 956 ### Arguments:
 957
 958 1. match - (*string*, optional): A comma seperated list of tag names to match the found element(s) with. If [Selectors][] is included, a full CSS selector can be passed.
 959
 960 ### Returns:
 961
 962 * (*mixed*) The next sibling Element or null if none found.
 963
 964
 965 Element Method: getAllNext {#Element:getAllNext}
 966 ------------------------------------------------
 967
 968 Like Element.getNext, but returns a collection of all the matched nextSiblings.
 969
 970
 971
 972 Element Method: getFirst {#Element:getFirst}
 973 --------------------------------------------
 974
 975 Works as [Element:getPrevious][], but tries to find the firstChild (excluding text nodes).
 976
 977
 978 ### Syntax:
 979
 980         var firstElement = myElement.getFirst([match]);
 981
 982 ### Arguments:
 983
 984 1. match - (*string*, optional): A tag name to match the found element(s) with. if [Selectors][] is included, a full CSS selector can be passed.
 985
 986 ### Returns:
 987
 988 * (*mixed*) The first sibling Element or null if none found.
 989
 990
 991
 992 Element Method: getLast {#Element:getLast}
 993 ------------------------------------------
 994
 995 Works as [Element:getPrevious][], but tries to find the lastChild.
 996
 997 ### Syntax:
 998
 999         var lastElement = myElement.getLast([match]);
1000
1001 ### Arguments:
1002
1003 1. match - (*string*, optional): A tag name to match the found element(s) with. if [Selectors][] is included, a full CSS selector can be passed.
1004
1005 ### Returns:
1006
1007 * (*mixed*) The first sibling Element, or returns null if none found.
1008
1009
1010
1011 Element Method: getParent {#Element:getParent}
1012 ----------------------------------------------
1013
1014 Works as [Element:getPrevious][], but tries to find the parentNode.
1015
1016
1017 ### Syntax:
1018
1019         var parent = myElement.getParent([match]);
1020
1021 ### Arguments:
1022
1023 1. match - (*string*, optional): A tag name to match the found element(s) with. if [Selectors][] is included, a full CSS selector can be passed.
1024
1025 ### Returns:
1026
1027 * (*mixed*) The target Element's parent or null if no matching parent is found.
1028
1029
1030
1031 Element Method: getParents {#Element:getParents}
1032 ------------------------------------------------
1033
1034 Like [Element:getParent](#Element:getParent), but returns a collection of all the matched parentNodes up the tree.
1035
1036
1037
1038 Element Method: getChildren {#Element:getChildren}
1039 --------------------------------------------------
1040
1041 Returns all the Element's children (excluding text nodes). Returns as [Elements][].
1042
1043
1044 ### Syntax:
1045
1046         var children = myElement.getChildren([match]);
1047
1048 ### Arguments:
1049
1050 1. match - (*string*, optional): A tag name to match the found element(s) with. if [Selectors][] is included, a full CSS selector can be passed.
1051
1052 ### Returns:
1053
1054 * (*array*) A [Elements](#Elements) array with all of the Element's children, except the text nodes.
1055
1056
1057
1058 Element Method: hasChild {#Element:hasChild}
1059 --------------------------------------------
1060
1061 Checks all descendants of this Element for a match.
1062
1063
1064 ### Syntax:
1065
1066         var result = myElement.hasChild(el);
1067
1068 ### Arguments:
1069
1070 1. el - (*mixed*) Can be an Element reference or string id.
1071
1072 ### Returns:
1073
1074 * (*boolean*) Returns true if the passed in Element is a child of the Element, otherwise false.
1075
1076 ### Examples:
1077
1078 ##### HTML
1079
1080         <div id="Darth_Vader">
1081                 <div id="Luke"></div>
1082         </div>
1083
1084 ##### JavaScript
1085
1086         if ($('Darth_Vader').hasChild('Luke')) alert('Luke, I am your father.'); // tan tan tannn...
1087
1088
1089
1090 Element Method: empty {#Element:empty}
1091 --------------------------------------
1092
1093 Empties an Element of all its children.
1094
1095
1096 ### Syntax:
1097
1098         myElement.empty();
1099
1100 ### Returns:
1101
1102 * (*element*) This Element.
1103
1104 ### Examples:
1105
1106 ##### HTML
1107
1108         <div id="myElement">
1109                 <p></p>
1110                 <span></span>
1111         </div>
1112
1113 ##### JavaScript
1114
1115         $('myElement').empty();
1116
1117 ##### Resulting HTML
1118
1119         <div id="myElement"></div>
1120
1121
1122
1123 Element Method: destroy {#Element:destroy}
1124 ------------------------------------------
1125
1126 Empties an Element of all its children, removes and garbages the Element.
1127 Useful to clear memory before the pageUnload.
1128
1129 ### Syntax:
1130
1131         myElement.destroy();
1132
1133 ### Returns:
1134
1135 * (*null*)
1136
1137
1138
1139 Element Method: toQueryString {#Element:toQueryString}
1140 ------------------------------------------------------
1141
1142 Reads the child inputs of the Element and generates a query string based on their values.
1143
1144
1145 ### Syntax:
1146
1147         var query = myElement.toQueryString();
1148
1149 ### Returns:
1150
1151 * (*string*) A string representation of a all the input Elements' names and values.
1152
1153 ### Examples:
1154
1155 ##### HTML
1156
1157         <form id="myForm" action="submit.php">
1158                 <input name="email" value="bob@bob.com" />
1159                 <input name="zipCode" value="90210" />
1160         </form>
1161
1162 ##### JavaScript
1163
1164         $('myForm').toQueryString(); //Returns "email=bob@bob.com&zipCode=90210".
1165
1166
1167 Element Method: getSelected {#Element:getSelected}
1168 --------------------------------------------------
1169
1170 Returns the selected options of a select element.
1171
1172
1173 ### Syntax:
1174
1175         var selected = mySelect.getSelected();
1176
1177 ### Returns:
1178
1179 * (*array*) An array of the selected elements.
1180
1181 ### Examples:
1182
1183 ##### HTML
1184
1185         <select id="country-select" name="country">
1186                 <option value="US">United States</option
1187                 <option value ="IT">Italy</option>
1188         </select>
1189
1190 ##### JavaScript
1191
1192         $('country-select').getSelected(); //Returns whatever the user selected.
1193
1194 ### Note:
1195
1196 This method returns an array, regardless of the multiple attribute of the select element.
1197 If the select is single, it will return an array with only one item.
1198
1199
1200
1201 Element Method: getProperty {#Element:getProperty}
1202 --------------------------------------------------
1203
1204 Returns a single element attribute.
1205
1206 ### Syntax:
1207
1208         var myProp = myElement.getProperty(property);
1209
1210 ### Arguments:
1211
1212 * property - (*string*) The property to be retrieved.
1213
1214 ### Returns:
1215
1216 * (*string*) A string containing the Element's requested property.
1217
1218 ### Examples:
1219
1220 ##### HTML
1221
1222         <img id="myImage" src="mootools.png" title="MooTools, the compact JavaScript framework" alt="" />
1223
1224 ##### JavaScript
1225
1226         var imgProps = $('myImage').getProperty('src'); //Returns: 'mootools.png'.
1227
1228
1229
1230 Element Method: getProperties {#Element:getProperties}
1231 ------------------------------------------------------
1232
1233 Gets multiple element attributes.
1234
1235 ### Syntax:
1236
1237         var myProps = myElement.getProperties(properties);
1238
1239 ### Arguments:
1240
1241 * properties - (*strings*) Any number of properties to be retrieved.
1242
1243 ### Returns:
1244
1245 * (*object*) An object containing all of the Element's requested properties.
1246
1247 ### Examples:
1248
1249 ##### HTML
1250
1251         <img id="myImage" src="mootools.png" title="MooTools, the compact JavaScript framework" alt="" />
1252
1253 ##### JavaScript
1254
1255         var imgProps = $('myImage').getProperties('id', 'src', 'title', 'alt');
1256         //Returns: { id: 'myImage', src: 'mootools.png', title: 'MooTools, the compact JavaScript framework', alt: '' }
1257
1258
1259
1260 Element Method: setProperty {#Element:setProperty}
1261 --------------------------------------------------
1262
1263 Sets an attribute or special property for this Element.
1264
1265
1266 ### Arguments:
1267
1268 1. property - (*string*) The property to assign the value passed in.
1269 2. value - (*mixed*) The value to assign to the property passed in.
1270
1271 ### Returns:
1272
1273 * (*element*) - This Element.
1274
1275 ### Examples:
1276
1277 ##### HTML
1278
1279         <img id="myImage" />
1280
1281 ##### JavaScript
1282
1283         $('myImage').setProperty('src', 'mootools.png');
1284
1285 ##### Resulting HTML
1286
1287         <img id="myImage" src="mootools.png" />
1288
1289 ### Note
1290
1291 - Whenever using [Element:setProperty][] to set an attribute, pass in the lowercase, simplified form of the property. For example:
1292         - use 'for', not 'htmlFor',
1293         - use 'class', not 'className'
1294         - use 'frameborder', not 'frameBorder'
1295         - etc.
1296
1297
1298 Element Method: setProperties {#Element:setProperties}
1299 ------------------------------------------------------
1300
1301 Sets numerous attributes for the Element.
1302
1303
1304 ### Arguments:
1305
1306 1. properties - (*object*) An object with key/value pairs.
1307
1308 ### Returns:
1309
1310 * (*element*) This Element.
1311
1312 ### Examples:
1313
1314 ##### HTML
1315
1316         <img id="myImage" />
1317
1318 ##### JavaScript
1319
1320         $('myImage').setProperties({
1321                 src: 'whatever.gif',
1322                 alt: 'whatever dude'
1323         });
1324
1325 ##### Resulting HTML
1326
1327         <img id="myImage" src="whatever.gif" alt="whatever dude" />
1328
1329
1330
1331 Element Method: removeProperty {#Element:removeProperty}
1332 --------------------------------------------------------
1333
1334 Removes an attribute from the Element.
1335
1336
1337 ### Syntax:
1338
1339         myElement.removeProperty(property);
1340
1341 ### Arguments:
1342
1343 1. property - (*string*) The attribute to remove.
1344
1345 ### Returns:
1346
1347 * (*element*) This Element.
1348
1349 ### Examples:
1350
1351 ##### HTML
1352
1353         <a id="myAnchor" href="#" onmousedown="alert('click');"></a>
1354
1355 ##### JavaScript
1356
1357         //Eww... inline JavaScript is bad! Let's get rid of it.
1358         $('myAnchor').removeProperty('onmousedown');
1359
1360 ##### Resulting HTML
1361
1362         <a id="myAnchor" href="#"></a>
1363
1364
1365
1366 Element Method: removeProperties {#Element:removeProperties}
1367 ------------------------------------------------------------
1368
1369 Removes numerous attributes from the Element.
1370
1371
1372 ### Syntax:
1373
1374         myElement.removeProperties(properties);
1375
1376 ### Arguments:
1377
1378 1. properties - (*strings*) The attributes to remove, separated by comma.
1379
1380 ### Returns:
1381
1382 * (*element*) This Element.
1383
1384 ### Examples:
1385
1386 ##### HTML
1387
1388         <a id="myAnchor" href="#" title="hello world"></a>
1389
1390 ##### JavaScript
1391
1392         $('myAnchor').removeProperties('id', 'href', 'title');
1393
1394 ##### Resulting HTML
1395
1396         <a></a>
1397
1398
1399 Element Method: store {#Element:store}
1400 --------------------------------------
1401
1402 Stores an item in the Elements Storage, linked to this Element.
1403
1404
1405 ### Syntax:
1406
1407         myElement.store(key, value);
1408
1409 ### Arguments:
1410
1411 1. key - (*string*) The key you want to assign to the stored value.
1412 2. value - (*mixed*) Any value you want to store.
1413
1414 ### Returns:
1415
1416 * (*element*) This Element.
1417
1418 ### Example:
1419
1420         $('element').store('someProperty', someValue);
1421
1422
1423 Element Method: retrieve {#Element:retrieve}
1424 --------------------------------------------
1425
1426 Retrieves a value from the Elements storage.
1427
1428
1429 ### Syntax:
1430
1431         myElement.retrieve(key[, default]);
1432
1433 ### Arguments:
1434
1435 1. key - (*string*) The key you want to retrieve from the storage.
1436 2. default - (*mixed*, optional) Default value to store and return if no value is stored.
1437
1438 ### Returns:
1439
1440 * (*mixed*) The value linked to the key.
1441
1442 ### Example:
1443
1444         $('element').retrieve('someProperty'); // returns someValue (see example above)
1445
1446
1447 Element Method: eliminate {#Element:eliminate}
1448 --------------------------------------------
1449
1450 Eliminates a key from the Elements storage.
1451
1452
1453 ### Syntax:
1454
1455         myElement.retrieve(key);
1456
1457 ### Arguments:
1458
1459 1. key - (*string*) The key you want to eliminate from the storage.
1460
1461 ### Returns:
1462
1463 * (*mixed*) The element/window/document.
1464
1465 ### Example:
1466
1467         $('element').eliminate('someProperty');
1468
1469
1470
1471
1472
1473 Hash: Element.Properties {#Element-Properties}
1474 ==============================================
1475
1476 This Hash contains the functions that respond to the first argument passed in [Element:get][], [Element:set][] and [Element:erase][].
1477
1478 ### Adding a Custom Element Property
1479
1480         Element.Properties.disabled = {
1481
1482                 get: function(){
1483                         return this.disabled;
1484                 }
1485
1486                 set: function(value){
1487                         this.disabled = !!value;
1488                         this.setAttribute('disabled', !!value);
1489                 }
1490
1491         };
1492
1493 ### Using a Custom Element Property
1494
1495         //Gets the "disabled" property.
1496         $(element).get('disabled');
1497         //Sets the "disabled" property to true, along with the attribute.
1498         $(element).set('disabled', true);
1499
1500 ### Note:
1501
1502 Automatically returns the element for setters.
1503
1504 ### Using an Object:
1505
1506 Additionally, you can access these custom getters and setters using an object as the parameter for the [set](#Element:set) method.
1507
1508 #### Example:
1509
1510         //Using set:
1511         $(divElement).set({html: '<p>Hello <em>People</em>!</p>', style: 'background:red'});
1512
1513         //For new Elements (works the same as set):
1514         new Element('input', {type: 'checkbox', checked: true, disabled: true});
1515
1516
1517
1518 Element Property: html {#Element-Properties:html}
1519 -------------------------------------------------
1520
1521 ### Setter:
1522
1523 Sets the innerHTML of the Element.
1524
1525 #### Syntax:
1526
1527         myElement.set('html', [htmlString[, htmlString2[, htmlString3[, ..]]]);
1528
1529 #### Arguments:
1530
1531 1. Any number of string parameters with HTML.
1532
1533 #### Returns:
1534
1535 * (*element*) This Element.
1536
1537 #### Examples:
1538
1539 ##### HTML
1540
1541         <div id="myElement"></div>
1542
1543 ##### JavaScript
1544
1545         $('myElement').set('html', '<div></div>', '<p></p>');
1546
1547 ##### Resulting HTML
1548
1549         <div id="myElement">
1550                 <div></div>
1551                 <p></p>
1552         </div>
1553
1554 ### Getter:
1555
1556 Returns the inner HTML of the Element.
1557
1558 #### Syntax:
1559
1560         myElement.get('html');
1561
1562 #### Returns:
1563
1564 * (*text*) This Element's innerHTML.
1565
1566
1567
1568 Element Property: text {#Element-Properties:text}
1569 -------------------------------------------------
1570
1571 ### Setter:
1572
1573 Sets the inner text of the Element.
1574
1575 #### Syntax:
1576
1577         myElement.set('text', text);
1578
1579 #### Arguments:
1580
1581 1. text - (*string*) The new text content for the Element.
1582
1583 #### Returns:
1584
1585 * (*element*) This Element.
1586
1587 #### Examples:
1588
1589 ##### HTML
1590
1591         <div id="myElement"></div>
1592
1593 ##### JavaScript
1594
1595         $('myElement').set('text', 'some text');
1596         //The text of myElement is now 'some text'.
1597
1598 ##### Resulting HTML
1599
1600         <div id="myElement">some text</div>
1601
1602 ### Getter:
1603
1604 Gets the inner text of the Element.
1605
1606 #### Syntax:
1607
1608         var myText = myElement.get('text');
1609
1610 #### Returns:
1611
1612 * (*string*) The text of the Element.
1613
1614 #### Examples:
1615
1616 ##### HTML
1617
1618         <div id="myElement">my text</div>
1619
1620 ##### JavaScript
1621
1622         var myText = $('myElement').get('text'); //myText = 'my text'.
1623
1624
1625
1626 Element Property: tag {#Element-Properties:tag}
1627 -----------------------------------------------
1628
1629 ### Getter:
1630
1631 Returns the tag name of the Element in lower case.
1632
1633 #### Syntax:
1634
1635         var myTag = myElement.get('tag');
1636
1637 #### Returns:
1638
1639 * (*string*) The tag name in lower case.
1640
1641 #### Examples:
1642
1643 ##### HTML
1644
1645         <img id="myImage" />
1646
1647 ##### JavaScript
1648
1649         var myTag = $('myImage').get('tag'); // myTag = 'img'.
1650
1651
1652
1653 Native: IFrame {#IFrame}
1654 ========================
1655
1656 Custom Native to create and easily work with IFrames.
1657
1658
1659
1660 IFrame Method: constructor {#IFrame:constructor}
1661 ------------------------------------------------
1662
1663 Creates an IFrame HTML Element and extends its window and document with MooTools.
1664
1665
1666 ### Syntax:
1667
1668         var myIFrame = new IFrame([el][, props]);
1669
1670 ### Arguments:
1671
1672 1. el - (*mixed*, optional) The id of the IFrame to be converted, or the actual IFrame element. If its not passed, a new IFrame will be created (default).
1673 2. props - (*object*, optional) The properties to be applied to the new IFrame. Same as [Element:constructor](#Element:constructor) props argument.
1674
1675 ### Returns:
1676
1677 * (*element*) A new IFrame HTML Element.
1678
1679 ### Examples:
1680
1681         var myIFrame = new IFrame({
1682
1683                 src: 'http://mootools.net/',
1684
1685                 styles: {
1686                         width: 800,
1687                         height: 600,
1688                         border: '1px solid #ccc'
1689                 },
1690
1691                 events: {
1692
1693                         mouseenter: function(){
1694                                 alert('Welcome aboard.');
1695                         },
1696
1697                         mouseleave: function(){
1698                                 alert('Goodbye!');
1699                         },
1700
1701                         load: function(){
1702                                 alert('The iframe has finished loading.');
1703                         }
1704
1705                 }
1706
1707         });
1708
1709
1710 ### Notes:
1711
1712 - If the IFrame is from the same domain as the "host" or running locally, its document and window will be extended with MooTools functionalities, allowing you to fully use MooTools within it.
1713 - If the IFrame already exists and has a different name than id, the name will be made the same as the id.
1714 - If the IFrame is from a different domain, its window and document will not be extended with MooTools methods.
1715
1716
1717
1718 Native: Elements {#Elements}
1719 ============================
1720
1721 The Elements class allows [Element][] methods to work on an [Elements][] array, as well as [Array][] Methods.
1722
1723
1724
1725 Elements Method: constructor {#Elements:constructor}
1726 ----------------------------------------------------
1727
1728
1729 ### Syntax:
1730
1731         var myElements = new Elements(elements[, options]);
1732
1733 ### Arguments:
1734
1735 1. elements - (*mixed*) An array of elements or an HTMLCollection Object.
1736
1737 ### Returns:
1738
1739 * (*array*) An extended array with the [Element][], [Elements][] and [Array][] methods.
1740
1741 ### Examples:
1742
1743 #### Set Every Paragraph's Color to Red:
1744
1745         $$('p').each(function(el){
1746                 el.setStyle('color', 'red');
1747         });
1748
1749         //Because $$('myselector') also accepts Element methods, the below
1750         //example has the same effect as the one above.
1751         $$('p').setStyle('color', 'red');
1752
1753
1754 #### Create Elements From an Array:
1755
1756         var myElements = new Elements(['myElementID', $('myElement'), 'myElementID2', document.getElementById('myElementID3')]);
1757
1758
1759 ### Notes:
1760
1761 - In MooTools, every DOM function which returns a collection of nodes (such as [$$][]) returns the nodes as instances of Elements.
1762 - Because Elements is an Array, it accepts all the [Array][] methods, while giving precedence to [Element][] and [Elements][] methods.
1763 - Every node of the Elements instance has all the [Element][] methods.
1764
1765 ### See Also:
1766
1767 - [$$][], [$][], [Element][], [Elements][], [Array][]
1768
1769
1770
1771 Elements Method: filter {#Elements:filter}
1772 ----------------------------------------------
1773
1774 Filters a collection of elements by a given tag name.  If [Selectors][] is included, this method will be able to filter by any selector.
1775 It also works like [Array:filter](/Native/Array/#Array:filter), by filtering collection of elements with a function.
1776
1777
1778 ### Syntax:
1779
1780         var filteredElements = elements.filter(selector);
1781
1782 ### Arguments:
1783
1784 1. selector - (*mixed*) A single CSS selector.
1785
1786 ### Returns:
1787
1788 * (*array*) A subset of this [Elements][] instance.
1789
1790
1791
1792 [$]: #dollar
1793 [$$]: #dollars
1794
1795 [Array]: /core/Native/Array
1796 [Selectors]: /core/Utilities/Selectors
1797
1798 [Element]: #Element
1799 [Elements]: #Elements
1800 [Element:set]: #Element:set
1801 [Element:get]: #Element:get
1802 [Element:erase]: #Element:erase
1803 [Element:setProperty]: #Element:setProperty
1804 [Element:getProperty]: #Element:getProperty
1805 [Element:removeProperty]: #Element:removeProperty
1806 [Element:getElement]: #Element:getElement
1807 [Element:getElements]: #Element:getElements
1808 [Element.Properties]: #Element-Properties
1809 [Element:getPrevious]: #Element:getPrevious
1810
1811 [Element:addEvents]: /core/Element/Element.Event#Element:addEvents
1812 [Element:setStyles]: /core/Element/Element.Style#Element:setStyles