Use querySelector over alternative DOM methods (#31280)

As per
#30115 (comment),
prefer `querySelector` by enabling
[`unicorn/prefer-query-selector`](https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/prefer-query-selector.md)
and autofixing all except 10 issues.

According to
[this](https://old.reddit.com/r/learnjavascript/comments/i0f5o8/performance_of_getelementbyid_vs_queryselector/),
querySelector may be faster as well, so it's a win-win.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>

.eslintrc.yaml

@@ -798,7 +798,7 @@ rules:
   unicorn/prefer-object-has-own: [0]
   unicorn/prefer-optional-catch-binding: [2]
   unicorn/prefer-prototype-methods: [0]
-  unicorn/prefer-query-selector: [0]
+  unicorn/prefer-query-selector: [2]
   unicorn/prefer-reflect-apply: [0]
   unicorn/prefer-regexp-test: [2]
   unicorn/prefer-set-has: [0]

web_src/js/components/DashboardRepoList.vue

@@ -101,7 +101,7 @@ const sfc = {
   },
 
   mounted() {
-    const el = document.getElementById('dashboard-repo-list');
+    const el = document.querySelector('#dashboard-repo-list');
     this.changeReposFilter(this.reposFilter);
     $(el).find('.dropdown').dropdown();
     nextTick(() => {
@@ -330,7 +330,7 @@ const sfc = {
 };
 
 export function initDashboardRepoList() {
-  const el = document.getElementById('dashboard-repo-list');
+  const el = document.querySelector('#dashboard-repo-list');
   if (el) {
     createApp(sfc).mount(el);
   }

web_src/js/components/DiffCommitSelector.vue

@@ -5,7 +5,7 @@ import {GET} from '../modules/fetch.js';
 export default {
   components: {SvgIcon},
   data: () => {
-    const el = document.getElementById('diff-commit-select');
+    const el = document.querySelector('#diff-commit-select');
     return {
       menuVisible: false,
       isLoading: false,

web_src/js/components/DiffFileList.vue

@@ -7,10 +7,10 @@ export default {
     return {store: diffTreeStore()};
   },
   mounted() {
-    document.getElementById('show-file-list-btn').addEventListener('click', this.toggleFileList);
+    document.querySelector('#show-file-list-btn').addEventListener('click', this.toggleFileList);
   },
   unmounted() {
-    document.getElementById('show-file-list-btn').removeEventListener('click', this.toggleFileList);
+    document.querySelector('#show-file-list-btn').removeEventListener('click', this.toggleFileList);
   },
   methods: {
     toggleFileList() {

web_src/js/components/DiffFileTree.vue

@@ -112,7 +112,7 @@ export default {
     updateState(visible) {
       const btn = document.querySelector('.diff-toggle-file-tree-button');
       const [toShow, toHide] = btn.querySelectorAll('.icon');
-      const tree = document.getElementById('diff-file-tree');
+      const tree = document.querySelector('#diff-file-tree');
       const newTooltip = btn.getAttribute(visible ? 'data-hide-text' : 'data-show-text');
       btn.setAttribute('data-tooltip-content', newTooltip);
       toggleElem(tree, visible);

web_src/js/components/RepoActionView.vue

@@ -325,7 +325,7 @@ const sfc = {
 export default sfc;
 
 export function initRepositoryActionView() {
-  const el = document.getElementById('repo-action-view');
+  const el = document.querySelector('#repo-action-view');
   if (!el) return;
 
   // TODO: the parent element's full height doesn't work well now,

web_src/js/components/RepoActivityTopAuthors.vue

@@ -51,7 +51,7 @@ const sfc = {
 };
 
 export function initRepoActivityTopAuthorsChart() {
-  const el = document.getElementById('repo-activity-top-authors-chart');
+  const el = document.querySelector('#repo-activity-top-authors-chart');
   if (el) {
     createApp(sfc).mount(el);
   }

web_src/js/components/RepoBranchTagSelector.vue

@@ -85,7 +85,7 @@ const sfc = {
         this.isViewBranch = false;
         this.$refs.dropdownRefName.textContent = item.name;
         if (this.setAction) {
-          document.getElementById(this.branchForm)?.setAttribute('action', url);
+          document.querySelector(`#${this.branchForm}`)?.setAttribute('action', url);
         } else {
           $(`#${this.branchForm} input[name="refURL"]`).val(url);
         }

web_src/js/components/ScopedAccessTokenSelector.vue

@@ -43,25 +43,25 @@ const sfc = {
   },
 
   mounted() {
-    document.getElementById('scoped-access-submit').addEventListener('click', this.onClickSubmit);
+    document.querySelector('#scoped-access-submit').addEventListener('click', this.onClickSubmit);
   },
 
   unmounted() {
-    document.getElementById('scoped-access-submit').removeEventListener('click', this.onClickSubmit);
+    document.querySelector('#scoped-access-submit').removeEventListener('click', this.onClickSubmit);
   },
 
   methods: {
     onClickSubmit(e) {
       e.preventDefault();
 
-      const warningEl = document.getElementById('scoped-access-warning');
+      const warningEl = document.querySelector('#scoped-access-warning');
       // check that at least one scope has been selected
-      for (const el of document.getElementsByClassName('access-token-select')) {
+      for (const el of document.querySelectorAll('.access-token-select')) {
         if (el.value) {
           // Hide the error if it was visible from previous attempt.
           hideElem(warningEl);
           // Submit the form.
-          document.getElementById('scoped-access-form').submit();
+          document.querySelector('#scoped-access-form').submit();
           // Don't show the warning.
           return;
         }
@@ -78,7 +78,7 @@ export default sfc;
  * Initialize category toggle sections
  */
 export function initScopedAccessTokenCategories() {
-  for (const el of document.getElementsByClassName('scoped-access-token-mount')) {
+  for (const el of document.querySelectorAll('.scoped-access-token-mount')) {
     createApp({})
       .component('scoped-access-token-selector', sfc)
       .mount(el);

web_src/js/features/admin/common.js

@@ -6,7 +6,7 @@ import {POST} from '../../modules/fetch.js';
 const {appSubUrl} = window.config;
 
 function onSecurityProtocolChange() {
-  if (Number(document.getElementById('security_protocol')?.value) > 0) {
+  if (Number(document.querySelector('#security_protocol')?.value) > 0) {
     showElem('.has-tls');
   } else {
     hideElem('.has-tls');
@@ -21,34 +21,34 @@ export function initAdminCommon() {
 
   // New user
   if ($('.admin.new.user').length > 0 || $('.admin.edit.user').length > 0) {
-    document.getElementById('login_type')?.addEventListener('change', function () {
+    document.querySelector('#login_type')?.addEventListener('change', function () {
       if (this.value?.substring(0, 1) === '0') {
-        document.getElementById('user_name')?.removeAttribute('disabled');
-        document.getElementById('login_name')?.removeAttribute('required');
+        document.querySelector('#user_name')?.removeAttribute('disabled');
+        document.querySelector('#login_name')?.removeAttribute('required');
         hideElem('.non-local');
         showElem('.local');
-        document.getElementById('user_name')?.focus();
+        document.querySelector('#user_name')?.focus();
 
         if (this.getAttribute('data-password') === 'required') {
-          document.getElementById('password')?.setAttribute('required', 'required');
+          document.querySelector('#password')?.setAttribute('required', 'required');
         }
       } else {
         if (document.querySelector('.admin.edit.user')) {
-          document.getElementById('user_name')?.setAttribute('disabled', 'disabled');
+          document.querySelector('#user_name')?.setAttribute('disabled', 'disabled');
         }
-        document.getElementById('login_name')?.setAttribute('required', 'required');
+        document.querySelector('#login_name')?.setAttribute('required', 'required');
         showElem('.non-local');
         hideElem('.local');
-        document.getElementById('login_name')?.focus();
+        document.querySelector('#login_name')?.focus();
 
-        document.getElementById('password')?.removeAttribute('required');
+        document.querySelector('#password')?.removeAttribute('required');
       }
     });
   }
 
   function onUsePagedSearchChange() {
     const searchPageSizeElements = document.querySelectorAll('.search-page-size');
-    if (document.getElementById('use_paged_search').checked) {
+    if (document.querySelector('#use_paged_search').checked) {
       showElem('.search-page-size');
       for (const el of searchPageSizeElements) {
         el.querySelector('input')?.setAttribute('required', 'required');
@@ -67,7 +67,7 @@ export function initAdminCommon() {
       input.removeAttribute('required');
     }
 
-    const provider = document.getElementById('oauth2_provider').value;
+    const provider = document.querySelector('#oauth2_provider').value;
     switch (provider) {
       case 'openidConnect':
         document.querySelector('.open_id_connect_auto_discovery_url input').setAttribute('required', 'required');
@@ -91,19 +91,19 @@ export function initAdminCommon() {
   }
 
   function onOAuth2UseCustomURLChange(applyDefaultValues) {
-    const provider = document.getElementById('oauth2_provider').value;
+    const provider = document.querySelector('#oauth2_provider').value;
     hideElem('.oauth2_use_custom_url_field');
     for (const input of document.querySelectorAll('.oauth2_use_custom_url_field input[required]')) {
       input.removeAttribute('required');
     }
 
     const elProviderCustomUrlSettings = document.querySelector(`#${provider}_customURLSettings`);
-    if (elProviderCustomUrlSettings && document.getElementById('oauth2_use_custom_url').checked) {
+    if (elProviderCustomUrlSettings && document.querySelector('#oauth2_use_custom_url').checked) {
       for (const custom of ['token_url', 'auth_url', 'profile_url', 'email_url', 'tenant']) {
         if (applyDefaultValues) {
-          document.getElementById(`oauth2_${custom}`).value = document.getElementById(`${provider}_${custom}`).value;
+          document.querySelector(`#oauth2_${custom}`).value = document.querySelector(`#${provider}_${custom}`).value;
         }
-        const customInput = document.getElementById(`${provider}_${custom}`);
+        const customInput = document.querySelector(`#${provider}_${custom}`);
         if (customInput && customInput.getAttribute('data-available') === 'true') {
           for (const input of document.querySelectorAll(`.oauth2_${custom} input`)) {
             input.setAttribute('required', 'required');
@@ -115,12 +115,12 @@ export function initAdminCommon() {
   }
 
   function onEnableLdapGroupsChange() {
-    toggleElem(document.getElementById('ldap-group-options'), $('.js-ldap-group-toggle')[0].checked);
+    toggleElem(document.querySelector('#ldap-group-options'), $('.js-ldap-group-toggle')[0].checked);
   }
 
   // New authentication
   if (document.querySelector('.admin.new.authentication')) {
-    document.getElementById('auth_type')?.addEventListener('change', function () {
+    document.querySelector('#auth_type')?.addEventListener('change', function () {
       hideElem('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi');
 
       for (const input of document.querySelectorAll('.ldap input[required], .binddnrequired input[required], .dldap input[required], .smtp input[required], .pam input[required], .oauth2 input[required], .has-tls input[required], .sspi input[required]')) {
@@ -180,39 +180,39 @@ export function initAdminCommon() {
       }
     });
     $('#auth_type').trigger('change');
-    document.getElementById('security_protocol')?.addEventListener('change', onSecurityProtocolChange);
-    document.getElementById('use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
-    document.getElementById('oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
-    document.getElementById('oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true));
+    document.querySelector('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
+    document.querySelector('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
+    document.querySelector('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
+    document.querySelector('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true));
     $('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
   }
   // Edit authentication
   if (document.querySelector('.admin.edit.authentication')) {
-    const authType = document.getElementById('auth_type')?.value;
+    const authType = document.querySelector('#auth_type')?.value;
     if (authType === '2' || authType === '5') {
-      document.getElementById('security_protocol')?.addEventListener('change', onSecurityProtocolChange);
+      document.querySelector('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
       $('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
       onEnableLdapGroupsChange();
       if (authType === '2') {
-        document.getElementById('use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
+        document.querySelector('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
       }
     } else if (authType === '6') {
-      document.getElementById('oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
-      document.getElementById('oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(false));
+      document.querySelector('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
+      document.querySelector('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(false));
       onOAuth2Change(false);
     }
   }
 
   if (document.querySelector('.admin.authentication')) {
     $('#auth_name').on('input', function () {
       // appSubUrl is either empty or is a path that starts with `/` and doesn't have a trailing slash.
-      document.getElementById('oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent(this.value)}/callback`;
+      document.querySelector('#oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent(this.value)}/callback`;
     }).trigger('input');
   }
 
   // Notice
   if (document.querySelector('.admin.notice')) {
-    const detailModal = document.getElementById('detail-modal');
+    const detailModal = document.querySelector('#detail-modal');
 
     // Attach view detail modals
     $('.view-detail').on('click', function () {
@@ -244,7 +244,7 @@ export function initAdminCommon() {
           break;
       }
     });
-    document.getElementById('delete-selection')?.addEventListener('click', async function (e) {
+    document.querySelector('#delete-selection')?.addEventListener('click', async function (e) {
       e.preventDefault();
       this.classList.add('is-loading', 'disabled');
       const data = new FormData();

web_src/js/features/citation.js

@@ -27,9 +27,9 @@ export async function initCitationFileCopyContent() {
 
   if (!pageData.citationFileContent) return;
 
-  const citationCopyApa = document.getElementById('citation-copy-apa');
-  const citationCopyBibtex = document.getElementById('citation-copy-bibtex');
-  const inputContent = document.getElementById('citation-copy-content');
+  const citationCopyApa = document.querySelector('#citation-copy-apa');
+  const citationCopyBibtex = document.querySelector('#citation-copy-bibtex');
+  const inputContent = document.querySelector('#citation-copy-content');
 
   if ((!citationCopyApa && !citationCopyBibtex) || !inputContent) return;
 
@@ -41,7 +41,7 @@ export async function initCitationFileCopyContent() {
     citationCopyApa.classList.toggle('primary', !isBibtex);
   };
 
-  document.getElementById('cite-repo-button')?.addEventListener('click', async (e) => {
+  document.querySelector('#cite-repo-button')?.addEventListener('click', async (e) => {
     const dropdownBtn = e.target.closest('.ui.dropdown.button');
     dropdownBtn.classList.add('is-loading');
 

web_src/js/features/code-frequency.js

@@ -1,7 +1,7 @@
 import {createApp} from 'vue';
 
 export async function initRepoCodeFrequency() {
-  const el = document.getElementById('repo-code-frequency-chart');
+  const el = document.querySelector('#repo-code-frequency-chart');
   if (!el) return;
 
   const {default: RepoCodeFrequency} = await import(/* webpackChunkName: "code-frequency-graph" */'../components/RepoCodeFrequency.vue');

web_src/js/features/colorpicker.js

@@ -1,7 +1,7 @@
 import {createTippy} from '../modules/tippy.js';
 
 export async function initColorPickers() {
-  const els = document.getElementsByClassName('js-color-picker-input');
+  const els = document.querySelectorAll('.js-color-picker-input');
   if (!els.length) return;
 
   await Promise.all([

web_src/js/features/common-global.js

@@ -24,8 +24,8 @@ export function initGlobalFormDirtyLeaveConfirm() {
 }
 
 export function initHeadNavbarContentToggle() {
-  const navbar = document.getElementById('navbar');
-  const btn = document.getElementById('navbar-expand-toggle');
+  const navbar = document.querySelector('#navbar');
+  const btn = document.querySelector('#navbar-expand-toggle');
   if (!navbar || !btn) return;
 
   btn.addEventListener('click', () => {

web_src/js/features/common-issue-list.js

@@ -29,7 +29,7 @@ export function parseIssueListQuickGotoLink(repoLink, searchText) {
 }
 
 export function initCommonIssueListQuickGoto() {
-  const goto = document.getElementById('issue-list-quick-goto');
+  const goto = document.querySelector('#issue-list-quick-goto');
   if (!goto) return;
 
   const form = goto.closest('form');

web_src/js/features/comp/SearchUserBox.js

@@ -5,7 +5,7 @@ const {appSubUrl} = window.config;
 const looksLikeEmailAddressCheck = /^\S+@\S+$/;
 
 export function initCompSearchUserBox() {
-  const searchUserBox = document.getElementById('search-user-box');
+  const searchUserBox = document.querySelector('#search-user-box');
   if (!searchUserBox) return;
 
   const $searchUserBox = $(searchUserBox);

web_src/js/features/comp/WebHookEditor.js

@@ -23,18 +23,18 @@ export function initCompWebHookEditor() {
   }
 
   // some webhooks (like Gitea) allow to set the request method (GET/POST), and it would toggle the "Content Type" field
-  const httpMethodInput = document.getElementById('http_method');
+  const httpMethodInput = document.querySelector('#http_method');
   if (httpMethodInput) {
     const updateContentType = function () {
       const visible = httpMethodInput.value === 'POST';
-      toggleElem(document.getElementById('content_type').closest('.field'), visible);
+      toggleElem(document.querySelector('#content_type').closest('.field'), visible);
     };
     updateContentType();
     httpMethodInput.addEventListener('change', updateContentType);
   }
 
   // Test delivery
-  document.getElementById('test-delivery')?.addEventListener('click', async function () {
+  document.querySelector('#test-delivery')?.addEventListener('click', async function () {
     this.classList.add('is-loading', 'disabled');
     await POST(this.getAttribute('data-link'));
     setTimeout(() => {

web_src/js/features/contributors.js

@@ -1,7 +1,7 @@
 import {createApp} from 'vue';
 
 export async function initRepoContributors() {
-  const el = document.getElementById('repo-contributors-chart');
+  const el = document.querySelector('#repo-contributors-chart');
   if (!el) return;
 
   const {default: RepoContributors} = await import(/* webpackChunkName: "contributors-graph" */'../components/RepoContributors.vue');

web_src/js/features/copycontent.js

@@ -6,7 +6,7 @@ import {GET} from '../modules/fetch.js';
 const {i18n} = window.config;
 
 export function initCopyContent() {
-  const btn = document.getElementById('copy-content');
+  const btn = document.querySelector('#copy-content');
   if (!btn || btn.classList.contains('disabled')) return;
 
   btn.addEventListener('click', async () => {