[TASK] Use getElementById where feasible

It's safe to use getElementById() instead of querySelector() in case an element is fetched by its ID. Numbers for nerds: getElementById() is nearly 1.5x faster than querySelector(). To be fair, both functions are really fast with executing multiple million operations per second, thus nobody will notice a performance impact. See https://www.measurethat.net/Benchmarks/ShowResult/106740 Resolves: #91254 Related: #91183 Releases: master Change-Id: I2ed590d20c9af66ce818f012ac73ec45c5c9fa55 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/64384 Tested-by: TYPO3com <noreply@typo3.com> Tested-by: Benjamin Franzke <bfr@qbus.de> Tested-by: Daniel Goerz <daniel.goerz@posteo.de> Reviewed-by: Benjamin Franzke <bfr@qbus.de> Reviewed-by: Daniel Goerz <daniel.goerz@posteo.de>
TYPO3 · May 9, 2020 · 5adf2b7 · 5adf2b7
1 parent 65597ce
commit 5adf2b7
Show file tree

Hide file tree

Showing 24 changed files with 26 additions and 26 deletions.
diff --git a/Build/Sources/TypeScript/adminpanel/Resources/Public/TypeScript/AdminPanel.ts b/Build/Sources/TypeScript/adminpanel/Resources/Public/TypeScript/AdminPanel.ts
@@ -77,7 +77,7 @@ namespace TYPO3 {
     }
 
     renderBackdrop(): void {
-      const adminPanel = document.querySelector('#TSFE_ADMIN_PANEL_FORM');
+      const adminPanel = document.getElementById('TSFE_ADMIN_PANEL_FORM');
       const backdrop = document.createElement('div');
       const body = document.querySelector('body');
       body.classList.add(AdminPanelClasses.noScroll);

diff --git a/...Sources/TypeScript/backend/Resources/Public/TypeScript/FormEngine/Element/GroupElement.ts b/...Sources/TypeScript/backend/Resources/Public/TypeScript/FormEngine/Element/GroupElement.ts
@@ -22,7 +22,7 @@ class GroupElement extends AbstractSortableSelectItems {
     super();
 
     $((): void => {
-      this.element = <HTMLSelectElement>document.querySelector('#' + elementId);
+      this.element = <HTMLSelectElement>document.getElementById(elementId);
       this.registerEventHandler();
       this.registerSuggest();
     });

diff --git a/...ces/TypeScript/backend/Resources/Public/TypeScript/FormEngine/Element/InputLinkElement.ts b/...ces/TypeScript/backend/Resources/Public/TypeScript/FormEngine/Element/InputLinkElement.ts
@@ -29,7 +29,7 @@ class InputLinkElement {
 
   constructor(elementId: string) {
     $((): void => {
-      this.element = <HTMLSelectElement>document.querySelector('#' + elementId);
+      this.element = <HTMLSelectElement>document.getElementById(elementId);
       this.container = <HTMLElement>this.element.closest('.t3js-form-field-inputlink');
       this.toggleSelector = <HTMLButtonElement>this.container.querySelector(Selectors.toggleSelector);
       this.explanationField = <HTMLInputElement>this.container.querySelector(Selectors.explanationSelector);

diff --git a/...backend/Resources/Public/TypeScript/FormEngine/Element/SelectMultipleSideBySideElement.ts b/...backend/Resources/Public/TypeScript/FormEngine/Element/SelectMultipleSideBySideElement.ts
@@ -24,8 +24,8 @@ class SelectMultipleSideBySideElement extends AbstractSortableSelectItems {
     super();
 
     $((): void => {
-      this.selectedOptionsElement = <HTMLSelectElement>document.querySelector('#' + selectedOptionsElementId);
-      this.availableOptionsElement = <HTMLSelectElement>document.querySelector('#' + availableOptionsElementId);
+      this.selectedOptionsElement = <HTMLSelectElement>document.getElementById(selectedOptionsElementId);
+      this.availableOptionsElement = <HTMLSelectElement>document.getElementById(availableOptionsElementId);
       this.registerEventHandler();
     });
   }

diff --git a/...es/TypeScript/backend/Resources/Public/TypeScript/FormEngine/Element/SelectTreeElement.ts b/...es/TypeScript/backend/Resources/Public/TypeScript/FormEngine/Element/SelectTreeElement.ts
@@ -19,8 +19,8 @@ class SelectTreeElement {
   private readonly callback: Function = null;
 
   constructor(treeWrapperId: string, treeRecordFieldId: string, callback: Function) {
-    this.treeWrapper = <HTMLElement>document.querySelector('#' + treeWrapperId);
-    this.recordField = <HTMLInputElement>document.querySelector('#' + treeRecordFieldId);
+    this.treeWrapper = <HTMLElement>document.getElementById(treeWrapperId);
+    this.recordField = <HTMLInputElement>document.getElementById(treeRecordFieldId);
     this.callback = callback;
 
     this.initialize();

diff --git a/.../Sources/TypeScript/backend/Resources/Public/TypeScript/FormEngine/Element/TextElement.ts b/.../Sources/TypeScript/backend/Resources/Public/TypeScript/FormEngine/Element/TextElement.ts
@@ -20,7 +20,7 @@ class TextElement {
 
   constructor(elementId: string) {
     $((): void => {
-      this.element = <HTMLTextAreaElement>document.querySelector('#' + elementId);
+      this.element = <HTMLTextAreaElement>document.getElementById(elementId);
 
       Resizable.enable(this.element);
       Tabbable.enable(this.element);

diff --git a/...ces/TypeScript/backend/Resources/Public/TypeScript/FormEngine/Element/TextTableElement.ts b/...ces/TypeScript/backend/Resources/Public/TypeScript/FormEngine/Element/TextTableElement.ts
@@ -20,7 +20,7 @@ class TextTableElement {
 
   constructor(elementId: string) {
     $((): void => {
-      this.element = <HTMLTextAreaElement>document.querySelector('#' + elementId);
+      this.element = <HTMLTextAreaElement>document.getElementById(elementId);
 
       Resizable.enable(this.element);
       Tabbable.enable(this.element);

diff --git a/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Notification.ts b/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Notification.ts
@@ -131,7 +131,7 @@ class Notification {
           : duration
       );
 
-    if (this.messageContainer === null || document.querySelector('#alert-container') === null) {
+    if (this.messageContainer === null || document.getElementById('alert-container') === null) {
       this.messageContainer = $('<div>', {'id': 'alert-container'}).appendTo('body');
     }
 

diff --git a/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ToggleSearchToolbox.ts b/Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ToggleSearchToolbox.ts
@@ -38,7 +38,7 @@ class ToggleSearchToolbox {
     });
 
     let searchField: HTMLInputElement;
-    if ((searchField = document.querySelector('#search_field')) !== null) {
+    if ((searchField = document.getElementById('search_field') as HTMLInputElement) !== null) {
       const searchResultShown = ('' !== searchField.value);
 
       // make search field clearable

diff --git a/Build/Sources/TypeScript/backend/Tests/NotificationTest.ts b/Build/Sources/TypeScript/backend/Tests/NotificationTest.ts
@@ -21,7 +21,7 @@ describe('TYPO3/CMS/Backend/Notification:', () => {
     $.fx.off = true;
     jasmine.clock().install();
 
-    const alertContainer = document.querySelector('#alert-container');
+    const alertContainer = document.getElementById('alert-container');
     while (alertContainer !== null && alertContainer.firstChild) {
       alertContainer.removeChild(alertContainer.firstChild);
     }

diff --git a/Build/Sources/TypeScript/beuser/Resources/Public/TypeScript/BackendUserListing.ts b/Build/Sources/TypeScript/beuser/Resources/Public/TypeScript/BackendUserListing.ts
@@ -21,7 +21,7 @@ import 'TYPO3/CMS/Backend/Input/Clearable';
 class BackendUserListing {
   constructor() {
     let searchField: HTMLInputElement;
-    if ((searchField = document.querySelector('#tx_Beuser_username')) !== null) {
+    if ((searchField = document.getElementById('tx_Beuser_username') as HTMLInputElement) !== null) {
       const searchResultShown = ('' !== searchField.value);
 
       // make search field clearable

diff --git a/Build/Sources/TypeScript/dashboard/Resources/Public/TypeScript/DashboardModal.ts b/Build/Sources/TypeScript/dashboard/Resources/Public/TypeScript/DashboardModal.ts
@@ -32,7 +32,7 @@ class DashboardModal {
         title: this.dataset.modalTitle,
         size: Modal.sizes.medium,
         severity: SeverityEnum.notice,
-        content: $(document.querySelector(`#dashboardModal-${this.dataset.modalIdentifier}`).innerHTML),
+        content: $(document.getElementById(`dashboardModal-${this.dataset.modalIdentifier}`).innerHTML),
         additionalCssClasses: ['dashboard-modal'],
         callback: (currentModal: any): void => {
           currentModal.on('submit', '.dashboardModal-form', (e: JQueryEventObject): void => {