Frage zum Wiki-Artikel „video“

[Rolf B]

Hallo Matthias,

man muss auf jeden Fall unterscheiden zwischen Attribut und Property.

Das Attribut ist im HTML notiert und wird mit elem.getAttribute("foo") abgefragt, das Property ist das interpretierte Attribut im DOM und mit elem.foo bzw. elem[foo] zugänglich.

Attribute, die als reiner Name angegeben werden können, wie checked oder required, dürften allesamt boolesche Attribute sein. Das bedeutet: ihr Property ist true, wenn sie vorhanden sind (egal mit welchem Wert, sogar "false" führt zu true) oder false, wenn sie fehlen. Mit getAttribute bekommt man null, wenn sie fehlen, einen Leerstring, wenn sie ohne Wert angegeben wurden, und sonst den im HTML notierten String.

<label>
  <input id="xyz" type="checkbox" checked disabled="false" value> 
  aktiv
</label>

(ja, ich weiß, dass eine required checkbox wenig sinnvoll ist)

let cb = document.getElementById("xyz");

peekAttribute(cb, "checked");
peekAttribute(cb, "disabled");
peekAttribute(cb, "required");
peekAttribute(cb, "value");

function peekAttribute(element, attrName, propName = attrName) {
	let prop = element[propName];
	let attr = element.getAttribute(attrName);
	console.log(`\n${propName} property: ${typeof prop}, ${prop ? "true" : "false"}`);
	console.log(`${attrName} attribute: ${typeof attr}, content="${attr}"`);
}

Ausgabe:

checked property: boolean, true
checked attribute: string, content=""

disabled property: boolean, true
disabled attribute: string, content="false"

required property: boolean, false
required attribute: object, content="null"

value property: string, false
value attribute: string, content=""

Rolf