Skip to content

Commit 507fbf4

Browse files
silverwindwxiaoguangGiteaBot
authored
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 <[email protected]> Co-authored-by: Giteabot <[email protected]>
1 parent a2304cb commit 507fbf4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+165
-168
lines changed

‎.eslintrc.yaml

+1-1
Original file line numberDiff line numberDiff line change
@@ -798,7 +798,7 @@ rules:
798798
unicorn/prefer-object-has-own: [0]
799799
unicorn/prefer-optional-catch-binding: [2]
800800
unicorn/prefer-prototype-methods: [0]
801-
unicorn/prefer-query-selector: [0]
801+
unicorn/prefer-query-selector: [2]
802802
unicorn/prefer-reflect-apply: [0]
803803
unicorn/prefer-regexp-test: [2]
804804
unicorn/prefer-set-has: [0]

‎web_src/js/components/DashboardRepoList.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ const sfc = {
101101
},
102102
103103
mounted() {
104-
const el = document.getElementById('dashboard-repo-list');
104+
const el = document.querySelector('#dashboard-repo-list');
105105
this.changeReposFilter(this.reposFilter);
106106
$(el).find('.dropdown').dropdown();
107107
nextTick(() => {
@@ -330,7 +330,7 @@ const sfc = {
330330
};
331331
332332
export function initDashboardRepoList() {
333-
const el = document.getElementById('dashboard-repo-list');
333+
const el = document.querySelector('#dashboard-repo-list');
334334
if (el) {
335335
createApp(sfc).mount(el);
336336
}

‎web_src/js/components/DiffCommitSelector.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {GET} from '../modules/fetch.js';
55
export default {
66
components: {SvgIcon},
77
data: () => {
8-
const el = document.getElementById('diff-commit-select');
8+
const el = document.querySelector('#diff-commit-select');
99
return {
1010
menuVisible: false,
1111
isLoading: false,

‎web_src/js/components/DiffFileList.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ export default {
77
return {store: diffTreeStore()};
88
},
99
mounted() {
10-
document.getElementById('show-file-list-btn').addEventListener('click', this.toggleFileList);
10+
document.querySelector('#show-file-list-btn').addEventListener('click', this.toggleFileList);
1111
},
1212
unmounted() {
13-
document.getElementById('show-file-list-btn').removeEventListener('click', this.toggleFileList);
13+
document.querySelector('#show-file-list-btn').removeEventListener('click', this.toggleFileList);
1414
},
1515
methods: {
1616
toggleFileList() {

‎web_src/js/components/DiffFileTree.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export default {
112112
updateState(visible) {
113113
const btn = document.querySelector('.diff-toggle-file-tree-button');
114114
const [toShow, toHide] = btn.querySelectorAll('.icon');
115-
const tree = document.getElementById('diff-file-tree');
115+
const tree = document.querySelector('#diff-file-tree');
116116
const newTooltip = btn.getAttribute(visible ? 'data-hide-text' : 'data-show-text');
117117
btn.setAttribute('data-tooltip-content', newTooltip);
118118
toggleElem(tree, visible);

‎web_src/js/components/RepoActionView.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,7 @@ const sfc = {
325325
export default sfc;
326326
327327
export function initRepositoryActionView() {
328-
const el = document.getElementById('repo-action-view');
328+
const el = document.querySelector('#repo-action-view');
329329
if (!el) return;
330330
331331
// TODO: the parent element's full height doesn't work well now,

‎web_src/js/components/RepoActivityTopAuthors.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const sfc = {
5151
};
5252
5353
export function initRepoActivityTopAuthorsChart() {
54-
const el = document.getElementById('repo-activity-top-authors-chart');
54+
const el = document.querySelector('#repo-activity-top-authors-chart');
5555
if (el) {
5656
createApp(sfc).mount(el);
5757
}

‎web_src/js/components/RepoBranchTagSelector.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ const sfc = {
8585
this.isViewBranch = false;
8686
this.$refs.dropdownRefName.textContent = item.name;
8787
if (this.setAction) {
88-
document.getElementById(this.branchForm)?.setAttribute('action', url);
88+
document.querySelector(`#${this.branchForm}`)?.setAttribute('action', url);
8989
} else {
9090
$(`#${this.branchForm} input[name="refURL"]`).val(url);
9191
}

‎web_src/js/components/ScopedAccessTokenSelector.vue

+6-6
Original file line numberDiff line numberDiff line change
@@ -43,25 +43,25 @@ const sfc = {
4343
},
4444
4545
mounted() {
46-
document.getElementById('scoped-access-submit').addEventListener('click', this.onClickSubmit);
46+
document.querySelector('#scoped-access-submit').addEventListener('click', this.onClickSubmit);
4747
},
4848
4949
unmounted() {
50-
document.getElementById('scoped-access-submit').removeEventListener('click', this.onClickSubmit);
50+
document.querySelector('#scoped-access-submit').removeEventListener('click', this.onClickSubmit);
5151
},
5252
5353
methods: {
5454
onClickSubmit(e) {
5555
e.preventDefault();
5656
57-
const warningEl = document.getElementById('scoped-access-warning');
57+
const warningEl = document.querySelector('#scoped-access-warning');
5858
// check that at least one scope has been selected
59-
for (const el of document.getElementsByClassName('access-token-select')) {
59+
for (const el of document.querySelectorAll('.access-token-select')) {
6060
if (el.value) {
6161
// Hide the error if it was visible from previous attempt.
6262
hideElem(warningEl);
6363
// Submit the form.
64-
document.getElementById('scoped-access-form').submit();
64+
document.querySelector('#scoped-access-form').submit();
6565
// Don't show the warning.
6666
return;
6767
}
@@ -78,7 +78,7 @@ export default sfc;
7878
* Initialize category toggle sections
7979
*/
8080
export function initScopedAccessTokenCategories() {
81-
for (const el of document.getElementsByClassName('scoped-access-token-mount')) {
81+
for (const el of document.querySelectorAll('.scoped-access-token-mount')) {
8282
createApp({})
8383
.component('scoped-access-token-selector', sfc)
8484
.mount(el);

‎web_src/js/features/admin/common.js

+30-30
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {POST} from '../../modules/fetch.js';
66
const {appSubUrl} = window.config;
77

88
function onSecurityProtocolChange() {
9-
if (Number(document.getElementById('security_protocol')?.value) > 0) {
9+
if (Number(document.querySelector('#security_protocol')?.value) > 0) {
1010
showElem('.has-tls');
1111
} else {
1212
hideElem('.has-tls');
@@ -21,34 +21,34 @@ export function initAdminCommon() {
2121

2222
// New user
2323
if ($('.admin.new.user').length > 0 || $('.admin.edit.user').length > 0) {
24-
document.getElementById('login_type')?.addEventListener('change', function () {
24+
document.querySelector('#login_type')?.addEventListener('change', function () {
2525
if (this.value?.substring(0, 1) === '0') {
26-
document.getElementById('user_name')?.removeAttribute('disabled');
27-
document.getElementById('login_name')?.removeAttribute('required');
26+
document.querySelector('#user_name')?.removeAttribute('disabled');
27+
document.querySelector('#login_name')?.removeAttribute('required');
2828
hideElem('.non-local');
2929
showElem('.local');
30-
document.getElementById('user_name')?.focus();
30+
document.querySelector('#user_name')?.focus();
3131

3232
if (this.getAttribute('data-password') === 'required') {
33-
document.getElementById('password')?.setAttribute('required', 'required');
33+
document.querySelector('#password')?.setAttribute('required', 'required');
3434
}
3535
} else {
3636
if (document.querySelector('.admin.edit.user')) {
37-
document.getElementById('user_name')?.setAttribute('disabled', 'disabled');
37+
document.querySelector('#user_name')?.setAttribute('disabled', 'disabled');
3838
}
39-
document.getElementById('login_name')?.setAttribute('required', 'required');
39+
document.querySelector('#login_name')?.setAttribute('required', 'required');
4040
showElem('.non-local');
4141
hideElem('.local');
42-
document.getElementById('login_name')?.focus();
42+
document.querySelector('#login_name')?.focus();
4343

44-
document.getElementById('password')?.removeAttribute('required');
44+
document.querySelector('#password')?.removeAttribute('required');
4545
}
4646
});
4747
}
4848

4949
function onUsePagedSearchChange() {
5050
const searchPageSizeElements = document.querySelectorAll('.search-page-size');
51-
if (document.getElementById('use_paged_search').checked) {
51+
if (document.querySelector('#use_paged_search').checked) {
5252
showElem('.search-page-size');
5353
for (const el of searchPageSizeElements) {
5454
el.querySelector('input')?.setAttribute('required', 'required');
@@ -67,7 +67,7 @@ export function initAdminCommon() {
6767
input.removeAttribute('required');
6868
}
6969

70-
const provider = document.getElementById('oauth2_provider').value;
70+
const provider = document.querySelector('#oauth2_provider').value;
7171
switch (provider) {
7272
case 'openidConnect':
7373
document.querySelector('.open_id_connect_auto_discovery_url input').setAttribute('required', 'required');
@@ -91,19 +91,19 @@ export function initAdminCommon() {
9191
}
9292

9393
function onOAuth2UseCustomURLChange(applyDefaultValues) {
94-
const provider = document.getElementById('oauth2_provider').value;
94+
const provider = document.querySelector('#oauth2_provider').value;
9595
hideElem('.oauth2_use_custom_url_field');
9696
for (const input of document.querySelectorAll('.oauth2_use_custom_url_field input[required]')) {
9797
input.removeAttribute('required');
9898
}
9999

100100
const elProviderCustomUrlSettings = document.querySelector(`#${provider}_customURLSettings`);
101-
if (elProviderCustomUrlSettings && document.getElementById('oauth2_use_custom_url').checked) {
101+
if (elProviderCustomUrlSettings && document.querySelector('#oauth2_use_custom_url').checked) {
102102
for (const custom of ['token_url', 'auth_url', 'profile_url', 'email_url', 'tenant']) {
103103
if (applyDefaultValues) {
104-
document.getElementById(`oauth2_${custom}`).value = document.getElementById(`${provider}_${custom}`).value;
104+
document.querySelector(`#oauth2_${custom}`).value = document.querySelector(`#${provider}_${custom}`).value;
105105
}
106-
const customInput = document.getElementById(`${provider}_${custom}`);
106+
const customInput = document.querySelector(`#${provider}_${custom}`);
107107
if (customInput && customInput.getAttribute('data-available') === 'true') {
108108
for (const input of document.querySelectorAll(`.oauth2_${custom} input`)) {
109109
input.setAttribute('required', 'required');
@@ -115,12 +115,12 @@ export function initAdminCommon() {
115115
}
116116

117117
function onEnableLdapGroupsChange() {
118-
toggleElem(document.getElementById('ldap-group-options'), $('.js-ldap-group-toggle')[0].checked);
118+
toggleElem(document.querySelector('#ldap-group-options'), $('.js-ldap-group-toggle')[0].checked);
119119
}
120120

121121
// New authentication
122122
if (document.querySelector('.admin.new.authentication')) {
123-
document.getElementById('auth_type')?.addEventListener('change', function () {
123+
document.querySelector('#auth_type')?.addEventListener('change', function () {
124124
hideElem('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi');
125125

126126
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() {
180180
}
181181
});
182182
$('#auth_type').trigger('change');
183-
document.getElementById('security_protocol')?.addEventListener('change', onSecurityProtocolChange);
184-
document.getElementById('use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
185-
document.getElementById('oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
186-
document.getElementById('oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true));
183+
document.querySelector('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
184+
document.querySelector('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
185+
document.querySelector('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
186+
document.querySelector('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true));
187187
$('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
188188
}
189189
// Edit authentication
190190
if (document.querySelector('.admin.edit.authentication')) {
191-
const authType = document.getElementById('auth_type')?.value;
191+
const authType = document.querySelector('#auth_type')?.value;
192192
if (authType === '2' || authType === '5') {
193-
document.getElementById('security_protocol')?.addEventListener('change', onSecurityProtocolChange);
193+
document.querySelector('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
194194
$('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
195195
onEnableLdapGroupsChange();
196196
if (authType === '2') {
197-
document.getElementById('use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
197+
document.querySelector('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
198198
}
199199
} else if (authType === '6') {
200-
document.getElementById('oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
201-
document.getElementById('oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(false));
200+
document.querySelector('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
201+
document.querySelector('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(false));
202202
onOAuth2Change(false);
203203
}
204204
}
205205

206206
if (document.querySelector('.admin.authentication')) {
207207
$('#auth_name').on('input', function () {
208208
// appSubUrl is either empty or is a path that starts with `/` and doesn't have a trailing slash.
209-
document.getElementById('oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent(this.value)}/callback`;
209+
document.querySelector('#oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent(this.value)}/callback`;
210210
}).trigger('input');
211211
}
212212

213213
// Notice
214214
if (document.querySelector('.admin.notice')) {
215-
const detailModal = document.getElementById('detail-modal');
215+
const detailModal = document.querySelector('#detail-modal');
216216

217217
// Attach view detail modals
218218
$('.view-detail').on('click', function () {
@@ -244,7 +244,7 @@ export function initAdminCommon() {
244244
break;
245245
}
246246
});
247-
document.getElementById('delete-selection')?.addEventListener('click', async function (e) {
247+
document.querySelector('#delete-selection')?.addEventListener('click', async function (e) {
248248
e.preventDefault();
249249
this.classList.add('is-loading', 'disabled');
250250
const data = new FormData();

‎web_src/js/features/citation.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@ export async function initCitationFileCopyContent() {
2727

2828
if (!pageData.citationFileContent) return;
2929

30-
const citationCopyApa = document.getElementById('citation-copy-apa');
31-
const citationCopyBibtex = document.getElementById('citation-copy-bibtex');
32-
const inputContent = document.getElementById('citation-copy-content');
30+
const citationCopyApa = document.querySelector('#citation-copy-apa');
31+
const citationCopyBibtex = document.querySelector('#citation-copy-bibtex');
32+
const inputContent = document.querySelector('#citation-copy-content');
3333

3434
if ((!citationCopyApa && !citationCopyBibtex) || !inputContent) return;
3535

@@ -41,7 +41,7 @@ export async function initCitationFileCopyContent() {
4141
citationCopyApa.classList.toggle('primary', !isBibtex);
4242
};
4343

44-
document.getElementById('cite-repo-button')?.addEventListener('click', async (e) => {
44+
document.querySelector('#cite-repo-button')?.addEventListener('click', async (e) => {
4545
const dropdownBtn = e.target.closest('.ui.dropdown.button');
4646
dropdownBtn.classList.add('is-loading');
4747

‎web_src/js/features/code-frequency.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {createApp} from 'vue';
22

33
export async function initRepoCodeFrequency() {
4-
const el = document.getElementById('repo-code-frequency-chart');
4+
const el = document.querySelector('#repo-code-frequency-chart');
55
if (!el) return;
66

77
const {default: RepoCodeFrequency} = await import(/* webpackChunkName: "code-frequency-graph" */'../components/RepoCodeFrequency.vue');

‎web_src/js/features/colorpicker.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {createTippy} from '../modules/tippy.js';
22

33
export async function initColorPickers() {
4-
const els = document.getElementsByClassName('js-color-picker-input');
4+
const els = document.querySelectorAll('.js-color-picker-input');
55
if (!els.length) return;
66

77
await Promise.all([

‎web_src/js/features/common-global.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ export function initGlobalFormDirtyLeaveConfirm() {
2424
}
2525

2626
export function initHeadNavbarContentToggle() {
27-
const navbar = document.getElementById('navbar');
28-
const btn = document.getElementById('navbar-expand-toggle');
27+
const navbar = document.querySelector('#navbar');
28+
const btn = document.querySelector('#navbar-expand-toggle');
2929
if (!navbar || !btn) return;
3030

3131
btn.addEventListener('click', () => {

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export function parseIssueListQuickGotoLink(repoLink, searchText) {
2929
}
3030

3131
export function initCommonIssueListQuickGoto() {
32-
const goto = document.getElementById('issue-list-quick-goto');
32+
const goto = document.querySelector('#issue-list-quick-goto');
3333
if (!goto) return;
3434

3535
const form = goto.closest('form');

‎web_src/js/features/comp/SearchUserBox.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const {appSubUrl} = window.config;
55
const looksLikeEmailAddressCheck = /^\S+@\S+$/;
66

77
export function initCompSearchUserBox() {
8-
const searchUserBox = document.getElementById('search-user-box');
8+
const searchUserBox = document.querySelector('#search-user-box');
99
if (!searchUserBox) return;
1010

1111
const $searchUserBox = $(searchUserBox);

‎web_src/js/features/comp/WebHookEditor.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -23,18 +23,18 @@ export function initCompWebHookEditor() {
2323
}
2424

2525
// some webhooks (like Gitea) allow to set the request method (GET/POST), and it would toggle the "Content Type" field
26-
const httpMethodInput = document.getElementById('http_method');
26+
const httpMethodInput = document.querySelector('#http_method');
2727
if (httpMethodInput) {
2828
const updateContentType = function () {
2929
const visible = httpMethodInput.value === 'POST';
30-
toggleElem(document.getElementById('content_type').closest('.field'), visible);
30+
toggleElem(document.querySelector('#content_type').closest('.field'), visible);
3131
};
3232
updateContentType();
3333
httpMethodInput.addEventListener('change', updateContentType);
3434
}
3535

3636
// Test delivery
37-
document.getElementById('test-delivery')?.addEventListener('click', async function () {
37+
document.querySelector('#test-delivery')?.addEventListener('click', async function () {
3838
this.classList.add('is-loading', 'disabled');
3939
await POST(this.getAttribute('data-link'));
4040
setTimeout(() => {

‎web_src/js/features/contributors.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {createApp} from 'vue';
22

33
export async function initRepoContributors() {
4-
const el = document.getElementById('repo-contributors-chart');
4+
const el = document.querySelector('#repo-contributors-chart');
55
if (!el) return;
66

77
const {default: RepoContributors} = await import(/* webpackChunkName: "contributors-graph" */'../components/RepoContributors.vue');

‎web_src/js/features/copycontent.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {GET} from '../modules/fetch.js';
66
const {i18n} = window.config;
77

88
export function initCopyContent() {
9-
const btn = document.getElementById('copy-content');
9+
const btn = document.querySelector('#copy-content');
1010
if (!btn || btn.classList.contains('disabled')) return;
1111

1212
btn.addEventListener('click', async () => {

0 commit comments

Comments
 (0)