latest/javascript/new-api_dom/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="shortcut icon" href="../../assets/default.favicon.ico">
  13       <meta name="generator" content="mkdocs-1.1.2, mkdocs-material-7.0.3">
  14
  15
  16
  17         <title>DOM - WoltLab Suite Documentation</title>
  18
  19
  20
  21       <link rel="stylesheet" href="../../assets/stylesheets/main.1655a90d.min.css">
  22
  23
  24         <link rel="stylesheet" href="../../assets/stylesheets/palette.7fa14f5b.min.css">
  25
  26
  27
  28           <meta name="theme-color" content="#009485">
  29
  30
  31
  32
  33
  34
  35
  36
  37       <link rel="stylesheet" href="../../stylesheets/extra.css">
  38
  39
  40
  41
  42
  43   </head>
  44
  45
  46
  47
  48
  49
  50
  51     <body dir="ltr" data-md-color-scheme="" data-md-color-primary="teal" data-md-color-accent="">
  52
  53
  54
  55     <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
  56     <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
  57     <label class="md-overlay" for="__drawer"></label>
  58     <div data-md-component="skip">
  59
  60
  61         <a href="#working-with-the-dom-javascript-api" class="md-skip">
  62           Skip to content
  63         </a>
  64
  65     </div>
  66     <div data-md-component="announce">
  67
  68         <aside class="md-announce">
  69           <div class="md-announce__inner md-grid md-typeset">
  70
  71     <a href="https://www.woltlab.com">Back to <strong>woltlab.com</strong></a>
  72
  73           </div>
  74         </aside>
  75
  76     </div>
  77
  78
  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">
  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               DOM
 101
 102           </span>
 103         </div>
 104       </div>
 105     </div>
 106     <div class="md-header__options">
 107
 108     </div>
 109
 110       <label class="md-header__button md-icon" for="__search">
 111         <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>
 112       </label>
 113
 114 <div class="md-search" data-md-component="search" role="dialog">
 115   <label class="md-search__overlay" for="__search"></label>
 116   <div class="md-search__inner" role="search">
 117     <form class="md-search__form" name="search">
 118       <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>
 119       <label class="md-search__icon md-icon" for="__search">
 120         <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>
 121         <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>
 122       </label>
 123       <button type="reset" class="md-search__icon md-icon" aria-label="Clear" tabindex="-1">
 124         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.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>
 125       </button>
 126     </form>
 127     <div class="md-search__output">
 128       <div class="md-search__scrollwrap" data-md-scrollfix>
 129         <div class="md-search-result" data-md-component="search-result">
 130           <div class="md-search-result__meta">
 131             Initializing search
 132           </div>
 133           <ol class="md-search-result__list"></ol>
 134         </div>
 135       </div>
 136     </div>
 137   </div>
 138 </div>
 139
 140
 141   </nav>
 142 </header>
 143
 144     <div class="md-container" data-md-component="container">
 145
 146
 147
 148
 149       <main class="md-main" data-md-component="main">
 150         <div class="md-main__inner md-grid">
 151
 152
 153
 154               <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
 155                 <div class="md-sidebar__scrollwrap">
 156                   <div class="md-sidebar__inner">
 157
 158
 159
 160
 161
 162 <nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
 163   <label class="md-nav__title" for="__drawer">
 164     <a href="../.." title="WoltLab Suite Documentation" class="md-nav__button md-logo" aria-label="WoltLab Suite Documentation">
 165
 166   <img src="../../assets/logo.png" alt="logo">
 167
 168     </a>
 169     WoltLab Suite Documentation
 170   </label>
 171
 172   <ul class="md-nav__list" data-md-scrollfix>
 173
 174
 175
 176
 177
 178
 179
 180
 181     <li class="md-nav__item">
 182       <a href="../../getting-started/" class="md-nav__link">
 183         Getting Started
 184       </a>
 185     </li>
 186
 187
 188
 189
 190
 191
 192
 193
 194
 195
 196
 197     <li class="md-nav__item md-nav__item--nested">
 198
 199
 200         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2" type="checkbox" id="__nav_2" >
 201
 202       <label class="md-nav__link" for="__nav_2">
 203         PHP API
 204         <span class="md-nav__icon md-icon"></span>
 205       </label>
 206       <nav class="md-nav" aria-label="PHP API" data-md-level="1">
 207         <label class="md-nav__title" for="__nav_2">
 208           <span class="md-nav__icon md-icon"></span>
 209           PHP API
 210         </label>
 211         <ul class="md-nav__list" data-md-scrollfix>
 212
 213
 214
 215
 216
 217     <li class="md-nav__item">
 218       <a href="../../php/pages/" class="md-nav__link">
 219         Pages
 220       </a>
 221     </li>
 222
 223
 224
 225
 226
 227
 228
 229     <li class="md-nav__item">
 230       <a href="../../php/database-objects/" class="md-nav__link">
 231         Database Objects
 232       </a>
 233     </li>
 234
 235
 236
 237
 238
 239
 240
 241     <li class="md-nav__item">
 242       <a href="../../php/database-access/" class="md-nav__link">
 243         Database Access
 244       </a>
 245     </li>
 246
 247
 248
 249
 250
 251
 252
 253     <li class="md-nav__item">
 254       <a href="../../php/exceptions/" class="md-nav__link">
 255         Exceptions
 256       </a>
 257     </li>
 258
 259
 260
 261
 262
 263
 264
 265
 266     <li class="md-nav__item md-nav__item--nested">
 267
 268
 269         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5" type="checkbox" id="__nav_2_5" >
 270
 271       <label class="md-nav__link" for="__nav_2_5">
 272         API
 273         <span class="md-nav__icon md-icon"></span>
 274       </label>
 275       <nav class="md-nav" aria-label="API" data-md-level="2">
 276         <label class="md-nav__title" for="__nav_2_5">
 277           <span class="md-nav__icon md-icon"></span>
 278           API
 279         </label>
 280         <ul class="md-nav__list" data-md-scrollfix>
 281
 282
 283
 284
 285
 286     <li class="md-nav__item">
 287       <a href="../../php/api/caches/" class="md-nav__link">
 288         Caches
 289       </a>
 290     </li>
 291
 292
 293
 294
 295
 296
 297
 298     <li class="md-nav__item">
 299       <a href="../../php/api/comments/" class="md-nav__link">
 300         Comments
 301       </a>
 302     </li>
 303
 304
 305
 306
 307
 308
 309
 310     <li class="md-nav__item">
 311       <a href="../../php/api/cronjobs/" class="md-nav__link">
 312         Cronjobs
 313       </a>
 314     </li>
 315
 316
 317
 318
 319
 320
 321
 322     <li class="md-nav__item">
 323       <a href="../../php/api/events/" class="md-nav__link">
 324         Events
 325       </a>
 326     </li>
 327
 328
 329
 330
 331
 332
 333
 334
 335     <li class="md-nav__item md-nav__item--nested">
 336
 337
 338         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_2_5_5" type="checkbox" id="__nav_2_5_5" >
 339
 340       <label class="md-nav__link" for="__nav_2_5_5">
 341         Form Builder
 342         <span class="md-nav__icon md-icon"></span>
 343       </label>
 344       <nav class="md-nav" aria-label="Form Builder" data-md-level="3">
 345         <label class="md-nav__title" for="__nav_2_5_5">
 346           <span class="md-nav__icon md-icon"></span>
 347           Form Builder
 348         </label>
 349         <ul class="md-nav__list" data-md-scrollfix>
 350
 351
 352
 353
 354
 355     <li class="md-nav__item">
 356       <a href="../../php/api/form_builder/overview/" class="md-nav__link">
 357         Overview
 358       </a>
 359     </li>
 360
 361
 362
 363
 364
 365
 366
 367     <li class="md-nav__item">
 368       <a href="../../php/api/form_builder/structure/" class="md-nav__link">
 369         Structure
 370       </a>
 371     </li>
 372
 373
 374
 375
 376
 377
 378
 379     <li class="md-nav__item">
 380       <a href="../../php/api/form_builder/form_fields/" class="md-nav__link">
 381         Fields
 382       </a>
 383     </li>
 384
 385
 386
 387
 388
 389
 390
 391     <li class="md-nav__item">
 392       <a href="../../php/api/form_builder/validation_data/" class="md-nav__link">
 393         Validation and Data
 394       </a>
 395     </li>
 396
 397
 398
 399
 400
 401
 402
 403     <li class="md-nav__item">
 404       <a href="../../php/api/form_builder/dependencies/" class="md-nav__link">
 405         Dependencies
 406       </a>
 407     </li>
 408
 409
 410
 411         </ul>
 412       </nav>
 413     </li>
 414
 415
 416
 417
 418
 419
 420
 421     <li class="md-nav__item">
 422       <a href="../../php/api/package_installation_plugins/" class="md-nav__link">
 423         Package Installation Plugins
 424       </a>
 425     </li>
 426
 427
 428
 429
 430
 431
 432
 433     <li class="md-nav__item">
 434       <a href="../../php/api/user_activity_points/" class="md-nav__link">
 435         User Activity Points
 436       </a>
 437     </li>
 438
 439
 440
 441
 442
 443
 444
 445     <li class="md-nav__item">
 446       <a href="../../php/api/user_notifications/" class="md-nav__link">
 447         User Notifications
 448       </a>
 449     </li>
 450
 451
 452
 453
 454
 455
 456
 457     <li class="md-nav__item">
 458       <a href="../../php/api/sitemaps/" class="md-nav__link">
 459         Sitemaps
 460       </a>
 461     </li>
 462
 463
 464
 465         </ul>
 466       </nav>
 467     </li>
 468
 469
 470
 471
 472
 473
 474
 475     <li class="md-nav__item">
 476       <a href="../../php/code-style/" class="md-nav__link">
 477         Code Style
 478       </a>
 479     </li>
 480
 481
 482
 483
 484
 485
 486
 487     <li class="md-nav__item">
 488       <a href="../../php/apps/" class="md-nav__link">
 489         Apps
 490       </a>
 491     </li>
 492
 493
 494
 495
 496
 497
 498
 499     <li class="md-nav__item">
 500       <a href="../../php/gdpr/" class="md-nav__link">
 501         GDPR
 502       </a>
 503     </li>
 504
 505
 506
 507         </ul>
 508       </nav>
 509     </li>
 510
 511
 512
 513
 514
 515
 516
 517
 518
 519
 520
 521     <li class="md-nav__item md-nav__item--nested">
 522
 523
 524         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_3" type="checkbox" id="__nav_3" >
 525
 526       <label class="md-nav__link" for="__nav_3">
 527         Languages, Templates & CSS
 528         <span class="md-nav__icon md-icon"></span>
 529       </label>
 530       <nav class="md-nav" aria-label="Languages, Templates & CSS" data-md-level="1">
 531         <label class="md-nav__title" for="__nav_3">
 532           <span class="md-nav__icon md-icon"></span>
 533           Languages, Templates & CSS
 534         </label>
 535         <ul class="md-nav__list" data-md-scrollfix>
 536
 537
 538
 539
 540
 541     <li class="md-nav__item">
 542       <a href="../../view/languages/" class="md-nav__link">
 543         Languages
 544       </a>
 545     </li>
 546
 547
 548
 549
 550
 551
 552
 553     <li class="md-nav__item">
 554       <a href="../../view/templates/" class="md-nav__link">
 555         Templates
 556       </a>
 557     </li>
 558
 559
 560
 561
 562
 563
 564
 565     <li class="md-nav__item">
 566       <a href="../../view/css/" class="md-nav__link">
 567         CSS
 568       </a>
 569     </li>
 570
 571
 572
 573         </ul>
 574       </nav>
 575     </li>
 576
 577
 578
 579
 580
 581
 582
 583
 584
 585
 586
 587
 588
 589     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 590
 591
 592         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4" type="checkbox" id="__nav_4" checked>
 593
 594       <label class="md-nav__link" for="__nav_4">
 595         JavaScript API
 596         <span class="md-nav__icon md-icon"></span>
 597       </label>
 598       <nav class="md-nav" aria-label="JavaScript API" data-md-level="1">
 599         <label class="md-nav__title" for="__nav_4">
 600           <span class="md-nav__icon md-icon"></span>
 601           JavaScript API
 602         </label>
 603         <ul class="md-nav__list" data-md-scrollfix>
 604
 605
 606
 607
 608
 609     <li class="md-nav__item">
 610       <a href="../general-usage/" class="md-nav__link">
 611         General Usage
 612       </a>
 613     </li>
 614
 615
 616
 617
 618
 619
 620
 621
 622
 623
 624     <li class="md-nav__item md-nav__item--active md-nav__item--nested">
 625
 626
 627         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_4_2" type="checkbox" id="__nav_4_2" checked>
 628
 629       <label class="md-nav__link" for="__nav_4_2">
 630         New API
 631         <span class="md-nav__icon md-icon"></span>
 632       </label>
 633       <nav class="md-nav" aria-label="New API" data-md-level="2">
 634         <label class="md-nav__title" for="__nav_4_2">
 635           <span class="md-nav__icon md-icon"></span>
 636           New API
 637         </label>
 638         <ul class="md-nav__list" data-md-scrollfix>
 639
 640
 641
 642
 643
 644     <li class="md-nav__item">
 645       <a href="../new-api_writing-a-module/" class="md-nav__link">
 646         Writing a module
 647       </a>
 648     </li>
 649
 650
 651
 652
 653
 654
 655
 656     <li class="md-nav__item">
 657       <a href="../new-api_data-structures/" class="md-nav__link">
 658         Data Structures
 659       </a>
 660     </li>
 661
 662
 663
 664
 665
 666
 667
 668     <li class="md-nav__item">
 669       <a href="../new-api_core/" class="md-nav__link">
 670         Core Functions
 671       </a>
 672     </li>
 673
 674
 675
 676
 677
 678
 679
 680
 681
 682     <li class="md-nav__item md-nav__item--active">
 683
 684       <input class="md-nav__toggle md-toggle" data-md-toggle="toc" type="checkbox" id="__toc">
 685
 686
 687
 688
 689         <label class="md-nav__link md-nav__link--active" for="__toc">
 690           DOM
 691           <span class="md-nav__icon md-icon"></span>
 692         </label>
 693
 694       <a href="./" class="md-nav__link md-nav__link--active">
 695         DOM
 696       </a>
 697
 698
 699 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
 700
 701
 702
 703
 704
 705     <label class="md-nav__title" for="__toc">
 706       <span class="md-nav__icon md-icon"></span>
 707       Table of contents
 708     </label>
 709     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
 710
 711         <li class="md-nav__item">
 712   <a href="#helper-functions" class="md-nav__link">
 713     Helper Functions
 714   </a>
 715
 716 </li>
 717
 718         <li class="md-nav__item">
 719   <a href="#domutil" class="md-nav__link">
 720     Dom/Util
 721   </a>
 722
 723     <nav class="md-nav" aria-label="Dom/Util">
 724       <ul class="md-nav__list">
 725
 726           <li class="md-nav__item">
 727   <a href="#createfragmentfromhtmlhtml-string-documentfragment" class="md-nav__link">
 728     createFragmentFromHtml(html: string): DocumentFragment
 729   </a>
 730
 731 </li>
 732
 733           <li class="md-nav__item">
 734   <a href="#identifyelement-element-string" class="md-nav__link">
 735     identify(element: Element): string
 736   </a>
 737
 738 </li>
 739
 740           <li class="md-nav__item">
 741   <a href="#outerheightelement-element-styles-cssstyledeclaration-number" class="md-nav__link">
 742     outerHeight(element: Element, styles?: CSSStyleDeclaration): number
 743   </a>
 744
 745 </li>
 746
 747           <li class="md-nav__item">
 748   <a href="#outerwidthelement-element-styles-cssstyledeclaration-number" class="md-nav__link">
 749     outerWidth(element: Element, styles?: CSSStyleDeclaration): number
 750   </a>
 751
 752 </li>
 753
 754           <li class="md-nav__item">
 755   <a href="#outerdimensionselement-element-height-number-width-number" class="md-nav__link">
 756     outerDimensions(element: Element): { height: number, width: number }
 757   </a>
 758
 759 </li>
 760
 761           <li class="md-nav__item">
 762   <a href="#offsetelement-element-top-number-left-number" class="md-nav__link">
 763     offset(element: Element): { top: number, left: number }
 764   </a>
 765
 766 </li>
 767
 768           <li class="md-nav__item">
 769   <a href="#setinnerhtmlelement-element-innerhtml-string" class="md-nav__link">
 770     setInnerHtml(element: Element, innerHtml: string)
 771   </a>
 772
 773 </li>
 774
 775           <li class="md-nav__item">
 776   <a href="#containselement-element-child-element-boolean" class="md-nav__link">
 777     contains(element: Element, child: Element): boolean
 778   </a>
 779
 780 </li>
 781
 782           <li class="md-nav__item">
 783   <a href="#unwrapchildnodeselement-element" class="md-nav__link">
 784     unwrapChildNodes(element: Element)
 785   </a>
 786
 787 </li>
 788
 789       </ul>
 790     </nav>
 791
 792 </li>
 793
 794         <li class="md-nav__item">
 795   <a href="#domchangelistener" class="md-nav__link">
 796     Dom/ChangeListener
 797   </a>
 798
 799 </li>
 800
 801     </ul>
 802
 803 </nav>
 804
 805     </li>
 806
 807
 808
 809
 810
 811
 812
 813     <li class="md-nav__item">
 814       <a href="../new-api_events/" class="md-nav__link">
 815         Event Handling
 816       </a>
 817     </li>
 818
 819
 820
 821
 822
 823
 824
 825     <li class="md-nav__item">
 826       <a href="../new-api_ajax/" class="md-nav__link">
 827         Ajax
 828       </a>
 829     </li>
 830
 831
 832
 833
 834
 835
 836
 837     <li class="md-nav__item">
 838       <a href="../new-api_dialogs/" class="md-nav__link">
 839         Dialogs
 840       </a>
 841     </li>
 842
 843
 844
 845
 846
 847
 848
 849     <li class="md-nav__item">
 850       <a href="../new-api_browser/" class="md-nav__link">
 851         Browser and Screen Sizes
 852       </a>
 853     </li>
 854
 855
 856
 857
 858
 859
 860
 861     <li class="md-nav__item">
 862       <a href="../new-api_ui/" class="md-nav__link">
 863         User Interface
 864       </a>
 865     </li>
 866
 867
 868
 869         </ul>
 870       </nav>
 871     </li>
 872
 873
 874
 875
 876
 877
 878
 879     <li class="md-nav__item">
 880       <a href="../legacy-api/" class="md-nav__link">
 881         Legacy API
 882       </a>
 883     </li>
 884
 885
 886
 887
 888
 889
 890
 891     <li class="md-nav__item">
 892       <a href="../helper-functions/" class="md-nav__link">
 893         Helper Functions
 894       </a>
 895     </li>
 896
 897
 898
 899
 900
 901
 902
 903     <li class="md-nav__item">
 904       <a href="../code-snippets/" class="md-nav__link">
 905         Code Snippets
 906       </a>
 907     </li>
 908
 909
 910
 911         </ul>
 912       </nav>
 913     </li>
 914
 915
 916
 917
 918
 919
 920
 921
 922
 923
 924
 925     <li class="md-nav__item md-nav__item--nested">
 926
 927
 928         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5" type="checkbox" id="__nav_5" >
 929
 930       <label class="md-nav__link" for="__nav_5">
 931         Package Components
 932         <span class="md-nav__icon md-icon"></span>
 933       </label>
 934       <nav class="md-nav" aria-label="Package Components" data-md-level="1">
 935         <label class="md-nav__title" for="__nav_5">
 936           <span class="md-nav__icon md-icon"></span>
 937           Package Components
 938         </label>
 939         <ul class="md-nav__list" data-md-scrollfix>
 940
 941
 942
 943
 944
 945     <li class="md-nav__item">
 946       <a href="../../package/package-xml/" class="md-nav__link">
 947         package.xml
 948       </a>
 949     </li>
 950
 951
 952
 953
 954
 955
 956
 957
 958     <li class="md-nav__item md-nav__item--nested">
 959
 960
 961         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_5_2" type="checkbox" id="__nav_5_2" >
 962
 963       <label class="md-nav__link" for="__nav_5_2">
 964         PIPs
 965         <span class="md-nav__icon md-icon"></span>
 966       </label>
 967       <nav class="md-nav" aria-label="PIPs" data-md-level="2">
 968         <label class="md-nav__title" for="__nav_5_2">
 969           <span class="md-nav__icon md-icon"></span>
 970           PIPs
 971         </label>
 972         <ul class="md-nav__list" data-md-scrollfix>
 973
 974
 975
 976
 977
 978     <li class="md-nav__item">
 979       <a href="../../package/pip/" class="md-nav__link">
 980         Overview
 981       </a>
 982     </li>
 983
 984
 985
 986
 987
 988
 989
 990     <li class="md-nav__item">
 991       <a href="../../package/pip/acl-option/" class="md-nav__link">
 992         aclOption
 993       </a>
 994     </li>
 995
 996
 997
 998
 999
1000
1001
1002     <li class="md-nav__item">
1003       <a href="../../package/pip/acp-menu/" class="md-nav__link">
1004         acpMenu
1005       </a>
1006     </li>
1007
1008
1009
1010
1011
1012
1013
1014     <li class="md-nav__item">
1015       <a href="../../package/pip/acp-search-provider/" class="md-nav__link">
1016         acpSearchProvider
1017       </a>
1018     </li>
1019
1020
1021
1022
1023
1024
1025
1026     <li class="md-nav__item">
1027       <a href="../../package/pip/acp-template/" class="md-nav__link">
1028         acpTemplate
1029       </a>
1030     </li>
1031
1032
1033
1034
1035
1036
1037
1038     <li class="md-nav__item">
1039       <a href="../../package/pip/bbcode/" class="md-nav__link">
1040         bbcode
1041       </a>
1042     </li>
1043
1044
1045
1046
1047
1048
1049
1050     <li class="md-nav__item">
1051       <a href="../../package/pip/box/" class="md-nav__link">
1052         box
1053       </a>
1054     </li>
1055
1056
1057
1058
1059
1060
1061
1062     <li class="md-nav__item">
1063       <a href="../../package/pip/clipboard-action/" class="md-nav__link">
1064         clipboardAction
1065       </a>
1066     </li>
1067
1068
1069
1070
1071
1072
1073
1074     <li class="md-nav__item">
1075       <a href="../../package/pip/core-object/" class="md-nav__link">
1076         coreObject
1077       </a>
1078     </li>
1079
1080
1081
1082
1083
1084
1085
1086     <li class="md-nav__item">
1087       <a href="../../package/pip/cronjob/" class="md-nav__link">
1088         cronjob
1089       </a>
1090     </li>
1091
1092
1093
1094
1095
1096
1097
1098     <li class="md-nav__item">
1099       <a href="../../package/pip/event-listener/" class="md-nav__link">
1100         eventListener
1101       </a>
1102     </li>
1103
1104
1105
1106
1107
1108
1109
1110     <li class="md-nav__item">
1111       <a href="../../package/pip/file/" class="md-nav__link">
1112         file
1113       </a>
1114     </li>
1115
1116
1117
1118
1119
1120
1121
1122     <li class="md-nav__item">
1123       <a href="../../package/pip/language/" class="md-nav__link">
1124         language
1125       </a>
1126     </li>
1127
1128
1129
1130
1131
1132
1133
1134     <li class="md-nav__item">
1135       <a href="../../package/pip/media-provider/" class="md-nav__link">
1136         mediaProvider
1137       </a>
1138     </li>
1139
1140
1141
1142
1143
1144
1145
1146     <li class="md-nav__item">
1147       <a href="../../package/pip/menu/" class="md-nav__link">
1148         menu
1149       </a>
1150     </li>
1151
1152
1153
1154
1155
1156
1157
1158     <li class="md-nav__item">
1159       <a href="../../package/pip/menu-item/" class="md-nav__link">
1160         menuItem
1161       </a>
1162     </li>
1163
1164
1165
1166
1167
1168
1169
1170     <li class="md-nav__item">
1171       <a href="../../package/pip/object-type/" class="md-nav__link">
1172         objectType
1173       </a>
1174     </li>
1175
1176
1177
1178
1179
1180
1181
1182     <li class="md-nav__item">
1183       <a href="../../package/pip/object-type-definition/" class="md-nav__link">
1184         objectTypeDefinition
1185       </a>
1186     </li>
1187
1188
1189
1190
1191
1192
1193
1194     <li class="md-nav__item">
1195       <a href="../../package/pip/option/" class="md-nav__link">
1196         option
1197       </a>
1198     </li>
1199
1200
1201
1202
1203
1204
1205
1206     <li class="md-nav__item">
1207       <a href="../../package/pip/page/" class="md-nav__link">
1208         page
1209       </a>
1210     </li>
1211
1212
1213
1214
1215
1216
1217
1218     <li class="md-nav__item">
1219       <a href="../../package/pip/pip/" class="md-nav__link">
1220         pip
1221       </a>
1222     </li>
1223
1224
1225
1226
1227
1228
1229
1230     <li class="md-nav__item">
1231       <a href="../../package/pip/script/" class="md-nav__link">
1232         script
1233       </a>
1234     </li>
1235
1236
1237
1238
1239
1240
1241
1242     <li class="md-nav__item">
1243       <a href="../../package/pip/smiley/" class="md-nav__link">
1244         smiley
1245       </a>
1246     </li>
1247
1248
1249
1250
1251
1252
1253
1254     <li class="md-nav__item">
1255       <a href="../../package/pip/sql/" class="md-nav__link">
1256         sql
1257       </a>
1258     </li>
1259
1260
1261
1262
1263
1264
1265
1266     <li class="md-nav__item">
1267       <a href="../../package/pip/style/" class="md-nav__link">
1268         style
1269       </a>
1270     </li>
1271
1272
1273
1274
1275
1276
1277
1278     <li class="md-nav__item">
1279       <a href="../../package/pip/template/" class="md-nav__link">
1280         template
1281       </a>
1282     </li>
1283
1284
1285
1286
1287
1288
1289
1290     <li class="md-nav__item">
1291       <a href="../../package/pip/template-listener/" class="md-nav__link">
1292         templateListener
1293       </a>
1294     </li>
1295
1296
1297
1298
1299
1300
1301
1302     <li class="md-nav__item">
1303       <a href="../../package/pip/user-group-option/" class="md-nav__link">
1304         userGroupOption
1305       </a>
1306     </li>
1307
1308
1309
1310
1311
1312
1313
1314     <li class="md-nav__item">
1315       <a href="../../package/pip/user-menu/" class="md-nav__link">
1316         userMenu
1317       </a>
1318     </li>
1319
1320
1321
1322
1323
1324
1325
1326     <li class="md-nav__item">
1327       <a href="../../package/pip/user-notification-event/" class="md-nav__link">
1328         userNotificationEvent
1329       </a>
1330     </li>
1331
1332
1333
1334
1335
1336
1337
1338     <li class="md-nav__item">
1339       <a href="../../package/pip/user-option/" class="md-nav__link">
1340         userOption
1341       </a>
1342     </li>
1343
1344
1345
1346
1347
1348
1349
1350     <li class="md-nav__item">
1351       <a href="../../package/pip/user-profile-menu/" class="md-nav__link">
1352         userProfileMenu
1353       </a>
1354     </li>
1355
1356
1357
1358         </ul>
1359       </nav>
1360     </li>
1361
1362
1363
1364
1365
1366
1367
1368     <li class="md-nav__item">
1369       <a href="../../package/database-php-api/" class="md-nav__link">
1370         Database PHP API
1371       </a>
1372     </li>
1373
1374
1375
1376         </ul>
1377       </nav>
1378     </li>
1379
1380
1381
1382
1383
1384
1385
1386
1387
1388
1389
1390     <li class="md-nav__item md-nav__item--nested">
1391
1392
1393         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6" type="checkbox" id="__nav_6" >
1394
1395       <label class="md-nav__link" for="__nav_6">
1396         Migration
1397         <span class="md-nav__icon md-icon"></span>
1398       </label>
1399       <nav class="md-nav" aria-label="Migration" data-md-level="1">
1400         <label class="md-nav__title" for="__nav_6">
1401           <span class="md-nav__icon md-icon"></span>
1402           Migration
1403         </label>
1404         <ul class="md-nav__list" data-md-scrollfix>
1405
1406
1407
1408
1409
1410
1411     <li class="md-nav__item md-nav__item--nested">
1412
1413
1414         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_1" type="checkbox" id="__nav_6_1" >
1415
1416       <label class="md-nav__link" for="__nav_6_1">
1417         Migrating from WSC 5.3
1418         <span class="md-nav__icon md-icon"></span>
1419       </label>
1420       <nav class="md-nav" aria-label="Migrating from WSC 5.3" data-md-level="2">
1421         <label class="md-nav__title" for="__nav_6_1">
1422           <span class="md-nav__icon md-icon"></span>
1423           Migrating from WSC 5.3
1424         </label>
1425         <ul class="md-nav__list" data-md-scrollfix>
1426
1427
1428
1429
1430
1431     <li class="md-nav__item">
1432       <a href="../../migration/wsc53/php/" class="md-nav__link">
1433         PHP API
1434       </a>
1435     </li>
1436
1437
1438
1439
1440
1441
1442
1443     <li class="md-nav__item">
1444       <a href="../../migration/wsc53/session/" class="md-nav__link">
1445         Session Handling and Authentication
1446       </a>
1447     </li>
1448
1449
1450
1451
1452
1453
1454
1455     <li class="md-nav__item">
1456       <a href="../../migration/wsc53/javascript/" class="md-nav__link">
1457         JavaScript
1458       </a>
1459     </li>
1460
1461
1462
1463
1464
1465
1466
1467     <li class="md-nav__item">
1468       <a href="../../migration/wsc53/templates/" class="md-nav__link">
1469         Templates
1470       </a>
1471     </li>
1472
1473
1474
1475
1476
1477
1478
1479     <li class="md-nav__item">
1480       <a href="../../migration/wsc53/libraries/" class="md-nav__link">
1481         Third Party Libraries
1482       </a>
1483     </li>
1484
1485
1486
1487         </ul>
1488       </nav>
1489     </li>
1490
1491
1492
1493
1494
1495
1496
1497
1498     <li class="md-nav__item md-nav__item--nested">
1499
1500
1501         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_2" type="checkbox" id="__nav_6_2" >
1502
1503       <label class="md-nav__link" for="__nav_6_2">
1504         Migrating from WSC 5.2
1505         <span class="md-nav__icon md-icon"></span>
1506       </label>
1507       <nav class="md-nav" aria-label="Migrating from WSC 5.2" data-md-level="2">
1508         <label class="md-nav__title" for="__nav_6_2">
1509           <span class="md-nav__icon md-icon"></span>
1510           Migrating from WSC 5.2
1511         </label>
1512         <ul class="md-nav__list" data-md-scrollfix>
1513
1514
1515
1516
1517
1518     <li class="md-nav__item">
1519       <a href="../../migration/wsc52/php/" class="md-nav__link">
1520         PHP API
1521       </a>
1522     </li>
1523
1524
1525
1526
1527
1528
1529
1530     <li class="md-nav__item">
1531       <a href="../../migration/wsc52/templates/" class="md-nav__link">
1532         Templates and Languages
1533       </a>
1534     </li>
1535
1536
1537
1538
1539
1540
1541
1542     <li class="md-nav__item">
1543       <a href="../../migration/wsc52/libraries/" class="md-nav__link">
1544         Third Party Libraries
1545       </a>
1546     </li>
1547
1548
1549
1550         </ul>
1551       </nav>
1552     </li>
1553
1554
1555
1556
1557
1558
1559
1560
1561     <li class="md-nav__item md-nav__item--nested">
1562
1563
1564         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_3" type="checkbox" id="__nav_6_3" >
1565
1566       <label class="md-nav__link" for="__nav_6_3">
1567         Migrating from WSC 3.1
1568         <span class="md-nav__icon md-icon"></span>
1569       </label>
1570       <nav class="md-nav" aria-label="Migrating from WSC 3.1" data-md-level="2">
1571         <label class="md-nav__title" for="__nav_6_3">
1572           <span class="md-nav__icon md-icon"></span>
1573           Migrating from WSC 3.1
1574         </label>
1575         <ul class="md-nav__list" data-md-scrollfix>
1576
1577
1578
1579
1580
1581     <li class="md-nav__item">
1582       <a href="../../migration/wsc31/php/" class="md-nav__link">
1583         PHP API
1584       </a>
1585     </li>
1586
1587
1588
1589         </ul>
1590       </nav>
1591     </li>
1592
1593
1594
1595
1596
1597
1598
1599
1600     <li class="md-nav__item md-nav__item--nested">
1601
1602
1603         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_4" type="checkbox" id="__nav_6_4" >
1604
1605       <label class="md-nav__link" for="__nav_6_4">
1606         Migrating from WSC 3.0
1607         <span class="md-nav__icon md-icon"></span>
1608       </label>
1609       <nav class="md-nav" aria-label="Migrating from WSC 3.0" data-md-level="2">
1610         <label class="md-nav__title" for="__nav_6_4">
1611           <span class="md-nav__icon md-icon"></span>
1612           Migrating from WSC 3.0
1613         </label>
1614         <ul class="md-nav__list" data-md-scrollfix>
1615
1616
1617
1618
1619
1620     <li class="md-nav__item">
1621       <a href="../../migration/wsc30/php/" class="md-nav__link">
1622         PHP API
1623       </a>
1624     </li>
1625
1626
1627
1628
1629
1630
1631
1632     <li class="md-nav__item">
1633       <a href="../../migration/wsc30/javascript/" class="md-nav__link">
1634         JavaScript API
1635       </a>
1636     </li>
1637
1638
1639
1640
1641
1642
1643
1644     <li class="md-nav__item">
1645       <a href="../../migration/wsc30/templates/" class="md-nav__link">
1646         Templates
1647       </a>
1648     </li>
1649
1650
1651
1652
1653
1654
1655
1656     <li class="md-nav__item">
1657       <a href="../../migration/wsc30/css/" class="md-nav__link">
1658         CSS
1659       </a>
1660     </li>
1661
1662
1663
1664
1665
1666
1667
1668     <li class="md-nav__item">
1669       <a href="../../migration/wsc30/package/" class="md-nav__link">
1670         Package Components
1671       </a>
1672     </li>
1673
1674
1675
1676         </ul>
1677       </nav>
1678     </li>
1679
1680
1681
1682
1683
1684
1685
1686
1687     <li class="md-nav__item md-nav__item--nested">
1688
1689
1690         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_6_5" type="checkbox" id="__nav_6_5" >
1691
1692       <label class="md-nav__link" for="__nav_6_5">
1693         Migrating from WCF 2.1
1694         <span class="md-nav__icon md-icon"></span>
1695       </label>
1696       <nav class="md-nav" aria-label="Migrating from WCF 2.1" data-md-level="2">
1697         <label class="md-nav__title" for="__nav_6_5">
1698           <span class="md-nav__icon md-icon"></span>
1699           Migrating from WCF 2.1
1700         </label>
1701         <ul class="md-nav__list" data-md-scrollfix>
1702
1703
1704
1705
1706
1707     <li class="md-nav__item">
1708       <a href="../../migration/wcf21/php/" class="md-nav__link">
1709         PHP API
1710       </a>
1711     </li>
1712
1713
1714
1715
1716
1717
1718
1719     <li class="md-nav__item">
1720       <a href="../../migration/wcf21/templates/" class="md-nav__link">
1721         Templates
1722       </a>
1723     </li>
1724
1725
1726
1727
1728
1729
1730
1731     <li class="md-nav__item">
1732       <a href="../../migration/wcf21/css/" class="md-nav__link">
1733         CSS
1734       </a>
1735     </li>
1736
1737
1738
1739
1740
1741
1742
1743     <li class="md-nav__item">
1744       <a href="../../migration/wcf21/package/" class="md-nav__link">
1745         Package Components
1746       </a>
1747     </li>
1748
1749
1750
1751         </ul>
1752       </nav>
1753     </li>
1754
1755
1756
1757         </ul>
1758       </nav>
1759     </li>
1760
1761
1762
1763
1764
1765
1766
1767
1768
1769
1770
1771     <li class="md-nav__item md-nav__item--nested">
1772
1773
1774         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7" type="checkbox" id="__nav_7" >
1775
1776       <label class="md-nav__link" for="__nav_7">
1777         Tutorials
1778         <span class="md-nav__icon md-icon"></span>
1779       </label>
1780       <nav class="md-nav" aria-label="Tutorials" data-md-level="1">
1781         <label class="md-nav__title" for="__nav_7">
1782           <span class="md-nav__icon md-icon"></span>
1783           Tutorials
1784         </label>
1785         <ul class="md-nav__list" data-md-scrollfix>
1786
1787
1788
1789
1790
1791
1792     <li class="md-nav__item md-nav__item--nested">
1793
1794
1795         <input class="md-nav__toggle md-toggle" data-md-toggle="__nav_7_1" type="checkbox" id="__nav_7_1" >
1796
1797       <label class="md-nav__link" for="__nav_7_1">
1798         Tutorial Series
1799         <span class="md-nav__icon md-icon"></span>
1800       </label>
1801       <nav class="md-nav" aria-label="Tutorial Series" data-md-level="2">
1802         <label class="md-nav__title" for="__nav_7_1">
1803           <span class="md-nav__icon md-icon"></span>
1804           Tutorial Series
1805         </label>
1806         <ul class="md-nav__list" data-md-scrollfix>
1807
1808
1809
1810
1811
1812     <li class="md-nav__item">
1813       <a href="../../tutorial/series/overview/" class="md-nav__link">
1814         Overview
1815       </a>
1816     </li>
1817
1818
1819
1820
1821
1822
1823
1824     <li class="md-nav__item">
1825       <a href="../../tutorial/series/part_1/" class="md-nav__link">
1826         Part 1
1827       </a>
1828     </li>
1829
1830
1831
1832
1833
1834
1835
1836     <li class="md-nav__item">
1837       <a href="../../tutorial/series/part_2/" class="md-nav__link">
1838         Part 2
1839       </a>
1840     </li>
1841
1842
1843
1844
1845
1846
1847
1848     <li class="md-nav__item">
1849       <a href="../../tutorial/series/part_3/" class="md-nav__link">
1850         Part 3
1851       </a>
1852     </li>
1853
1854
1855
1856         </ul>
1857       </nav>
1858     </li>
1859
1860
1861
1862         </ul>
1863       </nav>
1864     </li>
1865
1866
1867
1868   </ul>
1869 </nav>
1870                   </div>
1871                 </div>
1872               </div>
1873
1874
1875
1876               <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
1877                 <div class="md-sidebar__scrollwrap">
1878                   <div class="md-sidebar__inner">
1879
1880 <nav class="md-nav md-nav--secondary" aria-label="Table of contents">
1881
1882
1883
1884
1885
1886     <label class="md-nav__title" for="__toc">
1887       <span class="md-nav__icon md-icon"></span>
1888       Table of contents
1889     </label>
1890     <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
1891
1892         <li class="md-nav__item">
1893   <a href="#helper-functions" class="md-nav__link">
1894     Helper Functions
1895   </a>
1896
1897 </li>
1898
1899         <li class="md-nav__item">
1900   <a href="#domutil" class="md-nav__link">
1901     Dom/Util
1902   </a>
1903
1904     <nav class="md-nav" aria-label="Dom/Util">
1905       <ul class="md-nav__list">
1906
1907           <li class="md-nav__item">
1908   <a href="#createfragmentfromhtmlhtml-string-documentfragment" class="md-nav__link">
1909     createFragmentFromHtml(html: string): DocumentFragment
1910   </a>
1911
1912 </li>
1913
1914           <li class="md-nav__item">
1915   <a href="#identifyelement-element-string" class="md-nav__link">
1916     identify(element: Element): string
1917   </a>
1918
1919 </li>
1920
1921           <li class="md-nav__item">
1922   <a href="#outerheightelement-element-styles-cssstyledeclaration-number" class="md-nav__link">
1923     outerHeight(element: Element, styles?: CSSStyleDeclaration): number
1924   </a>
1925
1926 </li>
1927
1928           <li class="md-nav__item">
1929   <a href="#outerwidthelement-element-styles-cssstyledeclaration-number" class="md-nav__link">
1930     outerWidth(element: Element, styles?: CSSStyleDeclaration): number
1931   </a>
1932
1933 </li>
1934
1935           <li class="md-nav__item">
1936   <a href="#outerdimensionselement-element-height-number-width-number" class="md-nav__link">
1937     outerDimensions(element: Element): { height: number, width: number }
1938   </a>
1939
1940 </li>
1941
1942           <li class="md-nav__item">
1943   <a href="#offsetelement-element-top-number-left-number" class="md-nav__link">
1944     offset(element: Element): { top: number, left: number }
1945   </a>
1946
1947 </li>
1948
1949           <li class="md-nav__item">
1950   <a href="#setinnerhtmlelement-element-innerhtml-string" class="md-nav__link">
1951     setInnerHtml(element: Element, innerHtml: string)
1952   </a>
1953
1954 </li>
1955
1956           <li class="md-nav__item">
1957   <a href="#containselement-element-child-element-boolean" class="md-nav__link">
1958     contains(element: Element, child: Element): boolean
1959   </a>
1960
1961 </li>
1962
1963           <li class="md-nav__item">
1964   <a href="#unwrapchildnodeselement-element" class="md-nav__link">
1965     unwrapChildNodes(element: Element)
1966   </a>
1967
1968 </li>
1969
1970       </ul>
1971     </nav>
1972
1973 </li>
1974
1975         <li class="md-nav__item">
1976   <a href="#domchangelistener" class="md-nav__link">
1977     Dom/ChangeListener
1978   </a>
1979
1980 </li>
1981
1982     </ul>
1983
1984 </nav>
1985                   </div>
1986                 </div>
1987               </div>
1988
1989
1990           <div class="md-content" data-md-component="content">
1991             <article class="md-content__inner md-typeset">
1992
1993
1994
1995                 <h1 id="working-with-the-dom-javascript-api">Working with the DOM - JavaScript API<a class="headerlink" href="#working-with-the-dom-javascript-api" title="Permanent link">#</a></h1>
1996 <h2 id="helper-functions">Helper Functions<a class="headerlink" href="#helper-functions" title="Permanent link">#</a></h2>
1997 <p>There is large set of <a href="../helper-functions/">helper functions</a> that assist
1998 you when working with the DOM tree and its elements. These functions are globally
1999 available and do not require explicit module imports.</p>
2000 <h2 id="domutil"><code>Dom/Util</code><a class="headerlink" href="#domutil" title="Permanent link">#</a></h2>
2001 <h3 id="createfragmentfromhtmlhtml-string-documentfragment"><code>createFragmentFromHtml(html: string): DocumentFragment</code><a class="headerlink" href="#createfragmentfromhtmlhtml-string-documentfragment" title="Permanent link">#</a></h3>
2002 <p>Parses a HTML string and creates a <code>DocumentFragment</code> object that holds the
2003 resulting nodes.</p>
2004 <h3 id="identifyelement-element-string"><code>identify(element: Element): string</code><a class="headerlink" href="#identifyelement-element-string" title="Permanent link">#</a></h3>
2005 <p>Retrieves the unique identifier (<code>id</code>) of an element. If it does not currently
2006 have an id assigned, a generic identifier is used instead.</p>
2007 <h3 id="outerheightelement-element-styles-cssstyledeclaration-number"><code>outerHeight(element: Element, styles?: CSSStyleDeclaration): number</code><a class="headerlink" href="#outerheightelement-element-styles-cssstyledeclaration-number" title="Permanent link">#</a></h3>
2008 <p>Computes the outer height of an element using the element's <code>offsetHeight</code> and
2009 the sum of the rounded down values for <code>margin-top</code> and <code>margin-bottom</code>.</p>
2010 <h3 id="outerwidthelement-element-styles-cssstyledeclaration-number"><code>outerWidth(element: Element, styles?: CSSStyleDeclaration): number</code><a class="headerlink" href="#outerwidthelement-element-styles-cssstyledeclaration-number" title="Permanent link">#</a></h3>
2011 <p>Computes the outer width of an element using the element's <code>offsetWidth</code> and
2012 the sum of the rounded down values for <code>margin-left</code> and <code>margin-right</code>.</p>
2013 <h3 id="outerdimensionselement-element-height-number-width-number"><code>outerDimensions(element: Element): { height: number, width: number }</code><a class="headerlink" href="#outerdimensionselement-element-height-number-width-number" title="Permanent link">#</a></h3>
2014 <p>Computes the outer dimensions of an element including its margins.</p>
2015 <h3 id="offsetelement-element-top-number-left-number"><code>offset(element: Element): { top: number, left: number }</code><a class="headerlink" href="#offsetelement-element-top-number-left-number" title="Permanent link">#</a></h3>
2016 <p>Computes the element's offset relative to the top left corner of the document.</p>
2017 <h3 id="setinnerhtmlelement-element-innerhtml-string"><code>setInnerHtml(element: Element, innerHtml: string)</code><a class="headerlink" href="#setinnerhtmlelement-element-innerhtml-string" title="Permanent link">#</a></h3>
2018 <p>Sets the inner HTML of an element via <code>element.innerHTML = innerHtml</code>. Browsers
2019 do not evaluate any embedded <code>&lt;script&gt;</code> tags, therefore this method extracts each
2020 of them, creates new <code>&lt;script&gt;</code> tags and inserts them in their original order of
2021 appearance.</p>
2022 <h3 id="containselement-element-child-element-boolean"><code>contains(element: Element, child: Element): boolean</code><a class="headerlink" href="#containselement-element-child-element-boolean" title="Permanent link">#</a></h3>
2023 <p>Evaluates if <code>element</code> is a direct or indirect parent element of <code>child</code>.</p>
2024 <h3 id="unwrapchildnodeselement-element"><code>unwrapChildNodes(element: Element)</code><a class="headerlink" href="#unwrapchildnodeselement-element" title="Permanent link">#</a></h3>
2025 <p>Moves all child nodes out of <code>element</code> while maintaining their order, then removes
2026 <code>element</code> from the document.</p>
2027 <h2 id="domchangelistener"><code>Dom/ChangeListener</code><a class="headerlink" href="#domchangelistener" title="Permanent link">#</a></h2>
2028 <p>This class is used to observe specific changes to the DOM, for example after an
2029 Ajax request has completed. For performance reasons this is a manually-invoked
2030 listener that does not rely on a <code>MutationObserver</code>.</p>
2031 <div class="highlight"><pre><span></span><code><span class="nx">require</span><span class="p">([</span><span class="s2">&quot;Dom/ChangeListener&quot;</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">DomChangeListener</span><span class="p">)</span> <span class="p">{</span>
2032   <span class="nx">DomChangeListener</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s2">&quot;App/Foo&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
2033     <span class="c1">// the DOM may have been altered significantly</span>
2034   <span class="p">});</span>
2035
2036   <span class="c1">// propagate changes to the DOM</span>
2037   <span class="nx">DomChangeListener</span><span class="p">.</span><span class="nx">trigger</span><span class="p">();</span>
2038 <span class="p">});</span>
2039 </code></pre></div>
2040
2041
2042
2043
2044
2045
2046
2047             </article>
2048           </div>
2049         </div>
2050       </main>
2051
2052
2053 <footer class="md-footer">
2054
2055     <nav class="md-footer__inner md-grid" aria-label="Footer">
2056
2057         <a href="../new-api_core/" class="md-footer__link md-footer__link--prev" rel="prev">
2058           <div class="md-footer__button md-icon">
2059             <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>
2060           </div>
2061           <div class="md-footer__title">
2062             <div class="md-ellipsis">
2063               <span class="md-footer__direction">
2064                 Previous
2065               </span>
2066               Core Functions
2067             </div>
2068           </div>
2069         </a>
2070
2071
2072         <a href="../new-api_events/" class="md-footer__link md-footer__link--next" rel="next">
2073           <div class="md-footer__title">
2074             <div class="md-ellipsis">
2075               <span class="md-footer__direction">
2076                 Next
2077               </span>
2078               Event Handling
2079             </div>
2080           </div>
2081           <div class="md-footer__button md-icon">
2082             <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>
2083           </div>
2084         </a>
2085
2086     </nav>
2087
2088   <div class="md-footer-meta md-typeset">
2089     <div class="md-footer-meta__inner md-grid">
2090       <div class="md-footer-copyright">
2091
2092           <div class="md-footer-copyright__highlight">
2093             Copyright © 2020 WoltLab GmbH
2094           </div>
2095
2096         Made with
2097         <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
2098           Material for MkDocs
2099         </a>
2100       </div>
2101       <div class="md-footer-copyright">
2102         <a href="https://www.woltlab.com/legal-notice/">Legal Notice</a>
2103         <a href="https://www.woltlab.com/privacy-policy/">Privacy Policy</a>
2104 </div>
2105     </div>
2106   </div>
2107 </footer>
2108
2109     </div>
2110     <div class="md-dialog" data-md-component="dialog">
2111       <div class="md-dialog__inner md-typeset"></div>
2112     </div>
2113     <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.fb4a9340.min.js", "version": {"provider": "mike"}}</script>
2114
2115
2116       <script src="../../assets/javascripts/bundle.ca5457b8.min.js"></script>
2117
2118
2119   </body>
2120 </html>