prefer-query-selector: Add getElementsByName

[axetroy]

fixed #2374

[fisker]

I don't think this is safe, but I guess no one put quotes or other strange stuff in the name?

A better fix should direct update the raw string

- ('foo')
+ ('[name="foo"]')

- ("foo")
+ ("[name=\"foo\"]")  // Personally, I like double quoted attribute selector.

- (`foo`)
+ (`[name="foo"]`)

Anyway, if it's hard we can leave it as is for now.

[fregante]

It's a little complicated and maybe too rare to be worth it, but the correct replacement for form elements would be form.elements.namedItem('foo'), not form.querySelector('[name="foo"]')

https://stackoverflow.com/a/76206952/288906

[silverwind]

It's a little complicated and maybe too rare to be worth it, but the correct replacement for form elements would be form.elements.namedItem('foo'), not form.querySelector('[name="foo"]')

https://stackoverflow.com/a/76206952/288906

If it's to complicated to autofix, I suggest not having a autofixer, just the detection only. I'd certainly not do this namedItem fix because such elements could appear outside a form too.

[fregante]

I think it's fine as is for now, querySelector is not a wrong fix for this rule. Perhaps the selections of form items would have to be its own rule because it's kinda complicated

[silverwind]

Yes, I think querySelectorAll is not wrong. Why do you think it's wrong?

[fregante]

querySelector is not a wrong fix for this rule

I said it's not wrong here, but namedItem() would still be the better API to select form items.

[silverwind]

Ah I see what you mean now. If you have multiple forms on the page with duplicate name fields in them, then yes, only form.elements.namedItem will work, but for the general use case, querySelectorAll is a suitable replacement for getElementsByName.