getElementsByName – name-Attribut von Eingabefeldern

Das name-Attribut

Im Grunde genommen ist getElementsByName nur für die Felder von Formularen zuständig, in erster Linie für Radio-Buttons. getElementsByName ist ein sehr altes API und liefert eine Nodelist. Das kann zu schwer aufspürbaren Fehlern führen.

const color = document.getElementsByName("col");
// DOM ändert sich → color ändert sich mit

Auch in veralteten HTML-Formularen sehen wir vielleicht ab und zu noch ein name-Attribut im form-Tag, das aber immer schon überflüssig war, denn der Wert des name-Attributs im form-Tag wird der Anwendung auf dem Server nicht mitgeliefert.

Die moderne Alternative: querySelector

<div class="demo">
	<label><input type="radio" name="farbe" value="grün"> Grün</label>
	<label><input type="radio" name="farbe" value="rot"> Rot</label>
	<label><input type="radio" name="farbe" value="blau"> Blau</label>
	<label><input type="radio" name="farbe" value="gelb"> Gelb</label>
</div>

Würde für die Abfrage, welche Element hier gerade aktiviert wurde getElementsByName eingesetzt – welcher Radio-Button gerade geklickt wurde, braucht das Skript einen Delegierten, der eine Änderung der Radio-Buttons registriert. getElementsByName('farbe') kann das nicht, denn es selektiert nur die vier Elemente mit name="farbe", aber hört nicht zu.

Also dient hier div class="demo" als Delegierter.

document.querySelector('.demo')
	.addEventListener('change', e => {
		if (e.target.name !== 'farbe') return;

		const radios = document.getElementsByName('farbe');
		let value;

		for (const r of radios) {
			if (r.checked) {
				value = r.value;
				break;
			}
		}

		console.log(value);
	});

Das ist unnötig viel Code und außerdem fehleranfällig. Das kann man heute viel einfacher handhaben:

const container = document.querySelector('.demo');

container.addEventListener('change', () => {
	const selected = container.querySelector(
		'input[name="farbe"]:checked'
		)?.value;

	console.log(selected);
});

getElementsByName vs querySelector

getElementsByName() kann Zustand lesen, aber »hört nicht zu« – registriert kein Event.