latest/javascript/helper-functions/index.html

   1
   2 <!doctype html>
   3 <html lang="en" class="no-js">
   4   <head>
   5
   6       <meta charset="utf-8">
   7       <meta name="viewport" content="width=device-width,initial-scale=1">
   8
   9
  10
  11
  12       <link rel="icon" href="../../assets/default.favicon.ico">
  13       <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.1.2">
  14
  15
  16
  17         <title>Helper Functions - WoltLab Suite Documentation</title>
  18
  19
  20
  21       <link rel="stylesheet" href="../../assets/stylesheets/main.6f955dcd.min.css">
  22
  23
  24         <link rel="stylesheet" href="../../assets/stylesheets/palette.ef6f36e2.min.css">
  25
  26
  27
  28           <meta name="theme-color" content="#009485">
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38       <link rel="stylesheet" href="../../stylesheets/extra.css">
  39
  40
  41
  42
  43
  44   </head>
  45
  46
  47
  48
  49
  50
  51
  52     <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  53
  54
  55     <script>function __prefix(e){return new URL("../..",location).pathname+"."+e}function __get(e,t=localStorage){return JSON.parse(t.getItem(__prefix(e)))}</script>
  56
  57     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  58     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  59     <label class="md-overlay" for="__drawer"></label>
  60     <div data-md-component="skip">
  61
  62
  63         <a href="#javascript-helper-functions" class="md-skip">
  64           Skip to content
  65         </a>
  66
  67     </div>
  68     <div data-md-component="announce">
  69
  70         <aside class="md-announce">
  71           <div class="md-announce__inner md-grid md-typeset">
  72
  73     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  74
  75           </div>
  76         </aside>
  77
  78     </div>
  79
  80       <header class="md-header" data-md-component="header">
  81   <nav class="md-header__inner md-grid" aria-label="Header">
  82     <a href="../.." title="WoltLab Suite Documentation" class="md-header__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
  83
  84   <img src="../../assets/logo.png" alt="logo">
  85
  86     </a>
  87     <label class="md-header__button md-icon" for="__drawer">
  88       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2z"/></svg>
  89     </label>
  90     <div class="md-header__title" data-md-component="header-title">
  91       <div class="md-header__ellipsis">
  92         <div class="md-header__topic">
  93           <span class="md-ellipsis">
  94             WoltLab Suite Documentation
  95           </span>
  96         </div>
  97         <div class="md-header__topic" data-md-component="header-topic">
  98           <span class="md-ellipsis">
  99
 100               Helper Functions
 101
 102           </span>
 103         </div>
 104       </div>
 105     </div>
 106
 107
 108
 109       <label class="md-header__button md-icon" for="__search">
 110         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
 111       </label>
 112
 113 <div class="md-search" data-md-component="search" role="dialog">
 114   <label class="md-search__overlay" for="__search"></label>
 115   <div class="md-search__inner" role="search">
 116     <form class="md-search__form" name="search">
 117       <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" data-md-state="active" required>
 118       <label class="md-search__icon md-icon" for="__search">
 119         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>
 120         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
 121       </label>
 122       <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
 123         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
 124       </button>
 125     </form>
 126     <div class="md-search__output">
 127       <div class="md-search__scrollwrap" data-md-scrollfix>
 128         <div class="md-search-result" data-md-component="search-result">
 129           <div class="md-search-result__meta">
 130             Initializing search
 131           </div>
 132           <ol class="md-search-result__list"></ol>
 133         </div>
 134       </div>
 135     </div>
 136   </div>
 137 </div>
 138
 139
 140       <div class="md-header__source">
 141
 142 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 143   <div class="md-source__icon md-icon">
 144
 145     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 146   </div>
 147   <div class="md-source__repository">
 148     GitHub
 149   </div>
 150 </a>
 151       </div>
 152
 153   </nav>
 154 </header>
 155
 156     <div class="md-container" data-md-component="container">
 157
 158
 159
 160
 161       <main class="md-main" data-md-component="main">
 162         <div class="md-main__inner md-grid">
 163
 164
 165
 166               <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
 167                 <div class="md-sidebar__scrollwrap">
 168                   <div class="md-sidebar__inner">
 169
 170
 171
 172 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 173   <label class="md-nav__title" for="__drawer">
 174     <a href="../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation" data-md-component="logo">
 175
 176   <img src="../../assets/logo.png" alt="logo">
 177
 178     </a>
 179     WoltLab Suite Documentation
 180   </label>
 181
 182     <div class="md-nav__source">
 183
 184 <a href="https://github.com/WoltLab/docs.woltlab.com/" title="Go to repository" class="md-source" data-md-component="source">
 185   <div class="md-source__icon md-icon">
 186
 187     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
 188   </div>
 189   <div class="md-source__repository">
 190     GitHub
 191   </div>
 192 </a>
 193     </div>
 194
 195   <ul class="md-nav__list" data-md-scrollfix>
 196
 197
 198
 199
 200
 201
 202
 203
 204     <li class="md-nav__item">
 205       <a href="../../getting-started/" class="md-nav__link">
 206         Getting Started
 207       </a>
 208     </li>
 209
 210
 211
 212
 213
 214
 215
 216
 217
 218
 219
 220     <li class="md-nav__item md-nav__item--nested">
 221
 222
 223         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
 224
 225       <label class="md-nav__link" for="__nav_2">
 226         PHP API
 227         <span class="md-nav__icon md-icon"></span>
 228       </label>
 229       <nav class="md-nav" aria-label="PHP API" data-md-level="1">
 230         <label class="md-nav__title" for="__nav_2">
 231           <span class="md-nav__icon md-icon"></span>
 232           PHP API
 233         </label>
 234         <ul class="md-nav__list" data-md-scrollfix>
 235
 236
 237
 238
 239
 240     <li class="md-nav__item">
 241       <a href="../../php/pages/" class="md-nav__link">
 242         Pages
 243       </a>
 244     </li>
 245
 246
 247
 248
 249
 250
 251
 252     <li class="md-nav__item">
 253       <a href="../../php/database-objects/" class="md-nav__link">
 254         Database Objects
 255       </a>
 256     </li>
 257
 258
 259
 260
 261
 262
 263
 264     <li class="md-nav__item">
 265       <a href="../../php/database-access/" class="md-nav__link">
 266         Database Access
 267       </a>
 268     </li>
 269
 270
 271
 272
 273
 274
 275
 276     <li class="md-nav__item">
 277       <a href="../../php/exceptions/" class="md-nav__link">
 278         Exceptions
 279       </a>
 280     </li>
 281
 282
 283
 284
 285
 286
 287
 288
 289     <li class="md-nav__item md-nav__item--nested">
 290
 291
 292         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
 293
 294       <label class="md-nav__link" for="__nav_2_5">
 295         API
 296         <span class="md-nav__icon md-icon"></span>
 297       </label>
 298       <nav class="md-nav" aria-label="API" data-md-level="2">
 299         <label class="md-nav__title" for="__nav_2_5">
 300           <span class="md-nav__icon md-icon"></span>
 301           API
 302         </label>
 303         <ul class="md-nav__list" data-md-scrollfix>
 304
 305
 306
 307
 308
 309
 310     <li class="md-nav__item md-nav__item--nested">
 311
 312
 313         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_1" type="checkbox" id="__nav_2_5_1" >
 314
 315       <label class="md-nav__link" for="__nav_2_5_1">
 316         Caches
 317         <span class="md-nav__icon md-icon"></span>
 318       </label>
 319       <nav class="md-nav" aria-label="Caches" data-md-level="3">
 320         <label class="md-nav__title" for="__nav_2_5_1">
 321           <span class="md-nav__icon md-icon"></span>
 322           Caches
 323         </label>
 324         <ul class="md-nav__list" data-md-scrollfix>
 325
 326
 327
 328
 329
 330     <li class="md-nav__item">
 331       <a href="../../php/api/caches/" class="md-nav__link">
 332         Overview
 333       </a>
 334     </li>
 335
 336
 337
 338
 339
 340
 341
 342     <li class="md-nav__item">
 343       <a href="../../php/api/caches_persistent-caches/" class="md-nav__link">
 344         Persistent Caches
 345       </a>
 346     </li>
 347
 348
 349
 350
 351
 352
 353
 354     <li class="md-nav__item">
 355       <a href="../../php/api/caches_runtime-caches/" class="md-nav__link">
 356         Runtime Caches
 357       </a>
 358     </li>
 359
 360
 361
 362         </ul>
 363       </nav>
 364     </li>
 365
 366
 367
 368
 369
 370
 371
 372     <li class="md-nav__item">
 373       <a href="../../php/api/comments/" class="md-nav__link">
 374         Comments
 375       </a>
 376     </li>
 377
 378
 379
 380
 381
 382
 383
 384     <li class="md-nav__item">
 385       <a href="../../php/api/cronjobs/" class="md-nav__link">
 386         Cronjobs
 387       </a>
 388     </li>
 389
 390
 391
 392
 393
 394
 395
 396     <li class="md-nav__item">
 397       <a href="../../php/api/events/" class="md-nav__link">
 398         Events
 399       </a>
 400     </li>
 401
 402
 403
 404
 405
 406
 407
 408
 409     <li class="md-nav__item md-nav__item--nested">
 410
 411
 412         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
 413
 414       <label class="md-nav__link" for="__nav_2_5_5">
 415         Form Builder
 416         <span class="md-nav__icon md-icon"></span>
 417       </label>
 418       <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
 419         <label class="md-nav__title" for="__nav_2_5_5">
 420           <span class="md-nav__icon md-icon"></span>
 421           Form Builder
 422         </label>
 423         <ul class="md-nav__list" data-md-scrollfix>
 424
 425
 426
 427
 428
 429     <li class="md-nav__item">
 430       <a href="../../php/api/form_builder/overview/" class="md-nav__link">
 431         Overview
 432       </a>
 433     </li>
 434
 435
 436
 437
 438
 439
 440
 441     <li class="md-nav__item">
 442       <a href="../../php/api/form_builder/structure/" class="md-nav__link">
 443         Structure
 444       </a>
 445     </li>
 446
 447
 448
 449
 450
 451
 452
 453     <li class="md-nav__item">
 454       <a href="../../php/api/form_builder/form_fields/" class="md-nav__link">
 455         Fields
 456       </a>
 457     </li>
 458
 459
 460
 461
 462
 463
 464
 465     <li class="md-nav__item">
 466       <a href="../../php/api/form_builder/validation_data/" class="md-nav__link">
 467         Validation and Data
 468       </a>
 469     </li>
 470
 471
 472
 473
 474
 475
 476
 477     <li class="md-nav__item">
 478       <a href="../../php/api/form_builder/dependencies/" class="md-nav__link">
 479         Dependencies
 480       </a>
 481     </li>
 482
 483
 484
 485         </ul>
 486       </nav>
 487     </li>
 488
 489
 490
 491
 492
 493
 494
 495     <li class="md-nav__item">
 496       <a href="../../php/api/package_installation_plugins/" class="md-nav__link">
 497         Package Installation Plugins
 498       </a>
 499     </li>
 500
 501
 502
 503
 504
 505
 506
 507     <li class="md-nav__item">
 508       <a href="../../php/api/user_activity_points/" class="md-nav__link">
 509         User Activity Points
 510       </a>
 511     </li>
 512
 513
 514
 515
 516
 517
 518
 519     <li class="md-nav__item">
 520       <a href="../../php/api/user_notifications/" class="md-nav__link">
 521         User Notifications
 522       </a>
 523     </li>
 524
 525
 526
 527
 528
 529
 530
 531     <li class="md-nav__item">
 532       <a href="../../php/api/sitemaps/" class="md-nav__link">
 533         Sitemaps
 534       </a>
 535     </li>
 536
 537
 538
 539         </ul>
 540       </nav>
 541     </li>
 542
 543
 544
 545
 546
 547
 548
 549     <li class="md-nav__item">
 550       <a href="../../php/code-style/" class="md-nav__link">
 551         Code Style
 552       </a>
 553     </li>
 554
 555
 556
 557
 558
 559
 560
 561     <li class="md-nav__item">
 562       <a href="../../php/apps/" class="md-nav__link">
 563         Apps
 564       </a>
 565     </li>
 566
 567
 568
 569
 570
 571
 572
 573     <li class="md-nav__item">
 574       <a href="../../php/gdpr/" class="md-nav__link">
 575         GDPR
 576       </a>
 577     </li>
 578
 579
 580
 581         </ul>
 582       </nav>
 583     </li>
 584
 585
 586
 587
 588
 589
 590
 591
 592
 593
 594
 595     <li class="md-nav__item md-nav__item--nested">
 596
 597
 598         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
 599
 600       <label class="md-nav__link" for="__nav_3">
 601         Languages, Templates & CSS
 602         <span class="md-nav__icon md-icon"></span>
 603       </label>
 604       <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
 605         <label class="md-nav__title" for="__nav_3">
 606           <span class="md-nav__icon md-icon"></span>
 607           Languages, Templates & CSS
 608         </label>
 609         <ul class="md-nav__list" data-md-scrollfix>
 610
 611
 612
 613
 614
 615     <li class="md-nav__item">
 616       <a href="../../view/languages/" class="md-nav__link">
 617         Languages
 618       </a>
 619     </li>
 620
 621
 622
 623
 624
 625
 626
 627     <li class="md-nav__item">
 628       <a href="../../view/templates/" class="md-nav__link">
 629         Templates
 630       </a>
 631     </li>
 632
 633
 634
 635
 636
 637
 638
 639     <li class="md-nav__item">
 640       <a href="../../view/template-plugins/" class="md-nav__link">
 641         Template Plugins
 642       </a>
 643     </li>
 644
 645
 646
 647
 648
 649
 650
 651     <li class="md-nav__item">
 652       <a href="../../view/css/" class="md-nav__link">
 653         CSS
 654       </a>
 655     </li>
 656
 657
 658
 659         </ul>
 660       </nav>
 661     </li>
 662
 663
 664
 665
 666
 667
 668
 669
 670
 671
 672
 673
 674
 675     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 676
 677
 678         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" checked>
 679
 680       <label class="md-nav__link" for="__nav_4">
 681         TypeScript and JavaScript API
 682         <span class="md-nav__icon md-icon"></span>
 683       </label>
 684       <nav class="md-nav" aria-label="TypeScript and JavaScript API" data-md-level="1">
 685         <label class="md-nav__title" for="__nav_4">
 686           <span class="md-nav__icon md-icon"></span>
 687           TypeScript and JavaScript API
 688         </label>
 689         <ul class="md-nav__list" data-md-scrollfix>
 690
 691
 692
 693
 694
 695     <li class="md-nav__item">
 696       <a href="../general-usage/" class="md-nav__link">
 697         General Usage
 698       </a>
 699     </li>
 700
 701
 702
 703
 704
 705
 706
 707     <li class="md-nav__item">
 708       <a href="../typescript/" class="md-nav__link">
 709         TypeScript
 710       </a>
 711     </li>
 712
 713
 714
 715
 716
 717
 718
 719
 720     <li class="md-nav__item md-nav__item--nested">
 721
 722
 723         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_3" type="checkbox" id="__nav_4_3" >
 724
 725       <label class="md-nav__link" for="__nav_4_3">
 726         New API
 727         <span class="md-nav__icon md-icon"></span>
 728       </label>
 729       <nav class="md-nav" aria-label="New API" data-md-level="2">
 730         <label class="md-nav__title" for="__nav_4_3">
 731           <span class="md-nav__icon md-icon"></span>
 732           New API
 733         </label>
 734         <ul class="md-nav__list" data-md-scrollfix>
 735
 736
 737
 738
 739
 740     <li class="md-nav__item">
 741       <a href="../new-api_writing-a-module/" class="md-nav__link">
 742         Writing a module
 743       </a>
 744     </li>
 745
 746
 747
 748
 749
 750
 751
 752     <li class="md-nav__item">
 753       <a href="../new-api_data-structures/" class="md-nav__link">
 754         Data Structures
 755       </a>
 756     </li>
 757
 758
 759
 760
 761
 762
 763
 764     <li class="md-nav__item">
 765       <a href="../new-api_core/" class="md-nav__link">
 766         Core Functions
 767       </a>
 768     </li>
 769
 770
 771
 772
 773
 774
 775
 776     <li class="md-nav__item">
 777       <a href="../new-api_dom/" class="md-nav__link">
 778         DOM
 779       </a>
 780     </li>
 781
 782
 783
 784
 785
 786
 787
 788     <li class="md-nav__item">
 789       <a href="../new-api_events/" class="md-nav__link">
 790         Event Handling
 791       </a>
 792     </li>
 793
 794
 795
 796
 797
 798
 799
 800     <li class="md-nav__item">
 801       <a href="../new-api_ajax/" class="md-nav__link">
 802         Ajax
 803       </a>
 804     </li>
 805
 806
 807
 808
 809
 810
 811
 812     <li class="md-nav__item">
 813       <a href="../new-api_dialogs/" class="md-nav__link">
 814         Dialogs
 815       </a>
 816     </li>
 817
 818
 819
 820
 821
 822
 823
 824     <li class="md-nav__item">
 825       <a href="../new-api_browser/" class="md-nav__link">
 826         Browser and Screen Sizes
 827       </a>
 828     </li>
 829
 830
 831
 832
 833
 834
 835
 836     <li class="md-nav__item">
 837       <a href="../new-api_ui/" class="md-nav__link">
 838         User Interface
 839       </a>
 840     </li>
 841
 842
 843
 844         </ul>
 845       </nav>
 846     </li>
 847
 848
 849
 850
 851
 852
 853
 854     <li class="md-nav__item">
 855       <a href="../legacy-api/" class="md-nav__link">
 856         Legacy API
 857       </a>
 858     </li>
 859
 860
 861
 862
 863
 864
 865
 866
 867
 868     <li class="md-nav__item md-nav__item--active">
 869
 870       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
 871
 872
 873
 874
 875
 876         <label class="md-nav__link md-nav__link--active" for="__toc">
 877           Helper Functions
 878           <span class="md-nav__icon md-icon"></span>
 879         </label>
 880
 881       <a href="./" class="md-nav__link md-nav__link--active">
 882         Helper Functions
 883       </a>
 884
 885
 886 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
 887
 888
 889
 890
 891
 892
 893     <label class="md-nav__title" for="__toc">
 894       <span class="md-nav__icon md-icon"></span>
 895       Table of contents
 896     </label>
 897     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
 898
 899         <li class="md-nav__item">
 900   <a href="#introduction" class="md-nav__link">
 901     Introduction
 902   </a>
 903
 904 </li>
 905
 906         <li class="md-nav__item">
 907   <a href="#elements" class="md-nav__link">
 908     Elements
 909   </a>
 910
 911     <nav class="md-nav" aria-label="Elements">
 912       <ul class="md-nav__list">
 913
 914           <li class="md-nav__item">
 915   <a href="#elcreatetagname-string-element" class="md-nav__link">
 916     elCreate(tagName: string): Element
 917   </a>
 918
 919 </li>
 920
 921           <li class="md-nav__item">
 922   <a href="#elremoveelement-element" class="md-nav__link">
 923     elRemove(element: Element)
 924   </a>
 925
 926 </li>
 927
 928           <li class="md-nav__item">
 929   <a href="#elshowelement-element" class="md-nav__link">
 930     elShow(element: Element)
 931   </a>
 932
 933 </li>
 934
 935           <li class="md-nav__item">
 936   <a href="#elhideelement-element" class="md-nav__link">
 937     elHide(element: Element)
 938   </a>
 939
 940 </li>
 941
 942           <li class="md-nav__item">
 943   <a href="#eltoggleelement-element" class="md-nav__link">
 944     elToggle(element: Element)
 945   </a>
 946
 947 </li>
 948
 949       </ul>
 950     </nav>
 951
 952 </li>
 953
 954         <li class="md-nav__item">
 955   <a href="#attributes" class="md-nav__link">
 956     Attributes
 957   </a>
 958
 959     <nav class="md-nav" aria-label="Attributes">
 960       <ul class="md-nav__list">
 961
 962           <li class="md-nav__item">
 963   <a href="#elattrelement-element-attribute-string-value-string-string" class="md-nav__link">
 964     elAttr(element: Element, attribute: string, value?: string): string
 965   </a>
 966
 967 </li>
 968
 969           <li class="md-nav__item">
 970   <a href="#elattrboolelement-element-attribute-string-boolean" class="md-nav__link">
 971     elAttrBool(element: Element, attribute: string): boolean
 972   </a>
 973
 974 </li>
 975
 976           <li class="md-nav__item">
 977   <a href="#eldataelement-element-attribute-string-value-string-string" class="md-nav__link">
 978     elData(element: Element, attribute: string, value?: string): string
 979   </a>
 980
 981 </li>
 982
 983           <li class="md-nav__item">
 984   <a href="#eldataboolelement-element-attribute-string-boolean" class="md-nav__link">
 985     elDataBool(element: Element, attribute: string): boolean
 986   </a>
 987
 988 </li>
 989
 990       </ul>
 991     </nav>
 992
 993 </li>
 994
 995         <li class="md-nav__item">
 996   <a href="#selecting-elements" class="md-nav__link">
 997     Selecting Elements
 998   </a>
 999
1000     <nav class="md-nav" aria-label="Selecting Elements">
1001       <ul class="md-nav__list">
1002
1003           <li class="md-nav__item">
1004   <a href="#elbyidid-string-element-null" class="md-nav__link">
1005     elById(id: string): Element | null
1006   </a>
1007
1008 </li>
1009
1010           <li class="md-nav__item">
1011   <a href="#elbyselselector-string-context-element-element-null" class="md-nav__link">
1012     elBySel(selector: string, context?: Element): Element | null
1013   </a>
1014
1015 </li>
1016
1017           <li class="md-nav__item">
1018   <a href="#elbyselallselector-string-context-element-callback-element-element-void-nodelist" class="md-nav__link">
1019     elBySelAll(selector: string, context?: Element, callback: (element: Element) =&gt; void): NodeList
1020   </a>
1021
1022     <nav class="md-nav" aria-label="elBySelAll(selector: string, context?: Element, callback: (element: Element) =&gt; void): NodeList">
1023       <ul class="md-nav__list">
1024
1025           <li class="md-nav__item">
1026   <a href="#callback-to-iterate-over-elements" class="md-nav__link">
1027     Callback to Iterate Over Elements
1028   </a>
1029
1030 </li>
1031
1032       </ul>
1033     </nav>
1034
1035 </li>
1036
1037           <li class="md-nav__item">
1038   <a href="#elclosestelement-element-selector-string-element-null" class="md-nav__link">
1039     elClosest(element: Element, selector: string): Element | null
1040   </a>
1041
1042     <nav class="md-nav" aria-label="elClosest(element: Element, selector: string): Element | null">
1043       <ul class="md-nav__list">
1044
1045           <li class="md-nav__item">
1046   <a href="#text-nodes" class="md-nav__link">
1047     Text Nodes
1048   </a>
1049
1050 </li>
1051
1052       </ul>
1053     </nav>
1054
1055 </li>
1056
1057           <li class="md-nav__item">
1058   <a href="#elbyclassclassname-string-context-element-nodelist" class="md-nav__link">
1059     elByClass(className: string, context?: Element): NodeList
1060   </a>
1061
1062 </li>
1063
1064           <li class="md-nav__item">
1065   <a href="#elbytagtagname-string-context-element-nodelist" class="md-nav__link">
1066     elByTag(tagName: string, context?: Element): NodeList
1067   </a>
1068
1069 </li>
1070
1071       </ul>
1072     </nav>
1073
1074 </li>
1075
1076         <li class="md-nav__item">
1077   <a href="#utility-functions" class="md-nav__link">
1078     Utility Functions
1079   </a>
1080
1081     <nav class="md-nav" aria-label="Utility Functions">
1082       <ul class="md-nav__list">
1083
1084           <li class="md-nav__item">
1085   <a href="#elinnererrorelement-element-errormessage-string-ishtml-boolean-element-null" class="md-nav__link">
1086     `elInnerError(element: Element, errorMessage?: string, isHtml?: boolean): Element | null``
1087   </a>
1088
1089 </li>
1090
1091       </ul>
1092     </nav>
1093
1094 </li>
1095
1096         <li class="md-nav__item">
1097   <a href="#string-extensions" class="md-nav__link">
1098     String Extensions
1099   </a>
1100
1101     <nav class="md-nav" aria-label="String Extensions">
1102       <ul class="md-nav__list">
1103
1104           <li class="md-nav__item">
1105   <a href="#hashcode-string" class="md-nav__link">
1106     hashCode(): string
1107   </a>
1108
1109 </li>
1110
1111       </ul>
1112     </nav>
1113
1114 </li>
1115
1116     </ul>
1117
1118 </nav>
1119
1120     </li>
1121
1122
1123
1124
1125
1126
1127
1128     <li class="md-nav__item">
1129       <a href="../code-snippets/" class="md-nav__link">
1130         Code Snippets
1131       </a>
1132     </li>
1133
1134
1135
1136         </ul>
1137       </nav>
1138     </li>
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150     <li class="md-nav__item md-nav__item--nested">
1151
1152
1153         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
1154
1155       <label class="md-nav__link" for="__nav_5">
1156         Package Components
1157         <span class="md-nav__icon md-icon"></span>
1158       </label>
1159       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
1160         <label class="md-nav__title" for="__nav_5">
1161           <span class="md-nav__icon md-icon"></span>
1162           Package Components
1163         </label>
1164         <ul class="md-nav__list" data-md-scrollfix>
1165
1166
1167
1168
1169
1170     <li class="md-nav__item">
1171       <a href="../../package/package-xml/" class="md-nav__link">
1172         package.xml
1173       </a>
1174     </li>
1175
1176
1177
1178
1179
1180
1181
1182
1183     <li class="md-nav__item md-nav__item--nested">
1184
1185
1186         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
1187
1188       <label class="md-nav__link" for="__nav_5_2">
1189         PIPs
1190         <span class="md-nav__icon md-icon"></span>
1191       </label>
1192       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
1193         <label class="md-nav__title" for="__nav_5_2">
1194           <span class="md-nav__icon md-icon"></span>
1195           PIPs
1196         </label>
1197         <ul class="md-nav__list" data-md-scrollfix>
1198
1199
1200
1201
1202
1203     <li class="md-nav__item">
1204       <a href="../../package/pip/" class="md-nav__link">
1205         Overview
1206       </a>
1207     </li>
1208
1209
1210
1211
1212
1213
1214
1215     <li class="md-nav__item">
1216       <a href="../../package/pip/acl-option/" class="md-nav__link">
1217         aclOption
1218       </a>
1219     </li>
1220
1221
1222
1223
1224
1225
1226
1227     <li class="md-nav__item">
1228       <a href="../../package/pip/acp-menu/" class="md-nav__link">
1229         acpMenu
1230       </a>
1231     </li>
1232
1233
1234
1235
1236
1237
1238
1239     <li class="md-nav__item">
1240       <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
1241         acpSearchProvider
1242       </a>
1243     </li>
1244
1245
1246
1247
1248
1249
1250
1251     <li class="md-nav__item">
1252       <a href="../../package/pip/acp-template/" class="md-nav__link">
1253         acpTemplate
1254       </a>
1255     </li>
1256
1257
1258
1259
1260
1261
1262
1263     <li class="md-nav__item">
1264       <a href="../../package/pip/bbcode/" class="md-nav__link">
1265         bbcode
1266       </a>
1267     </li>
1268
1269
1270
1271
1272
1273
1274
1275     <li class="md-nav__item">
1276       <a href="../../package/pip/box/" class="md-nav__link">
1277         box
1278       </a>
1279     </li>
1280
1281
1282
1283
1284
1285
1286
1287     <li class="md-nav__item">
1288       <a href="../../package/pip/clipboard-action/" class="md-nav__link">
1289         clipboardAction
1290       </a>
1291     </li>
1292
1293
1294
1295
1296
1297
1298
1299     <li class="md-nav__item">
1300       <a href="../../package/pip/core-object/" class="md-nav__link">
1301         coreObject
1302       </a>
1303     </li>
1304
1305
1306
1307
1308
1309
1310
1311     <li class="md-nav__item">
1312       <a href="../../package/pip/cronjob/" class="md-nav__link">
1313         cronjob
1314       </a>
1315     </li>
1316
1317
1318
1319
1320
1321
1322
1323     <li class="md-nav__item">
1324       <a href="../../package/pip/database/" class="md-nav__link">
1325         database
1326       </a>
1327     </li>
1328
1329
1330
1331
1332
1333
1334
1335     <li class="md-nav__item">
1336       <a href="../../package/pip/event-listener/" class="md-nav__link">
1337         eventListener
1338       </a>
1339     </li>
1340
1341
1342
1343
1344
1345
1346
1347     <li class="md-nav__item">
1348       <a href="../../package/pip/file/" class="md-nav__link">
1349         file
1350       </a>
1351     </li>
1352
1353
1354
1355
1356
1357
1358
1359     <li class="md-nav__item">
1360       <a href="../../package/pip/language/" class="md-nav__link">
1361         language
1362       </a>
1363     </li>
1364
1365
1366
1367
1368
1369
1370
1371     <li class="md-nav__item">
1372       <a href="../../package/pip/media-provider/" class="md-nav__link">
1373         mediaProvider
1374       </a>
1375     </li>
1376
1377
1378
1379
1380
1381
1382
1383     <li class="md-nav__item">
1384       <a href="../../package/pip/menu/" class="md-nav__link">
1385         menu
1386       </a>
1387     </li>
1388
1389
1390
1391
1392
1393
1394
1395     <li class="md-nav__item">
1396       <a href="../../package/pip/menu-item/" class="md-nav__link">
1397         menuItem
1398       </a>
1399     </li>
1400
1401
1402
1403
1404
1405
1406
1407     <li class="md-nav__item">
1408       <a href="../../package/pip/object-type/" class="md-nav__link">
1409         objectType
1410       </a>
1411     </li>
1412
1413
1414
1415
1416
1417
1418
1419     <li class="md-nav__item">
1420       <a href="../../package/pip/object-type-definition/" class="md-nav__link">
1421         objectTypeDefinition
1422       </a>
1423     </li>
1424
1425
1426
1427
1428
1429
1430
1431     <li class="md-nav__item">
1432       <a href="../../package/pip/option/" class="md-nav__link">
1433         option
1434       </a>
1435     </li>
1436
1437
1438
1439
1440
1441
1442
1443     <li class="md-nav__item">
1444       <a href="../../package/pip/page/" class="md-nav__link">
1445         page
1446       </a>
1447     </li>
1448
1449
1450
1451
1452
1453
1454
1455     <li class="md-nav__item">
1456       <a href="../../package/pip/pip/" class="md-nav__link">
1457         pip
1458       </a>
1459     </li>
1460
1461
1462
1463
1464
1465
1466
1467     <li class="md-nav__item">
1468       <a href="../../package/pip/script/" class="md-nav__link">
1469         script
1470       </a>
1471     </li>
1472
1473
1474
1475
1476
1477
1478
1479     <li class="md-nav__item">
1480       <a href="../../package/pip/smiley/" class="md-nav__link">
1481         smiley
1482       </a>
1483     </li>
1484
1485
1486
1487
1488
1489
1490
1491     <li class="md-nav__item">
1492       <a href="../../package/pip/sql/" class="md-nav__link">
1493         sql
1494       </a>
1495     </li>
1496
1497
1498
1499
1500
1501
1502
1503     <li class="md-nav__item">
1504       <a href="../../package/pip/style/" class="md-nav__link">
1505         style
1506       </a>
1507     </li>
1508
1509
1510
1511
1512
1513
1514
1515     <li class="md-nav__item">
1516       <a href="../../package/pip/template/" class="md-nav__link">
1517         template
1518       </a>
1519     </li>
1520
1521
1522
1523
1524
1525
1526
1527     <li class="md-nav__item">
1528       <a href="../../package/pip/template-listener/" class="md-nav__link">
1529         templateListener
1530       </a>
1531     </li>
1532
1533
1534
1535
1536
1537
1538
1539     <li class="md-nav__item">
1540       <a href="../../package/pip/user-group-option/" class="md-nav__link">
1541         userGroupOption
1542       </a>
1543     </li>
1544
1545
1546
1547
1548
1549
1550
1551     <li class="md-nav__item">
1552       <a href="../../package/pip/user-menu/" class="md-nav__link">
1553         userMenu
1554       </a>
1555     </li>
1556
1557
1558
1559
1560
1561
1562
1563     <li class="md-nav__item">
1564       <a href="../../package/pip/user-notification-event/" class="md-nav__link">
1565         userNotificationEvent
1566       </a>
1567     </li>
1568
1569
1570
1571
1572
1573
1574
1575     <li class="md-nav__item">
1576       <a href="../../package/pip/user-option/" class="md-nav__link">
1577         userOption
1578       </a>
1579     </li>
1580
1581
1582
1583
1584
1585
1586
1587     <li class="md-nav__item">
1588       <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
1589         userProfileMenu
1590       </a>
1591     </li>
1592
1593
1594
1595         </ul>
1596       </nav>
1597     </li>
1598
1599
1600
1601
1602
1603
1604
1605     <li class="md-nav__item">
1606       <a href="../../package/database-php-api/" class="md-nav__link">
1607         Database PHP API
1608       </a>
1609     </li>
1610
1611
1612
1613         </ul>
1614       </nav>
1615     </li>
1616
1617
1618
1619
1620
1621
1622
1623
1624
1625
1626
1627     <li class="md-nav__item md-nav__item--nested">
1628
1629
1630         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1631
1632       <label class="md-nav__link" for="__nav_6">
1633         Migration
1634         <span class="md-nav__icon md-icon"></span>
1635       </label>
1636       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1637         <label class="md-nav__title" for="__nav_6">
1638           <span class="md-nav__icon md-icon"></span>
1639           Migration
1640         </label>
1641         <ul class="md-nav__list" data-md-scrollfix>
1642
1643
1644
1645
1646
1647
1648     <li class="md-nav__item md-nav__item--nested">
1649
1650
1651         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1652
1653       <label class="md-nav__link" for="__nav_6_1">
1654         Migrating from WSC 5.3
1655         <span class="md-nav__icon md-icon"></span>
1656       </label>
1657       <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
1658         <label class="md-nav__title" for="__nav_6_1">
1659           <span class="md-nav__icon md-icon"></span>
1660           Migrating from WSC 5.3
1661         </label>
1662         <ul class="md-nav__list" data-md-scrollfix>
1663
1664
1665
1666
1667
1668     <li class="md-nav__item">
1669       <a href="../../migration/wsc53/php/" class="md-nav__link">
1670         PHP API
1671       </a>
1672     </li>
1673
1674
1675
1676
1677
1678
1679
1680     <li class="md-nav__item">
1681       <a href="../../migration/wsc53/session/" class="md-nav__link">
1682         Session Handling and Authentication
1683       </a>
1684     </li>
1685
1686
1687
1688
1689
1690
1691
1692     <li class="md-nav__item">
1693       <a href="../../migration/wsc53/javascript/" class="md-nav__link">
1694         TypeScript and JavaScript
1695       </a>
1696     </li>
1697
1698
1699
1700
1701
1702
1703
1704     <li class="md-nav__item">
1705       <a href="../../migration/wsc53/templates/" class="md-nav__link">
1706         Templates
1707       </a>
1708     </li>
1709
1710
1711
1712
1713
1714
1715
1716     <li class="md-nav__item">
1717       <a href="../../migration/wsc53/libraries/" class="md-nav__link">
1718         Third Party Libraries
1719       </a>
1720     </li>
1721
1722
1723
1724         </ul>
1725       </nav>
1726     </li>
1727
1728
1729
1730
1731
1732
1733
1734
1735     <li class="md-nav__item md-nav__item--nested">
1736
1737
1738         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1739
1740       <label class="md-nav__link" for="__nav_6_2">
1741         Migrating from WSC 5.2
1742         <span class="md-nav__icon md-icon"></span>
1743       </label>
1744       <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
1745         <label class="md-nav__title" for="__nav_6_2">
1746           <span class="md-nav__icon md-icon"></span>
1747           Migrating from WSC 5.2
1748         </label>
1749         <ul class="md-nav__list" data-md-scrollfix>
1750
1751
1752
1753
1754
1755     <li class="md-nav__item">
1756       <a href="../../migration/wsc52/php/" class="md-nav__link">
1757         PHP API
1758       </a>
1759     </li>
1760
1761
1762
1763
1764
1765
1766
1767     <li class="md-nav__item">
1768       <a href="../../migration/wsc52/templates/" class="md-nav__link">
1769         Templates and Languages
1770       </a>
1771     </li>
1772
1773
1774
1775
1776
1777
1778
1779     <li class="md-nav__item">
1780       <a href="../../migration/wsc52/libraries/" class="md-nav__link">
1781         Third Party Libraries
1782       </a>
1783     </li>
1784
1785
1786
1787         </ul>
1788       </nav>
1789     </li>
1790
1791
1792
1793
1794
1795
1796
1797
1798     <li class="md-nav__item md-nav__item--nested">
1799
1800
1801         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1802
1803       <label class="md-nav__link" for="__nav_6_3">
1804         Migrating from WSC 3.1
1805         <span class="md-nav__icon md-icon"></span>
1806       </label>
1807       <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
1808         <label class="md-nav__title" for="__nav_6_3">
1809           <span class="md-nav__icon md-icon"></span>
1810           Migrating from WSC 3.1
1811         </label>
1812         <ul class="md-nav__list" data-md-scrollfix>
1813
1814
1815
1816
1817
1818     <li class="md-nav__item">
1819       <a href="../../migration/wsc31/php/" class="md-nav__link">
1820         PHP API
1821       </a>
1822     </li>
1823
1824
1825
1826         </ul>
1827       </nav>
1828     </li>
1829
1830
1831
1832
1833
1834
1835
1836
1837     <li class="md-nav__item md-nav__item--nested">
1838
1839
1840         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1841
1842       <label class="md-nav__link" for="__nav_6_4">
1843         Migrating from WSC 3.0
1844         <span class="md-nav__icon md-icon"></span>
1845       </label>
1846       <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1847         <label class="md-nav__title" for="__nav_6_4">
1848           <span class="md-nav__icon md-icon"></span>
1849           Migrating from WSC 3.0
1850         </label>
1851         <ul class="md-nav__list" data-md-scrollfix>
1852
1853
1854
1855
1856
1857     <li class="md-nav__item">
1858       <a href="../../migration/wsc30/php/" class="md-nav__link">
1859         PHP API
1860       </a>
1861     </li>
1862
1863
1864
1865
1866
1867
1868
1869     <li class="md-nav__item">
1870       <a href="../../migration/wsc30/javascript/" class="md-nav__link">
1871         JavaScript API
1872       </a>
1873     </li>
1874
1875
1876
1877
1878
1879
1880
1881     <li class="md-nav__item">
1882       <a href="../../migration/wsc30/templates/" class="md-nav__link">
1883         Templates
1884       </a>
1885     </li>
1886
1887
1888
1889
1890
1891
1892
1893     <li class="md-nav__item">
1894       <a href="../../migration/wsc30/css/" class="md-nav__link">
1895         CSS
1896       </a>
1897     </li>
1898
1899
1900
1901
1902
1903
1904
1905     <li class="md-nav__item">
1906       <a href="../../migration/wsc30/package/" class="md-nav__link">
1907         Package Components
1908       </a>
1909     </li>
1910
1911
1912
1913         </ul>
1914       </nav>
1915     </li>
1916
1917
1918
1919
1920
1921
1922
1923
1924     <li class="md-nav__item md-nav__item--nested">
1925
1926
1927         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
1928
1929       <label class="md-nav__link" for="__nav_6_5">
1930         Migrating from WCF 2.1
1931         <span class="md-nav__icon md-icon"></span>
1932       </label>
1933       <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1934         <label class="md-nav__title" for="__nav_6_5">
1935           <span class="md-nav__icon md-icon"></span>
1936           Migrating from WCF 2.1
1937         </label>
1938         <ul class="md-nav__list" data-md-scrollfix>
1939
1940
1941
1942
1943
1944     <li class="md-nav__item">
1945       <a href="../../migration/wcf21/php/" class="md-nav__link">
1946         PHP API
1947       </a>
1948     </li>
1949
1950
1951
1952
1953
1954
1955
1956     <li class="md-nav__item">
1957       <a href="../../migration/wcf21/templates/" class="md-nav__link">
1958         Templates
1959       </a>
1960     </li>
1961
1962
1963
1964
1965
1966
1967
1968     <li class="md-nav__item">
1969       <a href="../../migration/wcf21/css/" class="md-nav__link">
1970         CSS
1971       </a>
1972     </li>
1973
1974
1975
1976
1977
1978
1979
1980     <li class="md-nav__item">
1981       <a href="../../migration/wcf21/package/" class="md-nav__link">
1982         Package Components
1983       </a>
1984     </li>
1985
1986
1987
1988         </ul>
1989       </nav>
1990     </li>
1991
1992
1993
1994         </ul>
1995       </nav>
1996     </li>
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008     <li class="md-nav__item md-nav__item--nested">
2009
2010
2011         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
2012
2013       <label class="md-nav__link" for="__nav_7">
2014         Tutorials
2015         <span class="md-nav__icon md-icon"></span>
2016       </label>
2017       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
2018         <label class="md-nav__title" for="__nav_7">
2019           <span class="md-nav__icon md-icon"></span>
2020           Tutorials
2021         </label>
2022         <ul class="md-nav__list" data-md-scrollfix>
2023
2024
2025
2026
2027
2028
2029     <li class="md-nav__item md-nav__item--nested">
2030
2031
2032         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
2033
2034       <label class="md-nav__link" for="__nav_7_1">
2035         Tutorial Series
2036         <span class="md-nav__icon md-icon"></span>
2037       </label>
2038       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
2039         <label class="md-nav__title" for="__nav_7_1">
2040           <span class="md-nav__icon md-icon"></span>
2041           Tutorial Series
2042         </label>
2043         <ul class="md-nav__list" data-md-scrollfix>
2044
2045
2046
2047
2048
2049     <li class="md-nav__item">
2050       <a href="../../tutorial/series/overview/" class="md-nav__link">
2051         Overview
2052       </a>
2053     </li>
2054
2055
2056
2057
2058
2059
2060
2061     <li class="md-nav__item">
2062       <a href="../../tutorial/series/part_1/" class="md-nav__link">
2063         Part 1
2064       </a>
2065     </li>
2066
2067
2068
2069
2070
2071
2072
2073     <li class="md-nav__item">
2074       <a href="../../tutorial/series/part_2/" class="md-nav__link">
2075         Part 2
2076       </a>
2077     </li>
2078
2079
2080
2081
2082
2083
2084
2085     <li class="md-nav__item">
2086       <a href="../../tutorial/series/part_3/" class="md-nav__link">
2087         Part 3
2088       </a>
2089     </li>
2090
2091
2092
2093
2094
2095
2096
2097     <li class="md-nav__item">
2098       <a href="../../tutorial/series/part_4/" class="md-nav__link">
2099         Part 4
2100       </a>
2101     </li>
2102
2103
2104
2105         </ul>
2106       </nav>
2107     </li>
2108
2109
2110
2111         </ul>
2112       </nav>
2113     </li>
2114
2115
2116
2117   </ul>
2118 </nav>
2119                   </div>
2120                 </div>
2121               </div>
2122
2123
2124
2125               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
2126                 <div class="md-sidebar__scrollwrap">
2127                   <div class="md-sidebar__inner">
2128
2129 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
2130
2131
2132
2133
2134
2135
2136     <label class="md-nav__title" for="__toc">
2137       <span class="md-nav__icon md-icon"></span>
2138       Table of contents
2139     </label>
2140     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
2141
2142         <li class="md-nav__item">
2143   <a href="#introduction" class="md-nav__link">
2144     Introduction
2145   </a>
2146
2147 </li>
2148
2149         <li class="md-nav__item">
2150   <a href="#elements" class="md-nav__link">
2151     Elements
2152   </a>
2153
2154     <nav class="md-nav" aria-label="Elements">
2155       <ul class="md-nav__list">
2156
2157           <li class="md-nav__item">
2158   <a href="#elcreatetagname-string-element" class="md-nav__link">
2159     elCreate(tagName: string): Element
2160   </a>
2161
2162 </li>
2163
2164           <li class="md-nav__item">
2165   <a href="#elremoveelement-element" class="md-nav__link">
2166     elRemove(element: Element)
2167   </a>
2168
2169 </li>
2170
2171           <li class="md-nav__item">
2172   <a href="#elshowelement-element" class="md-nav__link">
2173     elShow(element: Element)
2174   </a>
2175
2176 </li>
2177
2178           <li class="md-nav__item">
2179   <a href="#elhideelement-element" class="md-nav__link">
2180     elHide(element: Element)
2181   </a>
2182
2183 </li>
2184
2185           <li class="md-nav__item">
2186   <a href="#eltoggleelement-element" class="md-nav__link">
2187     elToggle(element: Element)
2188   </a>
2189
2190 </li>
2191
2192       </ul>
2193     </nav>
2194
2195 </li>
2196
2197         <li class="md-nav__item">
2198   <a href="#attributes" class="md-nav__link">
2199     Attributes
2200   </a>
2201
2202     <nav class="md-nav" aria-label="Attributes">
2203       <ul class="md-nav__list">
2204
2205           <li class="md-nav__item">
2206   <a href="#elattrelement-element-attribute-string-value-string-string" class="md-nav__link">
2207     elAttr(element: Element, attribute: string, value?: string): string
2208   </a>
2209
2210 </li>
2211
2212           <li class="md-nav__item">
2213   <a href="#elattrboolelement-element-attribute-string-boolean" class="md-nav__link">
2214     elAttrBool(element: Element, attribute: string): boolean
2215   </a>
2216
2217 </li>
2218
2219           <li class="md-nav__item">
2220   <a href="#eldataelement-element-attribute-string-value-string-string" class="md-nav__link">
2221     elData(element: Element, attribute: string, value?: string): string
2222   </a>
2223
2224 </li>
2225
2226           <li class="md-nav__item">
2227   <a href="#eldataboolelement-element-attribute-string-boolean" class="md-nav__link">
2228     elDataBool(element: Element, attribute: string): boolean
2229   </a>
2230
2231 </li>
2232
2233       </ul>
2234     </nav>
2235
2236 </li>
2237
2238         <li class="md-nav__item">
2239   <a href="#selecting-elements" class="md-nav__link">
2240     Selecting Elements
2241   </a>
2242
2243     <nav class="md-nav" aria-label="Selecting Elements">
2244       <ul class="md-nav__list">
2245
2246           <li class="md-nav__item">
2247   <a href="#elbyidid-string-element-null" class="md-nav__link">
2248     elById(id: string): Element | null
2249   </a>
2250
2251 </li>
2252
2253           <li class="md-nav__item">
2254   <a href="#elbyselselector-string-context-element-element-null" class="md-nav__link">
2255     elBySel(selector: string, context?: Element): Element | null
2256   </a>
2257
2258 </li>
2259
2260           <li class="md-nav__item">
2261   <a href="#elbyselallselector-string-context-element-callback-element-element-void-nodelist" class="md-nav__link">
2262     elBySelAll(selector: string, context?: Element, callback: (element: Element) =&gt; void): NodeList
2263   </a>
2264
2265     <nav class="md-nav" aria-label="elBySelAll(selector: string, context?: Element, callback: (element: Element) =&gt; void): NodeList">
2266       <ul class="md-nav__list">
2267
2268           <li class="md-nav__item">
2269   <a href="#callback-to-iterate-over-elements" class="md-nav__link">
2270     Callback to Iterate Over Elements
2271   </a>
2272
2273 </li>
2274
2275       </ul>
2276     </nav>
2277
2278 </li>
2279
2280           <li class="md-nav__item">
2281   <a href="#elclosestelement-element-selector-string-element-null" class="md-nav__link">
2282     elClosest(element: Element, selector: string): Element | null
2283   </a>
2284
2285     <nav class="md-nav" aria-label="elClosest(element: Element, selector: string): Element | null">
2286       <ul class="md-nav__list">
2287
2288           <li class="md-nav__item">
2289   <a href="#text-nodes" class="md-nav__link">
2290     Text Nodes
2291   </a>
2292
2293 </li>
2294
2295       </ul>
2296     </nav>
2297
2298 </li>
2299
2300           <li class="md-nav__item">
2301   <a href="#elbyclassclassname-string-context-element-nodelist" class="md-nav__link">
2302     elByClass(className: string, context?: Element): NodeList
2303   </a>
2304
2305 </li>
2306
2307           <li class="md-nav__item">
2308   <a href="#elbytagtagname-string-context-element-nodelist" class="md-nav__link">
2309     elByTag(tagName: string, context?: Element): NodeList
2310   </a>
2311
2312 </li>
2313
2314       </ul>
2315     </nav>
2316
2317 </li>
2318
2319         <li class="md-nav__item">
2320   <a href="#utility-functions" class="md-nav__link">
2321     Utility Functions
2322   </a>
2323
2324     <nav class="md-nav" aria-label="Utility Functions">
2325       <ul class="md-nav__list">
2326
2327           <li class="md-nav__item">
2328   <a href="#elinnererrorelement-element-errormessage-string-ishtml-boolean-element-null" class="md-nav__link">
2329     `elInnerError(element: Element, errorMessage?: string, isHtml?: boolean): Element | null``
2330   </a>
2331
2332 </li>
2333
2334       </ul>
2335     </nav>
2336
2337 </li>
2338
2339         <li class="md-nav__item">
2340   <a href="#string-extensions" class="md-nav__link">
2341     String Extensions
2342   </a>
2343
2344     <nav class="md-nav" aria-label="String Extensions">
2345       <ul class="md-nav__list">
2346
2347           <li class="md-nav__item">
2348   <a href="#hashcode-string" class="md-nav__link">
2349     hashCode(): string
2350   </a>
2351
2352 </li>
2353
2354       </ul>
2355     </nav>
2356
2357 </li>
2358
2359     </ul>
2360
2361 </nav>
2362                   </div>
2363                 </div>
2364               </div>
2365
2366
2367           <div class="md-content" data-md-component="content">
2368             <article class="md-content__inner md-typeset">
2369
2370
2371                   <a href="https://github.com/WoltLab/docs.woltlab.com/edit/5.4/docs/javascript/helper-functions.md" title="Edit this page" class="md-content__button md-icon">
2372                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>
2373                   </a>
2374
2375
2376                 <h1 id="javascript-helper-functions">JavaScript Helper Functions<a class="headerlink" href="#javascript-helper-functions" title="Permanent link">#</a></h1>
2377 <h2 id="introduction">Introduction<a class="headerlink" href="#introduction" title="Permanent link">#</a></h2>
2378 <p>Since version 3.0, WoltLab Suite ships with a set of global helper functions that are
2379 exposed on the <code>window</code>-object and thus are available regardless of the context.
2380 They are meant to reduce code repetition and to increase readability by moving
2381 potentially relevant parts to the front of an instruction.</p>
2382 <h2 id="elements">Elements<a class="headerlink" href="#elements" title="Permanent link">#</a></h2>
2383 <h3 id="elcreatetagname-string-element"><code>elCreate(tagName: string): Element</code><a class="headerlink" href="#elcreatetagname-string-element" title="Permanent link">#</a></h3>
2384 <p>Creates a new element with the provided tag name.</p>
2385 <div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nx">elCreate</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">);</span>
2386 <span class="c1">// equals</span>
2387 <span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">);</span>
2388 </code></pre></div>
2389 <h3 id="elremoveelement-element"><code>elRemove(element: Element)</code><a class="headerlink" href="#elremoveelement-element" title="Permanent link">#</a></h3>
2390 <p>Removes an element from its parent without returning it. This function will throw
2391 an error if the <code>element</code> doesn't have a parent node.</p>
2392 <div class="highlight"><pre><span></span><code><span class="nx">elRemove</span><span class="p">(</span><span class="nx">element</span><span class="p">);</span>
2393 <span class="c1">// equals</span>
2394 <span class="nx">element</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="nx">element</span><span class="p">);</span>
2395 </code></pre></div>
2396 <h3 id="elshowelement-element"><code>elShow(element: Element)</code><a class="headerlink" href="#elshowelement-element" title="Permanent link">#</a></h3>
2397 <p>Attempts to show an element by removing the <code>display</code> CSS-property, usually used
2398 in conjunction with the <code>elHide()</code> function.</p>
2399 <div class="highlight"><pre><span></span><code><span class="nx">elShow</span><span class="p">(</span><span class="nx">element</span><span class="p">);</span>
2400 <span class="c1">// equals</span>
2401 <span class="nx">element</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">removeProperty</span><span class="p">(</span><span class="s2">&quot;display&quot;</span><span class="p">);</span>
2402 </code></pre></div>
2403 <h3 id="elhideelement-element"><code>elHide(element: Element)</code><a class="headerlink" href="#elhideelement-element" title="Permanent link">#</a></h3>
2404 <p>Attempts to hide an element by setting the <code>display</code> CSS-property to <code>none</code>, this
2405 is intended to be used with <code>elShow()</code> that relies on this behavior.</p>
2406 <div class="highlight"><pre><span></span><code><span class="nx">elHide</span><span class="p">(</span><span class="nx">element</span><span class="p">);</span>
2407 <span class="c1">// equals</span>
2408 <span class="nx">element</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">setProperty</span><span class="p">(</span><span class="s2">&quot;display&quot;</span><span class="p">,</span> <span class="s2">&quot;none&quot;</span><span class="p">,</span> <span class="s2">&quot;&quot;</span><span class="p">);</span>
2409 </code></pre></div>
2410 <h3 id="eltoggleelement-element"><code>elToggle(element: Element)</code><a class="headerlink" href="#eltoggleelement-element" title="Permanent link">#</a></h3>
2411 <p>Attempts to toggle the visibility of an element by examining the value of the
2412 <code>display</code> CSS-property and calls either <code>elShow()</code> or <code>elHide()</code>.</p>
2413 <h2 id="attributes">Attributes<a class="headerlink" href="#attributes" title="Permanent link">#</a></h2>
2414 <h3 id="elattrelement-element-attribute-string-value-string-string"><code>elAttr(element: Element, attribute: string, value?: string): string</code><a class="headerlink" href="#elattrelement-element-attribute-string-value-string-string" title="Permanent link">#</a></h3>
2415 <p>Sets or reads an attribute value, value are implicitly casted into strings and
2416 reading non-existing attributes will always yield an empty string. If you want
2417 to test for attribute existence, you'll have to fall-back to the native
2418 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/hasAttribute"><code>Element.hasAttribute()</code></a>
2419 method.</p>
2420 <p>You should read and set native attributes directly, such as <code>img.src</code> rather
2421 than <code>img.getAttribute("src");</code>.</p>
2422 <div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">elAttr</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="s2">&quot;some-attribute&quot;</span><span class="p">);</span>
2423 <span class="c1">// equals</span>
2424 <span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">element</span><span class="p">.</span><span class="nx">getAttribute</span><span class="p">(</span><span class="s2">&quot;some-attribute&quot;</span><span class="p">);</span>
2425
2426 <span class="nx">elAttr</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="s2">&quot;some-attribute&quot;</span><span class="p">,</span> <span class="s2">&quot;some value&quot;</span><span class="p">);</span>
2427 <span class="c1">// equals</span>
2428 <span class="nx">element</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s2">&quot;some-attribute&quot;</span><span class="p">,</span> <span class="s2">&quot;some value&quot;</span><span class="p">);</span>
2429 </code></pre></div>
2430 <h3 id="elattrboolelement-element-attribute-string-boolean"><code>elAttrBool(element: Element, attribute: string): boolean</code><a class="headerlink" href="#elattrboolelement-element-attribute-string-boolean" title="Permanent link">#</a></h3>
2431 <p>Reads an attribute and converts it value into a boolean value, the strings <code>"1"</code>
2432 and <code>"true"</code> will evaluate to <code>true</code>. All other values, including a missing attribute,
2433 will return <code>false</code>.</p>
2434 <div class="highlight"><pre><span></span><code><span class="k">if</span> <span class="p">(</span><span class="nx">elAttrBool</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="s2">&quot;some-attribute&quot;</span><span class="p">))</span> <span class="p">{</span>
2435   <span class="c1">// attribute is true-ish</span>
2436 <span class="p">}</span>
2437 </code></pre></div>
2438 <h3 id="eldataelement-element-attribute-string-value-string-string"><code>elData(element: Element, attribute: string, value?: string): string</code><a class="headerlink" href="#eldataelement-element-attribute-string-value-string-string" title="Permanent link">#</a></h3>
2439 <p>Short-hand function to read or set HTML5 <code>data-*</code>-attributes, it essentially
2440 prepends the <code>data-</code> prefix before forwarding the call to <code>elAttr()</code>.</p>
2441 <div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">elData</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="s2">&quot;some-attribute&quot;</span><span class="p">);</span>
2442 <span class="c1">// equals</span>
2443 <span class="kd">var</span> <span class="nx">value</span> <span class="o">=</span> <span class="nx">elAttr</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="s2">&quot;data-some-attribute&quot;</span><span class="p">);</span>
2444
2445 <span class="nx">elData</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="s2">&quot;some-attribute&quot;</span><span class="p">,</span> <span class="s2">&quot;some value&quot;</span><span class="p">);</span>
2446 <span class="c1">// equals</span>
2447 <span class="nx">elAttr</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="s2">&quot;data-some-attribute&quot;</span><span class="p">,</span> <span class="s2">&quot;some value&quot;</span><span class="p">);</span>
2448 </code></pre></div>
2449 <h3 id="eldataboolelement-element-attribute-string-boolean"><code>elDataBool(element: Element, attribute: string): boolean</code><a class="headerlink" href="#eldataboolelement-element-attribute-string-boolean" title="Permanent link">#</a></h3>
2450 <p>Short-hand function to convert a HTML5 <code>data-*</code>-attribute into a boolean value. It
2451 prepends the <code>data-</code> prefix before forwarding the call to <code>elAttrBool()</code>.</p>
2452 <div class="highlight"><pre><span></span><code><span class="k">if</span> <span class="p">(</span><span class="nx">elDataBool</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="s2">&quot;some-attribute&quot;</span><span class="p">))</span> <span class="p">{</span>
2453   <span class="c1">// attribute is true-ish</span>
2454 <span class="p">}</span>
2455 <span class="c1">// equals</span>
2456 <span class="k">if</span> <span class="p">(</span><span class="nx">elAttrBool</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="s2">&quot;data-some-attribute&quot;</span><span class="p">))</span> <span class="p">{</span>
2457   <span class="c1">// attribute is true-ish</span>
2458 <span class="p">}</span>
2459 </code></pre></div>
2460 <h2 id="selecting-elements">Selecting Elements<a class="headerlink" href="#selecting-elements" title="Permanent link">#</a></h2>
2461 <div class="admonition warning">
2462 <p class="admonition-title">Unlike libraries like jQuery, these functions will return <code>null</code> if an element is not found. You are responsible to validate if the element exist and to branch accordingly, invoking methods on the return value without checking for <code>null</code> will yield an error.</p>
2463 </div>
2464 <h3 id="elbyidid-string-element-null"><code>elById(id: string): Element | null</code><a class="headerlink" href="#elbyidid-string-element-null" title="Permanent link">#</a></h3>
2465 <p>Selects an element by its <code>id</code>-attribute value.</p>
2466 <div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nx">elById</span><span class="p">(</span><span class="s2">&quot;my-awesome-element&quot;</span><span class="p">);</span>
2467 <span class="c1">// equals</span>
2468 <span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;my-awesome-element&quot;</span><span class="p">);</span>
2469 </code></pre></div>
2470 <h3 id="elbyselselector-string-context-element-element-null"><code>elBySel(selector: string, context?: Element): Element | null</code><a class="headerlink" href="#elbyselselector-string-context-element-element-null" title="Permanent link">#</a></h3>
2471 <div class="admonition danger">
2472 <p class="admonition-title">The underlying <code>querySelector()</code>-method works on the entire DOM hierarchy and can yield results outside of your context element! Please read and understand the MDN article on <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector#The_entire_hierarchy_counts"><code>Element.querySelector()</code></a> to learn more about this.</p>
2473 </div>
2474 <p>Select a single element based on a CSS selector, optionally limiting the results
2475 to be a direct or indirect children of the context element.</p>
2476 <div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nx">elBySel</span><span class="p">(</span><span class="s2">&quot;.some-element&quot;</span><span class="p">);</span>
2477 <span class="c1">// equals</span>
2478 <span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">&quot;.some-element&quot;</span><span class="p">);</span>
2479
2480 <span class="c1">// limiting the scope to a context element:</span>
2481 <span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nx">elBySel</span><span class="p">(</span><span class="s2">&quot;.some-element&quot;</span><span class="p">,</span> <span class="nx">context</span><span class="p">);</span>
2482 <span class="c1">// equals</span>
2483 <span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nx">context</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s2">&quot;.some-element&quot;</span><span class="p">);</span>
2484 </code></pre></div>
2485 <h3 id="elbyselallselector-string-context-element-callback-element-element-void-nodelist"><code>elBySelAll(selector: string, context?: Element, callback: (element: Element) =&gt; void): NodeList</code><a class="headerlink" href="#elbyselallselector-string-context-element-callback-element-element-void-nodelist" title="Permanent link">#</a></h3>
2486 <div class="admonition danger">
2487 <p class="admonition-title">The underlying <code>querySelector()</code>-method works on the entire DOM hierarchy and can yield results outside of your context element! Please read and understand the MDN article on <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector#The_entire_hierarchy_counts"><code>Element.querySelector()</code></a> to learn more about this.</p>
2488 </div>
2489 <p>Finds and returns a <code>NodeList</code> containing all elements that match the provided
2490 CSS selector. Although <code>NodeList</code> is an array-like structure, it is not possible
2491 to iterate over it using array functions, including <code>.forEach()</code> which is not
2492 available in Internet Explorer 11.</p>
2493 <div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">elements</span> <span class="o">=</span> <span class="nx">elBySelAll</span><span class="p">(</span><span class="s2">&quot;.some-element&quot;</span><span class="p">);</span>
2494 <span class="c1">// equals</span>
2495 <span class="kd">var</span> <span class="nx">elements</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s2">&quot;.some-element&quot;</span><span class="p">);</span>
2496
2497 <span class="c1">// limiting the scope to a context element:</span>
2498 <span class="kd">var</span> <span class="nx">elements</span> <span class="o">=</span> <span class="nx">elBySelAll</span><span class="p">(</span><span class="s2">&quot;.some-element&quot;</span><span class="p">,</span> <span class="nx">context</span><span class="p">);</span>
2499 <span class="c1">// equals</span>
2500 <span class="kd">var</span> <span class="nx">elements</span> <span class="o">=</span> <span class="nx">context</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s2">&quot;.some-element&quot;</span><span class="p">);</span>
2501 </code></pre></div>
2502 <h4 id="callback-to-iterate-over-elements">Callback to Iterate Over Elements<a class="headerlink" href="#callback-to-iterate-over-elements" title="Permanent link">#</a></h4>
2503 <p><code>elBySelAll()</code> supports an optional third parameter that expects a callback function
2504 that is invoked for every element in the list.</p>
2505 <div class="highlight"><pre><span></span><code><span class="c1">// set the 2nd parameter to `undefined` or `null` to query the whole document</span>
2506 <span class="nx">elBySelAll</span><span class="p">(</span><span class="s2">&quot;.some-element&quot;</span><span class="p">,</span> <span class="kc">undefined</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">element</span><span class="p">)</span> <span class="p">{</span>
2507   <span class="c1">// is called for each element</span>
2508 <span class="p">});</span>
2509
2510 <span class="c1">// limiting the scope to a context element:</span>
2511 <span class="nx">elBySelAll</span><span class="p">(</span><span class="s2">&quot;.some-element&quot;</span><span class="p">,</span> <span class="nx">context</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">element</span><span class="p">)</span> <span class="p">{</span>
2512   <span class="c1">// is called for each element</span>
2513 <span class="p">});</span>
2514 </code></pre></div>
2515 <h3 id="elclosestelement-element-selector-string-element-null"><code>elClosest(element: Element, selector: string): Element | null</code><a class="headerlink" href="#elclosestelement-element-selector-string-element-null" title="Permanent link">#</a></h3>
2516 <p>Returns the first <code>Element</code> that matches the provided CSS selector, this will
2517 return the provided element itself if it matches the selector.</p>
2518 <div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nx">elClosest</span><span class="p">(</span><span class="nx">context</span><span class="p">,</span> <span class="s2">&quot;.some-element&quot;</span><span class="p">);</span>
2519 <span class="c1">// equals</span>
2520 <span class="kd">var</span> <span class="nx">element</span> <span class="o">=</span> <span class="nx">context</span><span class="p">.</span><span class="nx">closest</span><span class="p">(</span><span class="s2">&quot;.some-element&quot;</span><span class="p">);</span>
2521 </code></pre></div>
2522 <h4 id="text-nodes">Text Nodes<a class="headerlink" href="#text-nodes" title="Permanent link">#</a></h4>
2523 <p>If the provided context is a <code>Text</code>-node, the function will move the context to
2524 the parent element before applying the CSS selector. If the <code>Text</code> has no parent,
2525 <code>null</code> is returned without evaluating the selector.</p>
2526 <h3 id="elbyclassclassname-string-context-element-nodelist"><code>elByClass(className: string, context?: Element): NodeList</code><a class="headerlink" href="#elbyclassclassname-string-context-element-nodelist" title="Permanent link">#</a></h3>
2527 <p>Returns a live <code>NodeList</code> containing all elements that match the provided CSS
2528 class now <em>and</em> in the future! The collection is automatically updated whenever
2529 an element with that class is added or removed from the DOM, it will also include
2530 elements that get dynamically assigned or removed this CSS class.</p>
2531 <p>You absolutely need to understand that this collection is dynamic, that means that
2532 elements can and will be added and removed from the collection <em>even while</em> you
2533 iterate over it. There are only very few cases where you would need such a collection,
2534 almost always <code>elBySelAll()</code> is what you're looking for.</p>
2535 <div class="highlight"><pre><span></span><code><span class="c1">// no leading dot!</span>
2536 <span class="kd">var</span> <span class="nx">elements</span> <span class="o">=</span> <span class="nx">elByClass</span><span class="p">(</span><span class="s2">&quot;some-element&quot;</span><span class="p">);</span>
2537 <span class="c1">// equals</span>
2538 <span class="kd">var</span> <span class="nx">elements</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s2">&quot;some-element&quot;</span><span class="p">);</span>
2539
2540 <span class="c1">// limiting the scope to a context element:</span>
2541 <span class="kd">var</span> <span class="nx">elements</span> <span class="o">=</span> <span class="nx">elByClass</span><span class="p">(</span><span class="s2">&quot;some-element&quot;</span><span class="p">,</span> <span class="nx">context</span><span class="p">);</span>
2542 <span class="c1">// equals</span>
2543 <span class="kd">var</span> <span class="nx">elements</span> <span class="o">=</span> <span class="nx">context</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s2">&quot;.some-element&quot;</span><span class="p">);</span>
2544 </code></pre></div>
2545 <h3 id="elbytagtagname-string-context-element-nodelist"><code>elByTag(tagName: string, context?: Element): NodeList</code><a class="headerlink" href="#elbytagtagname-string-context-element-nodelist" title="Permanent link">#</a></h3>
2546 <p>Returns a live <code>NodeList</code> containing all elements with the provided tag name now
2547 <em>and</em> in the future! Please read the remarks on <code>elByClass()</code> above to understand
2548 the implications of this.</p>
2549 <div class="highlight"><pre><span></span><code><span class="kd">var</span> <span class="nx">elements</span> <span class="o">=</span> <span class="nx">elByTag</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">);</span>
2550 <span class="c1">// equals</span>
2551 <span class="kd">var</span> <span class="nx">elements</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">);</span>
2552
2553 <span class="c1">// limiting the scope to a context element:</span>
2554 <span class="kd">var</span> <span class="nx">elements</span> <span class="o">=</span> <span class="nx">elByTag</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">,</span> <span class="nx">context</span><span class="p">);</span>
2555 <span class="c1">// equals</span>
2556 <span class="kd">var</span> <span class="nx">elements</span> <span class="o">=</span> <span class="nx">context</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">);</span>
2557 </code></pre></div>
2558 <h2 id="utility-functions">Utility Functions<a class="headerlink" href="#utility-functions" title="Permanent link">#</a></h2>
2559 <h3 id="elinnererrorelement-element-errormessage-string-ishtml-boolean-element-null">`elInnerError(element: Element, errorMessage?: string, isHtml?: boolean): Element | null``<a class="headerlink" href="#elinnererrorelement-element-errormessage-string-ishtml-boolean-element-null" title="Permanent link">#</a></h3>
2560 <p>Unified function to display and remove inline error messages for input elements,
2561 please read the <a href="../../migration/wsc30/javascript/#helper-function-for-inline-error-messages">section in the migration docs</a>
2562 to learn more about this function.</p>
2563 <h2 id="string-extensions">String Extensions<a class="headerlink" href="#string-extensions" title="Permanent link">#</a></h2>
2564 <h3 id="hashcode-string"><code>hashCode(): string</code><a class="headerlink" href="#hashcode-string" title="Permanent link">#</a></h3>
2565 <p>Computes a numeric hash value of a string similar to Java's <code>String.hashCode()</code> method.</p>
2566 <div class="highlight"><pre><span></span><code><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Hello World&quot;</span><span class="p">.</span><span class="nx">hashCode</span><span class="p">());</span>
2567 <span class="c1">// outputs: -862545276</span>
2568 </code></pre></div>
2569
2570
2571
2572
2573 <hr>
2574 <div class="md-source-date">
2575   <small>
2576
2577       Last update: 2021-01-08
2578
2579   </small>
2580 </div>
2581
2582
2583
2584
2585
2586
2587
2588
2589             </article>
2590           </div>
2591         </div>
2592
2593       </main>
2594
2595
2596 <footer class="md-footer">
2597
2598     <nav class="md-footer__inner md-grid" aria-label="Footer">
2599
2600         <a href="../legacy-api/" class="md-footer__link md-footer__link--prev" rel="prev">
2601           <div class="md-footer__button md-icon">
2602             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12z"/></svg>
2603           </div>
2604           <div class="md-footer__title">
2605             <div class="md-ellipsis">
2606               <span class="md-footer__direction">
2607                 Previous
2608               </span>
2609               Legacy API
2610             </div>
2611           </div>
2612         </a>
2613
2614
2615         <a href="../code-snippets/" class="md-footer__link md-footer__link--next" rel="next">
2616           <div class="md-footer__title">
2617             <div class="md-ellipsis">
2618               <span class="md-footer__direction">
2619                 Next
2620               </span>
2621               Code Snippets
2622             </div>
2623           </div>
2624           <div class="md-footer__button md-icon">
2625             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11H4z"/></svg>
2626           </div>
2627         </a>
2628
2629     </nav>
2630
2631   <div class="md-footer-meta md-typeset">
2632     <div class="md-footer-meta__inner md-grid">
2633       <div class="md-footer-copyright">
2634
2635           <div class="md-footer-copyright__highlight">
2636             Copyright © 2020 WoltLab GmbH
2637           </div>
2638
2639         Made with
2640         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2641           Material for MkDocs
2642         </a>
2643
2644       </div>
2645       <div class="md-footer-copyright">
2646         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2647         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2648 </div>
2649     </div>
2650   </div>
2651 </footer>
2652
2653     </div>
2654     <div class="md-dialog" data-md-component="dialog">
2655       <div class="md-dialog__inner md-typeset"></div>
2656     </div>
2657     <script id="__config" type="application/json">{"base": "../..", "features": [], "translations": {"clipboard.copy": "Copy to clipboard", "clipboard.copied": "Copied to clipboard", "search.config.lang": "en", "search.config.pipeline": "trimmer, stopWordFilter", "search.config.separator": "[\\s\\-]+", "search.placeholder": "Search", "search.result.placeholder": "Type to start searching", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.term.missing": "Missing"}, "search": "../../assets/javascripts/workers/search.fe42c31b.min.js", "version": {"provider": "mike"}}</script>
2658
2659
2660       <script src="../../assets/javascripts/bundle.4ea5477f.min.js"></script>
2661
2662
2663   </body>
2664 </html>