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