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