Use `querySelector` over alternative DOM methods (#31280)

As per
https://github.com/go-gitea/gitea/pull/30115#discussion_r1626060164,
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>

46 files changed, 164 insertions, 167 deletions

diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 3f9f427cd7..23984b3164 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/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);
   }
diff --git a/web_src/js/components/DiffCommitSelector.vue b/web_src/js/components/DiffCommitSelector.vue
index 352d085731..c28be67e38 100644
--- a/web_src/js/components/DiffCommitSelector.vue
+++ b/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,
diff --git a/web_src/js/components/DiffFileList.vue b/web_src/js/components/DiffFileList.vue
index 916780d913..806c8385bb 100644
--- a/web_src/js/components/DiffFileList.vue
+++ b/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() {
diff --git a/web_src/js/components/DiffFileTree.vue b/web_src/js/components/DiffFileTree.vue
index cddfee1e04..fd5120f18b 100644
--- a/web_src/js/components/DiffFileTree.vue
+++ b/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);
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 8b39d0504b..7f6524c7e3 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/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,
diff --git a/web_src/js/components/RepoActivityTopAuthors.vue b/web_src/js/components/RepoActivityTopAuthors.vue
index a41fb61d78..295641f7e5 100644
--- a/web_src/js/components/RepoActivityTopAuthors.vue
+++ b/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);
   }
diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue
index 87530225e3..d18378bea1 100644
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/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);
         }
diff --git a/web_src/js/components/ScopedAccessTokenSelector.vue b/web_src/js/components/ScopedAccessTokenSelector.vue
index 103cc525ad..9ff3627c11 100644
--- a/web_src/js/components/ScopedAccessTokenSelector.vue
+++ b/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);
diff --git a/web_src/js/features/admin/common.js b/web_src/js/features/admin/common.js
index 3c90b546b8..429d6a808c 100644
--- a/web_src/js/features/admin/common.js
+++ b/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,25 +180,25 @@ 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);
     }
   }
@@ -206,13 +206,13 @@ export function initAdminCommon() {
   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();
diff --git a/web_src/js/features/citation.js b/web_src/js/features/citation.js
index 918a467136..245ba56f81 100644
--- a/web_src/js/features/citation.js
+++ b/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');
 
diff --git a/web_src/js/features/code-frequency.js b/web_src/js/features/code-frequency.js
index 47e1539ddc..da7cd6b2c0 100644
--- a/web_src/js/features/code-frequency.js
+++ b/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');
diff --git a/web_src/js/features/colorpicker.js b/web_src/js/features/colorpicker.js
index 6d00d908c9..a85c04de41 100644
--- a/web_src/js/features/colorpicker.js
+++ b/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([
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index 5162c71509..1ab2a55699 100644
--- a/web_src/js/features/common-global.js
+++ b/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', () => {
diff --git a/web_src/js/features/common-issue-list.js b/web_src/js/features/common-issue-list.js
index 219a8a9c9a..707776487b 100644
--- a/web_src/js/features/common-issue-list.js
+++ b/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');
diff --git a/web_src/js/features/comp/SearchUserBox.js b/web_src/js/features/comp/SearchUserBox.js
index 081c47425f..7ef23fe4b0 100644
--- a/web_src/js/features/comp/SearchUserBox.js
+++ b/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);
diff --git a/web_src/js/features/comp/WebHookEditor.js b/web_src/js/features/comp/WebHookEditor.js
index d74b59fd2a..38ff75e5a3 100644
--- a/web_src/js/features/comp/WebHookEditor.js
+++ b/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(() => {
diff --git a/web_src/js/features/contributors.js b/web_src/js/features/contributors.js
index 79b3389fee..475c66e900 100644
--- a/web_src/js/features/contributors.js
+++ b/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');
diff --git a/web_src/js/features/copycontent.js b/web_src/js/features/copycontent.js
index 03efe00701..ea1e5cf7d0 100644
--- a/web_src/js/features/copycontent.js
+++ b/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 () => {
diff --git a/web_src/js/features/heatmap.js b/web_src/js/features/heatmap.js
index 719eeb75fb..9155e844a2 100644
--- a/web_src/js/features/heatmap.js
+++ b/web_src/js/features/heatmap.js
@@ -3,7 +3,7 @@ import ActivityHeatmap from '../components/ActivityHeatmap.vue';
 import {translateMonth, translateDay} from '../utils.js';
 
 export function initHeatmap() {
-  const el = document.getElementById('user-heatmap');
+  const el = document.querySelector('#user-heatmap');
   if (!el) return;
 
   try {
diff --git a/web_src/js/features/install.js b/web_src/js/features/install.js
index 54ba3778f8..6354db6cdc 100644
--- a/web_src/js/features/install.js
+++ b/web_src/js/features/install.js
@@ -22,12 +22,12 @@ function initPreInstall() {
     mssql: '127.0.0.1:1433',
   };
 
-  const dbHost = document.getElementById('db_host');
-  const dbUser = document.getElementById('db_user');
-  const dbName = document.getElementById('db_name');
+  const dbHost = document.querySelector('#db_host');
+  const dbUser = document.querySelector('#db_user');
+  const dbName = document.querySelector('#db_name');
 
   // Database type change detection.
-  document.getElementById('db_type').addEventListener('change', function () {
+  document.querySelector('#db_type').addEventListener('change', function () {
     const dbType = this.value;
     hideElem('div[data-db-setting-for]');
     showElem(`div[data-db-setting-for=${dbType}]`);
@@ -46,14 +46,14 @@ function initPreInstall() {
       }
     } // else: for SQLite3, the default path is always prepared by backend code (setting)
   });
-  document.getElementById('db_type').dispatchEvent(new Event('change'));
+  document.querySelector('#db_type').dispatchEvent(new Event('change'));
 
-  const appUrl = document.getElementById('app_url');
+  const appUrl = document.querySelector('#app_url');
   if (appUrl.value.includes('://localhost')) {
     appUrl.value = window.location.href;
   }
 
-  const domain = document.getElementById('domain');
+  const domain = document.querySelector('#domain');
   if (domain.value.trim() === 'localhost') {
     domain.value = window.location.hostname;
   }
@@ -103,7 +103,7 @@ function initPreInstall() {
 }
 
 function initPostInstall() {
-  const el = document.getElementById('goto-user-login');
+  const el = document.querySelector('#goto-user-login');
   if (!el) return;
 
   const targetUrl = el.getAttribute('href');
diff --git a/web_src/js/features/notification.js b/web_src/js/features/notification.js
index f045879dec..c22fc17306 100644
--- a/web_src/js/features/notification.js
+++ b/web_src/js/features/notification.js
@@ -7,13 +7,13 @@ const {appSubUrl, notificationSettings, assetVersionEncoded} = window.config;
 let notificationSequenceNumber = 0;
 
 export function initNotificationsTable() {
-  const table = document.getElementById('notification_table');
+  const table = document.querySelector('#notification_table');
   if (!table) return;
 
   // when page restores from bfcache, delete previously clicked items
   window.addEventListener('pageshow', (e) => {
     if (e.persisted) { // page was restored from bfcache
-      const table = document.getElementById('notification_table');
+      const table = document.querySelector('#notification_table');
       const unreadCountEl = document.querySelector('.notifications-unread-count');
       let unreadCount = parseInt(unreadCountEl.textContent);
       for (const item of table.querySelectorAll('.notifications-item[data-remove="true"]')) {
@@ -145,7 +145,7 @@ async function updateNotificationCountWithCallback(callback, timeout, lastCount)
 }
 
 async function updateNotificationTable() {
-  const notificationDiv = document.getElementById('notification_div');
+  const notificationDiv = document.querySelector('#notification_div');
   if (notificationDiv) {
     try {
       const params = new URLSearchParams(window.location.search);
@@ -181,7 +181,7 @@ async function updateNotificationCount() {
 
     toggleElem('.notification_count', data.new !== 0);
 
-    for (const el of document.getElementsByClassName('notification_count')) {
+    for (const el of document.querySelectorAll('.notification_count')) {
       el.textContent = `${data.new}`;
     }
 
diff --git a/web_src/js/features/pull-view-file.js b/web_src/js/features/pull-view-file.js
index 2472e5a0bd..84c5eddb45 100644
--- a/web_src/js/features/pull-view-file.js
+++ b/web_src/js/features/pull-view-file.js
@@ -12,9 +12,9 @@ const collapseFilesBtnSelector = '#collapse-files-btn';
 // Refreshes the summary of viewed files if present
 // The data used will be window.config.pageData.prReview.numberOf{Viewed}Files
 function refreshViewedFilesSummary() {
-  const viewedFilesProgress = document.getElementById('viewed-files-summary');
+  const viewedFilesProgress = document.querySelector('#viewed-files-summary');
   viewedFilesProgress?.setAttribute('value', prReview.numberOfViewedFiles);
-  const summaryLabel = document.getElementById('viewed-files-summary-label');
+  const summaryLabel = document.querySelector('#viewed-files-summary-label');
   if (summaryLabel) summaryLabel.innerHTML = summaryLabel.getAttribute('data-text-changed-template')
     .replace('%[1]d', prReview.numberOfViewedFiles)
     .replace('%[2]d', prReview.numberOfFiles);
diff --git a/web_src/js/features/recent-commits.js b/web_src/js/features/recent-commits.js
index 030c251a05..b7f7c49987 100644
--- a/web_src/js/features/recent-commits.js
+++ b/web_src/js/features/recent-commits.js
@@ -1,7 +1,7 @@
 import {createApp} from 'vue';
 
 export async function initRepoRecentCommits() {
-  const el = document.getElementById('repo-recent-commits-chart');
+  const el = document.querySelector('#repo-recent-commits-chart');
   if (!el) return;
 
   const {default: RepoRecentCommits} = await import(/* webpackChunkName: "recent-commits-graph" */'../components/RepoRecentCommits.vue');
diff --git a/web_src/js/features/repo-diff-commitselect.js b/web_src/js/features/repo-diff-commitselect.js
index ebac64e855..2d0d63946c 100644
--- a/web_src/js/features/repo-diff-commitselect.js
+++ b/web_src/js/features/repo-diff-commitselect.js
@@ -2,7 +2,7 @@ import {createApp} from 'vue';
 import DiffCommitSelector from '../components/DiffCommitSelector.vue';
 
 export function initDiffCommitSelect() {
-  const el = document.getElementById('diff-commit-select');
+  const el = document.querySelector('#diff-commit-select');
   if (!el) return;
 
   const commitSelect = createApp(DiffCommitSelector);
diff --git a/web_src/js/features/repo-diff-filetree.js b/web_src/js/features/repo-diff-filetree.js
index 5dd2c42e74..6d9533d066 100644
--- a/web_src/js/features/repo-diff-filetree.js
+++ b/web_src/js/features/repo-diff-filetree.js
@@ -3,13 +3,13 @@ import DiffFileTree from '../components/DiffFileTree.vue';
 import DiffFileList from '../components/DiffFileList.vue';
 
 export function initDiffFileTree() {
-  const el = document.getElementById('diff-file-tree');
+  const el = document.querySelector('#diff-file-tree');
   if (!el) return;
 
   const fileTreeView = createApp(DiffFileTree);
   fileTreeView.mount(el);
 
-  const fileListElement = document.getElementById('diff-file-list');
+  const fileListElement = document.querySelector('#diff-file-list');
   if (!fileListElement) return;
 
   const fileListView = createApp(DiffFileList);
diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index 00f74515df..cd01232a7e 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -13,7 +13,7 @@ import {POST, GET} from '../modules/fetch.js';
 const {pageData, i18n} = window.config;
 
 function initRepoDiffReviewButton() {
-  const reviewBox = document.getElementById('review-box');
+  const reviewBox = document.querySelector('#review-box');
   if (!reviewBox) return;
 
   const counter = reviewBox.querySelector('.review-comments-counter');
diff --git a/web_src/js/features/repo-editor.js b/web_src/js/features/repo-editor.js
index b4fae4f6aa..aa9ca657b0 100644
--- a/web_src/js/features/repo-editor.js
+++ b/web_src/js/features/repo-editor.js
@@ -112,7 +112,7 @@ export function initRepoEditor() {
 
     // Using events from https://github.com/codedance/jquery.AreYouSure#advanced-usage
     // to enable or disable the commit button
-    const commitButton = document.getElementById('commit-button');
+    const commitButton = document.querySelector('#commit-button');
     const $editForm = $('.ui.edit.form');
     const dirtyFileClass = 'dirty-file';
 
diff --git a/web_src/js/features/repo-findfile.js b/web_src/js/features/repo-findfile.js
index cff5068a1e..945eeeceff 100644
--- a/web_src/js/features/repo-findfile.js
+++ b/web_src/js/features/repo-findfile.js
@@ -106,11 +106,11 @@ async function loadRepoFiles() {
 }
 
 export function initFindFileInRepo() {
-  repoFindFileInput = document.getElementById('repo-file-find-input');
+  repoFindFileInput = document.querySelector('#repo-file-find-input');
   if (!repoFindFileInput) return;
 
   repoFindFileTableBody = document.querySelector('#repo-find-file-table tbody');
-  repoFindFileNoResult = document.getElementById('repo-find-file-no-result');
+  repoFindFileNoResult = document.querySelector('#repo-find-file-no-result');
   repoFindFileInput.addEventListener('input', () => filterRepoFiles(repoFindFileInput.value));
 
   loadRepoFiles();
diff --git a/web_src/js/features/repo-graph.js b/web_src/js/features/repo-graph.js
index 0086b92021..7084e40977 100644
--- a/web_src/js/features/repo-graph.js
+++ b/web_src/js/features/repo-graph.js
@@ -3,12 +3,12 @@ import {hideElem, showElem} from '../utils/dom.js';
 import {GET} from '../modules/fetch.js';
 
 export function initRepoGraphGit() {
-  const graphContainer = document.getElementById('git-graph-container');
+  const graphContainer = document.querySelector('#git-graph-container');
   if (!graphContainer) return;
 
-  document.getElementById('flow-color-monochrome')?.addEventListener('click', () => {
-    document.getElementById('flow-color-monochrome').classList.add('active');
-    document.getElementById('flow-color-colored')?.classList.remove('active');
+  document.querySelector('#flow-color-monochrome')?.addEventListener('click', () => {
+    document.querySelector('#flow-color-monochrome').classList.add('active');
+    document.querySelector('#flow-color-colored')?.classList.remove('active');
     graphContainer.classList.remove('colored');
     graphContainer.classList.add('monochrome');
     const params = new URLSearchParams(window.location.search);
@@ -30,9 +30,9 @@ export function initRepoGraphGit() {
     }
   });
 
-  document.getElementById('flow-color-colored')?.addEventListener('click', () => {
-    document.getElementById('flow-color-colored').classList.add('active');
-    document.getElementById('flow-color-monochrome')?.classList.remove('active');
+  document.querySelector('#flow-color-colored')?.addEventListener('click', () => {
+    document.querySelector('#flow-color-colored').classList.add('active');
+    document.querySelector('#flow-color-monochrome')?.classList.remove('active');
     graphContainer.classList.add('colored');
     graphContainer.classList.remove('monochrome');
     for (const link of document.querySelectorAll('.pagination a')) {
@@ -60,7 +60,7 @@ export function initRepoGraphGit() {
     const ajaxUrl = new URL(url);
     ajaxUrl.searchParams.set('div-only', 'true');
     window.history.replaceState({}, '', queryString ? `?${queryString}` : window.location.pathname);
-    document.getElementById('pagination').innerHTML = '';
+    document.querySelector('#pagination').innerHTML = '';
     hideElem('#rel-container');
     hideElem('#rev-container');
     showElem('#loading-indicator');
@@ -69,9 +69,9 @@ export function initRepoGraphGit() {
       const html = await response.text();
       const div = document.createElement('div');
       div.innerHTML = html;
-      document.getElementById('pagination').innerHTML = div.getElementById('pagination').innerHTML;
-      document.getElementById('rel-container').innerHTML = div.getElementById('rel-container').innerHTML;
-      document.getElementById('rev-container').innerHTML = div.getElementById('rev-container').innerHTML;
+      document.querySelector('#pagination').innerHTML = div.querySelector('#pagination').innerHTML;
+      document.querySelector('#rel-container').innerHTML = div.querySelector('#rel-container').innerHTML;
+      document.querySelector('#rev-container').innerHTML = div.querySelector('#rev-container').innerHTML;
       hideElem('#loading-indicator');
       showElem('#rel-container');
       showElem('#rev-container');
@@ -82,7 +82,7 @@ export function initRepoGraphGit() {
     dropdownSelected.splice(0, 0, '...flow-hide-pr-refs');
   }
 
-  const flowSelectRefsDropdown = document.getElementById('flow-select-refs-dropdown');
+  const flowSelectRefsDropdown = document.querySelector('#flow-select-refs-dropdown');
   $(flowSelectRefsDropdown).dropdown('set selected', dropdownSelected);
   $(flowSelectRefsDropdown).dropdown({
     clearable: true,
@@ -115,7 +115,7 @@ export function initRepoGraphGit() {
     if (e.target.matches('#rev-list li')) {
       const flow = e.target.getAttribute('data-flow');
       if (flow === '0') return;
-      document.getElementById(`flow-${flow}`)?.classList.add('highlight');
+      document.querySelector(`#flow-${flow}`)?.classList.add('highlight');
       e.target.classList.add('hover');
       for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
         item.classList.add('highlight');
@@ -136,7 +136,7 @@ export function initRepoGraphGit() {
     if (e.target.matches('#rev-list li')) {
       const flow = e.target.getAttribute('data-flow');
       if (flow === '0') return;
-      document.getElementById(`flow-${flow}`)?.classList.remove('highlight');
+      document.querySelector(`#flow-${flow}`)?.classList.remove('highlight');
       e.target.classList.remove('hover');
       for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
         item.classList.remove('highlight');
diff --git a/web_src/js/features/repo-home.js b/web_src/js/features/repo-home.js
index 6a5bce8268..f48c1b1bb3 100644
--- a/web_src/js/features/repo-home.js
+++ b/web_src/js/features/repo-home.js
@@ -7,11 +7,11 @@ import {showErrorToast} from '../modules/toast.js';
 const {appSubUrl} = window.config;
 
 export function initRepoTopicBar() {
-  const mgrBtn = document.getElementById('manage_topic');
+  const mgrBtn = document.querySelector('#manage_topic');
   if (!mgrBtn) return;
 
-  const editDiv = document.getElementById('topic_edit');
-  const viewDiv = document.getElementById('repo-topics');
+  const editDiv = document.querySelector('#topic_edit');
+  const viewDiv = document.querySelector('#repo-topics');
   const topicDropdown = editDiv.querySelector('.ui.dropdown');
   let lastErrorToast;
 
@@ -28,7 +28,7 @@ export function initRepoTopicBar() {
     mgrBtn.focus();
   });
 
-  document.getElementById('save_topic').addEventListener('click', async (e) => {
+  document.querySelector('#save_topic').addEventListener('click', async (e) => {
     lastErrorToast?.hideToast();
     const topics = editDiv.querySelector('input[name=topics]').value;
 
diff --git a/web_src/js/features/repo-issue-edit.js b/web_src/js/features/repo-issue-edit.js
index 29b96f5127..8d43b6620c 100644
--- a/web_src/js/features/repo-issue-edit.js
+++ b/web_src/js/features/repo-issue-edit.js
@@ -55,7 +55,7 @@ async function onEditContent(event) {
           dropzone.querySelector('.files').append(input);
         });
         this.on('removedfile', async (file) => {
-          document.getElementById(file.uuid)?.remove();
+          document.querySelector(`#${file.uuid}`)?.remove();
           if (disableRemovedfileEvent) return;
           if (dropzone.getAttribute('data-remove-url') && !fileUuidDict[file.uuid].submitted) {
             try {
@@ -137,7 +137,7 @@ async function onEditContent(event) {
       }
       editContentZone.setAttribute('data-content-version', data.contentVersion);
       if (!data.content) {
-        renderContent.innerHTML = document.getElementById('no-content').innerHTML;
+        renderContent.innerHTML = document.querySelector('#no-content').innerHTML;
         rawContent.textContent = '';
       } else {
         renderContent.innerHTML = data.content;
@@ -166,7 +166,7 @@ async function onEditContent(event) {
 
   comboMarkdownEditor = getComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
   if (!comboMarkdownEditor) {
-    editContentZone.innerHTML = document.getElementById('issue-comment-editor-template').innerHTML;
+    editContentZone.innerHTML = document.querySelector('#issue-comment-editor-template').innerHTML;
     comboMarkdownEditor = await initComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
     comboMarkdownEditor.attachedDropzoneInst = await setupDropzone(editContentZone.querySelector('.dropzone'));
     editContentZone.querySelector('.ui.cancel.button').addEventListener('click', cancelAndReset);
diff --git a/web_src/js/features/repo-issue-list.js b/web_src/js/features/repo-issue-list.js
index 5d18a7ff8d..c8ae91d453 100644
--- a/web_src/js/features/repo-issue-list.js
+++ b/web_src/js/features/repo-issue-list.js
@@ -158,7 +158,7 @@ function initRepoIssueListAuthorDropdown() {
 }
 
 function initPinRemoveButton() {
-  for (const button of document.getElementsByClassName('issue-card-unpin')) {
+  for (const button of document.querySelectorAll('.issue-card-unpin')) {
     button.addEventListener('click', async (event) => {
       const el = event.currentTarget;
       const id = Number(el.getAttribute('data-issue-id'));
@@ -182,7 +182,7 @@ async function pinMoveEnd(e) {
 }
 
 async function initIssuePinSort() {
-  const pinDiv = document.getElementById('issue-pins');
+  const pinDiv = document.querySelector('#issue-pins');
 
   if (pinDiv === null) return;
 
diff --git a/web_src/js/features/repo-issue-pr-form.js b/web_src/js/features/repo-issue-pr-form.js
index 7b26e643c0..94a2857340 100644
--- a/web_src/js/features/repo-issue-pr-form.js
+++ b/web_src/js/features/repo-issue-pr-form.js
@@ -2,7 +2,7 @@ import {createApp} from 'vue';
 import PullRequestMergeForm from '../components/PullRequestMergeForm.vue';
 
 export function initRepoPullRequestMergeForm() {
-  const el = document.getElementById('pull-request-merge-form');
+  const el = document.querySelector('#pull-request-merge-form');
   if (!el) return;
 
   const view = createApp(PullRequestMergeForm);
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index 3cbbdc41fc..d53c3346f3 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -44,14 +44,14 @@ export function initRepoIssueTimeTracking() {
 
 async function updateDeadline(deadlineString) {
   hideElem('#deadline-err-invalid-date');
-  document.getElementById('deadline-loader')?.classList.add('is-loading');
+  document.querySelector('#deadline-loader')?.classList.add('is-loading');
 
   let realDeadline = null;
   if (deadlineString !== '') {
     const newDate = Date.parse(deadlineString);
 
     if (Number.isNaN(newDate)) {
-      document.getElementById('deadline-loader')?.classList.remove('is-loading');
+      document.querySelector('#deadline-loader')?.classList.remove('is-loading');
       showElem('#deadline-err-invalid-date');
       return false;
     }
@@ -59,7 +59,7 @@ async function updateDeadline(deadlineString) {
   }
 
   try {
-    const response = await POST(document.getElementById('update-issue-deadline-form').getAttribute('action'), {
+    const response = await POST(document.querySelector('#update-issue-deadline-form').getAttribute('action'), {
       data: {due_date: realDeadline},
     });
 
@@ -70,7 +70,7 @@ async function updateDeadline(deadlineString) {
     }
   } catch (error) {
     console.error(error);
-    document.getElementById('deadline-loader').classList.remove('is-loading');
+    document.querySelector('#deadline-loader').classList.remove('is-loading');
     showElem('#deadline-err-invalid-date');
   }
 }
@@ -182,7 +182,7 @@ export function initRepoIssueCommentDelete() {
           counter.textContent = String(num);
         }
 
-        document.getElementById(deleteButton.getAttribute('data-comment-id'))?.remove();
+        document.querySelector(`#${deleteButton.getAttribute('data-comment-id')}`)?.remove();
 
         if (conversationHolder && !conversationHolder.querySelector('.comment')) {
           const path = conversationHolder.getAttribute('data-path');
@@ -298,7 +298,7 @@ export function initRepoPullRequestMergeInstruction() {
 }
 
 export function initRepoPullRequestAllowMaintainerEdit() {
-  const wrapper = document.getElementById('allow-edits-from-maintainers');
+  const wrapper = document.querySelector('#allow-edits-from-maintainers');
   if (!wrapper) return;
   const checkbox = wrapper.querySelector('input[type="checkbox"]');
   checkbox.addEventListener('input', async () => {
@@ -678,7 +678,7 @@ export function initSingleCommentEditor($commentForm) {
   // * normal new issue/pr page, no status-button
   // * issue/pr view page, with comment form, has status-button
   const opts = {};
-  const statusButton = document.getElementById('status-button');
+  const statusButton = document.querySelector('#status-button');
   if (statusButton) {
     opts.onContentChanged = (editor) => {
       const statusText = statusButton.getAttribute(editor.value().trim() ? 'data-status-and-comment' : 'data-status');
diff --git a/web_src/js/features/repo-migrate.js b/web_src/js/features/repo-migrate.js
index 490e7df0e4..b8157e2dad 100644
--- a/web_src/js/features/repo-migrate.js
+++ b/web_src/js/features/repo-migrate.js
@@ -4,10 +4,10 @@ import {GET, POST} from '../modules/fetch.js';
 const {appSubUrl} = window.config;
 
 export function initRepoMigrationStatusChecker() {
-  const repoMigrating = document.getElementById('repo_migrating');
+  const repoMigrating = document.querySelector('#repo_migrating');
   if (!repoMigrating) return;
 
-  document.getElementById('repo_migrating_retry').addEventListener('click', doMigrationRetry);
+  document.querySelector('#repo_migrating_retry').addEventListener('click', doMigrationRetry);
 
   const task = repoMigrating.getAttribute('data-migrating-task-id');
 
@@ -20,7 +20,7 @@ export function initRepoMigrationStatusChecker() {
 
     // for all status
     if (data.message) {
-      document.getElementById('repo_migrating_progress_message').textContent = data.message;
+      document.querySelector('#repo_migrating_progress_message').textContent = data.message;
     }
 
     // TaskStatusFinished
@@ -36,7 +36,7 @@ export function initRepoMigrationStatusChecker() {
       showElem('#repo_migrating_retry');
       showElem('#repo_migrating_failed');
       showElem('#repo_migrating_failed_image');
-      document.getElementById('repo_migrating_failed_error').textContent = data.message;
+      document.querySelector('#repo_migrating_failed_error').textContent = data.message;
       return false;
     }
 
diff --git a/web_src/js/features/repo-migration.js b/web_src/js/features/repo-migration.js
index 59e282e4e7..7f7aa237ee 100644
--- a/web_src/js/features/repo-migration.js
+++ b/web_src/js/features/repo-migration.js
@@ -1,13 +1,13 @@
 import {hideElem, showElem, toggleElem} from '../utils/dom.js';
 
-const service = document.getElementById('service_type');
-const user = document.getElementById('auth_username');
-const pass = document.getElementById('auth_password');
-const token = document.getElementById('auth_token');
-const mirror = document.getElementById('mirror');
-const lfs = document.getElementById('lfs');
-const lfsSettings = document.getElementById('lfs_settings');
-const lfsEndpoint = document.getElementById('lfs_endpoint');
+const service = document.querySelector('#service_type');
+const user = document.querySelector('#auth_username');
+const pass = document.querySelector('#auth_password');
+const token = document.querySelector('#auth_token');
+const mirror = document.querySelector('#mirror');
+const lfs = document.querySelector('#lfs');
+const lfsSettings = document.querySelector('#lfs_settings');
+const lfsEndpoint = document.querySelector('#lfs_endpoint');
 const items = document.querySelectorAll('#migrate_items input[type=checkbox]');
 
 export function initRepoMigration() {
@@ -18,16 +18,16 @@ export function initRepoMigration() {
   pass?.addEventListener('input', () => {checkItems(false)});
   token?.addEventListener('input', () => {checkItems(true)});
   mirror?.addEventListener('change', () => {checkItems(true)});
-  document.getElementById('lfs_settings_show')?.addEventListener('click', (e) => {
+  document.querySelector('#lfs_settings_show')?.addEventListener('click', (e) => {
     e.preventDefault();
     e.stopPropagation();
     showElem(lfsEndpoint);
   });
   lfs?.addEventListener('change', setLFSSettingsVisibility);
 
-  const cloneAddr = document.getElementById('clone_addr');
+  const cloneAddr = document.querySelector('#clone_addr');
   cloneAddr?.addEventListener('change', () => {
-    const repoName = document.getElementById('repo_name');
+    const repoName = document.querySelector('#repo_name');
     if (cloneAddr.value && !repoName?.value) { // Only modify if repo_name input is blank
       repoName.value = cloneAddr.value.match(/^(.*\/)?((.+?)(\.git)?)$/)[3];
     }
diff --git a/web_src/js/features/repo-projects.js b/web_src/js/features/repo-projects.js
index a1cc4b346b..706942363d 100644
--- a/web_src/js/features/repo-projects.js
+++ b/web_src/js/features/repo-projects.js
@@ -5,8 +5,8 @@ import {POST, DELETE, PUT} from '../modules/fetch.js';
 
 function updateIssueCount(cards) {
   const parent = cards.parentElement;
-  const cnt = parent.getElementsByClassName('issue-card').length;
-  parent.getElementsByClassName('project-column-issue-count')[0].textContent = cnt;
+  const cnt = parent.querySelectorAll('.issue-card').length;
+  parent.querySelectorAll('.project-column-issue-count')[0].textContent = cnt;
 }
 
 async function createNewColumn(url, columnTitle, projectColorInput) {
@@ -26,7 +26,7 @@ async function createNewColumn(url, columnTitle, projectColorInput) {
 }
 
 async function moveIssue({item, from, to, oldIndex}) {
-  const columnCards = to.getElementsByClassName('issue-card');
+  const columnCards = to.querySelectorAll('.issue-card');
   updateIssueCount(from);
   updateIssueCount(to);
 
@@ -53,7 +53,7 @@ async function initRepoProjectSortable() {
 
   // the HTML layout is: #project-board > .board > .project-column .cards > .issue-card
   const mainBoard = els[0];
-  let boardColumns = mainBoard.getElementsByClassName('project-column');
+  let boardColumns = mainBoard.querySelectorAll('.project-column');
   createSortable(mainBoard, {
     group: 'project-column',
     draggable: '.project-column',
@@ -61,7 +61,7 @@ async function initRepoProjectSortable() {
     delayOnTouchOnly: true,
     delay: 500,
     onSort: async () => {
-      boardColumns = mainBoard.getElementsByClassName('project-column');
+      boardColumns = mainBoard.querySelectorAll('.project-column');
 
       const columnSorting = {
         columns: Array.from(boardColumns, (column, i) => ({
@@ -81,7 +81,7 @@ async function initRepoProjectSortable() {
   });
 
   for (const boardColumn of boardColumns) {
-    const boardCardList = boardColumn.getElementsByClassName('cards')[0];
+    const boardCardList = boardColumn.querySelectorAll('.cards')[0];
     createSortable(boardCardList, {
       group: 'shared',
       onAdd: moveIssue,
@@ -99,7 +99,7 @@ export function initRepoProject() {
 
   const _promise = initRepoProjectSortable();
 
-  for (const modal of document.getElementsByClassName('edit-project-column-modal')) {
+  for (const modal of document.querySelectorAll('.edit-project-column-modal')) {
     const projectHeader = modal.closest('.project-column-header');
     const projectTitleLabel = projectHeader?.querySelector('.project-column-title-label');
     const projectTitleInput = modal.querySelector('.project-column-title-input');
diff --git a/web_src/js/features/repo-release.js b/web_src/js/features/repo-release.js
index f3cfa74418..2be1ec58c6 100644
--- a/web_src/js/features/repo-release.js
+++ b/web_src/js/features/repo-release.js
@@ -20,7 +20,7 @@ export function initRepoReleaseNew() {
 }
 
 function initTagNameEditor() {
-  const el = document.getElementById('tag-name-editor');
+  const el = document.querySelector('#tag-name-editor');
   if (!el) return;
 
   const existingTags = JSON.parse(el.getAttribute('data-existing-tags'));
@@ -30,10 +30,10 @@ function initTagNameEditor() {
   const newTagHelperText = el.getAttribute('data-tag-helper-new');
   const existingTagHelperText = el.getAttribute('data-tag-helper-existing');
 
-  const tagNameInput = document.getElementById('tag-name');
+  const tagNameInput = document.querySelector('#tag-name');
   const hideTargetInput = function(tagNameInput) {
     const value = tagNameInput.value;
-    const tagHelper = document.getElementById('tag-helper');
+    const tagHelper = document.querySelector('#tag-helper');
     if (existingTags.includes(value)) {
       // If the tag already exists, hide the target branch selector.
       hideElem('#tag-target-selector');
diff --git a/web_src/js/features/repo-settings.js b/web_src/js/features/repo-settings.js
index 652f8ac290..6590c2b56c 100644
--- a/web_src/js/features/repo-settings.js
+++ b/web_src/js/features/repo-settings.js
@@ -44,7 +44,7 @@ export function initRepoSettingsCollaboration() {
 }
 
 export function initRepoSettingSearchTeamBox() {
-  const searchTeamBox = document.getElementById('search-team-box');
+  const searchTeamBox = document.querySelector('#search-team-box');
   if (!searchTeamBox) return;
 
   $(searchTeamBox).search({
@@ -78,29 +78,29 @@ export function initRepoSettingGitHook() {
 export function initRepoSettingBranches() {
   if (!document.querySelector('.repository.settings.branches')) return;
 
-  for (const el of document.getElementsByClassName('toggle-target-enabled')) {
+  for (const el of document.querySelectorAll('.toggle-target-enabled')) {
     el.addEventListener('change', function () {
       const target = document.querySelector(this.getAttribute('data-target'));
       target?.classList.toggle('disabled', !this.checked);
     });
   }
 
-  for (const el of document.getElementsByClassName('toggle-target-disabled')) {
+  for (const el of document.querySelectorAll('.toggle-target-disabled')) {
     el.addEventListener('change', function () {
       const target = document.querySelector(this.getAttribute('data-target'));
       if (this.checked) target?.classList.add('disabled'); // only disable, do not auto enable
     });
   }
 
-  document.getElementById('dismiss_stale_approvals')?.addEventListener('change', function () {
-    document.getElementById('ignore_stale_approvals_box')?.classList.toggle('disabled', this.checked);
+  document.querySelector('#dismiss_stale_approvals')?.addEventListener('change', function () {
+    document.querySelector('#ignore_stale_approvals_box')?.classList.toggle('disabled', this.checked);
   });
 
   // show the `Matched` mark for the status checks that match the pattern
   const markMatchedStatusChecks = () => {
-    const patterns = (document.getElementById('status_check_contexts').value || '').split(/[\r\n]+/);
+    const patterns = (document.querySelector('#status_check_contexts').value || '').split(/[\r\n]+/);
     const validPatterns = patterns.map((item) => item.trim()).filter(Boolean);
-    const marks = document.getElementsByClassName('status-check-matched-mark');
+    const marks = document.querySelectorAll('.status-check-matched-mark');
 
     for (const el of marks) {
       let matched = false;
@@ -115,5 +115,5 @@ export function initRepoSettingBranches() {
     }
   };
   markMatchedStatusChecks();
-  document.getElementById('status_check_contexts').addEventListener('input', onInputDebounce(markMatchedStatusChecks));
+  document.querySelector('#status_check_contexts').addEventListener('input', onInputDebounce(markMatchedStatusChecks));
 }
diff --git a/web_src/js/features/sshkey-helper.js b/web_src/js/features/sshkey-helper.js
index 3960eefe8e..5531c18451 100644
--- a/web_src/js/features/sshkey-helper.js
+++ b/web_src/js/features/sshkey-helper.js
@@ -1,8 +1,8 @@
 export function initSshKeyFormParser() {
   // Parse SSH Key
-  document.getElementById('ssh-key-content')?.addEventListener('input', function () {
+  document.querySelector('#ssh-key-content')?.addEventListener('input', function () {
     const arrays = this.value.split(' ');
-    const title = document.getElementById('ssh-key-title');
+    const title = document.querySelector('#ssh-key-title');
     if (!title.value && arrays.length === 3 && arrays[2] !== '') {
       title.value = arrays[2];
     }
diff --git a/web_src/js/features/user-auth-webauthn.js b/web_src/js/features/user-auth-webauthn.js
index 6dfbb4d765..ea26614ba7 100644
--- a/web_src/js/features/user-auth-webauthn.js
+++ b/web_src/js/features/user-auth-webauthn.js
@@ -109,7 +109,7 @@ async function webauthnRegistered(newCredential) {
 }
 
 function webAuthnError(errorType, message) {
-  const elErrorMsg = document.getElementById(`webauthn-error-msg`);
+  const elErrorMsg = document.querySelector(`#webauthn-error-msg`);
 
   if (errorType === 'general') {
     elErrorMsg.textContent = message || 'unknown error';
@@ -140,7 +140,7 @@ function detectWebAuthnSupport() {
 }
 
 export function initUserAuthWebAuthnRegister() {
-  const elRegister = document.getElementById('register-webauthn');
+  const elRegister = document.querySelector('#register-webauthn');
   if (!elRegister) {
     return;
   }
@@ -155,7 +155,7 @@ export function initUserAuthWebAuthnRegister() {
 }
 
 async function webAuthnRegisterRequest() {
-  const elNickname = document.getElementById('nickname');
+  const elNickname = document.querySelector('#nickname');
 
   const formData = new FormData();
   formData.append('name', elNickname.value);
diff --git a/web_src/js/features/user-auth.js b/web_src/js/features/user-auth.js
index a871ac471c..1ea131e75f 100644
--- a/web_src/js/features/user-auth.js
+++ b/web_src/js/features/user-auth.js
@@ -1,9 +1,9 @@
 import {checkAppUrl} from './common-global.js';
 
 export function initUserAuthOauth2() {
-  const outer = document.getElementById('oauth2-login-navigator');
+  const outer = document.querySelector('#oauth2-login-navigator');
   if (!outer) return;
-  const inner = document.getElementById('oauth2-login-navigator-inner');
+  const inner = document.querySelector('#oauth2-login-navigator-inner');
 
   checkAppUrl();
 
diff --git a/web_src/js/features/user-settings.js b/web_src/js/features/user-settings.js
index 2d8c53e457..8cb1f0582f 100644
--- a/web_src/js/features/user-settings.js
+++ b/web_src/js/features/user-settings.js
@@ -3,11 +3,11 @@ import {hideElem, showElem} from '../utils/dom.js';
 export function initUserSettings() {
   if (!document.querySelectorAll('.user.settings.profile').length) return;
 
-  const usernameInput = document.getElementById('username');
+  const usernameInput = document.querySelector('#username');
   if (!usernameInput) return;
   usernameInput.addEventListener('input', function () {
-    const prompt = document.getElementById('name-change-prompt');
-    const promptRedirect = document.getElementById('name-change-redirect-prompt');
+    const prompt = document.querySelector('#name-change-prompt');
+    const promptRedirect = document.querySelector('#name-change-redirect-prompt');
     if (this.value.toLowerCase() !== this.getAttribute('data-name').toLowerCase()) {
       showElem(prompt);
       showElem(promptRedirect);
diff --git a/web_src/js/markup/anchors.js b/web_src/js/markup/anchors.js
index 0e2c92713a..6f36d09683 100644
--- a/web_src/js/markup/anchors.js
+++ b/web_src/js/markup/anchors.js
@@ -9,19 +9,16 @@ function scrollToAnchor(encodedId) {
   if (!encodedId) return;
   const id = decodeURIComponent(encodedId);
   const prefixedId = addPrefix(id);
-  let el = document.getElementById(prefixedId);
+  let el = document.querySelector(`#${prefixedId}`);
 
   // check for matching user-generated `a[name]`
   if (!el) {
-    const nameAnchors = document.getElementsByName(prefixedId);
-    if (nameAnchors.length) {
-      el = nameAnchors[0];
-    }
+    el = document.querySelector(`a[name="${CSS.escape(prefixedId)}"]`);
   }
 
   // compat for links with old 'user-content-' prefixed hashes
   if (!el && hasPrefix(id)) {
-    return document.getElementById(id)?.scrollIntoView();
+    return document.querySelector(`#${id}`)?.scrollIntoView();
   }
 
   el?.scrollIntoView();
diff --git a/web_src/js/standalone/devtest.js b/web_src/js/standalone/devtest.js
index d0ca511c0f..8dbba554ac 100644
--- a/web_src/js/standalone/devtest.js
+++ b/web_src/js/standalone/devtest.js
@@ -1,11 +1,11 @@
 import {showInfoToast, showWarningToast, showErrorToast} from '../modules/toast.js';
 
-document.getElementById('info-toast').addEventListener('click', () => {
+document.querySelector('#info-toast').addEventListener('click', () => {
   showInfoToast('success 😀');
 });
-document.getElementById('warning-toast').addEventListener('click', () => {
+document.querySelector('#warning-toast').addEventListener('click', () => {
   showWarningToast('warning 😐');
 });
-document.getElementById('error-toast').addEventListener('click', () => {
+document.querySelector('#error-toast').addEventListener('click', () => {
   showErrorToast('error 🙁');
 });
diff --git a/web_src/js/standalone/swagger.js b/web_src/js/standalone/swagger.js
index 00854ef5d7..2928813167 100644
--- a/web_src/js/standalone/swagger.js
+++ b/web_src/js/standalone/swagger.js
@@ -2,7 +2,7 @@ import SwaggerUI from 'swagger-ui-dist/swagger-ui-es-bundle.js';
 import 'swagger-ui-dist/swagger-ui.css';
 
 window.addEventListener('load', async () => {
-  const url = document.getElementById('swagger-ui').getAttribute('data-source');
+  const url = document.querySelector('#swagger-ui').getAttribute('data-source');
   const res = await fetch(url);
   const spec = await res.json();