This was discussed before but when enumerating an object only a few properties are shown.
Use Case
Mikeal is working on a plugin and adds a list to his plugin. On the list change he is trying to find the selected option but doesn’t know how. So he enumerates through all the properties on the list. Only the properties starting with an underscore are shown.
Can you elaborate? What kind of list is being added, and what is a “list change”?
(Sorry if I’m being slow here.)
If you get an HTML element or object and you enumerate the properties many are not listed.
IIRC any properties on the super classes are not enumerated.
// get selected option and add its properties to an array
var object = myDropdown.selectedOptions[0];
for (var property in object) {
properties.push(property + ":" + object[property]);
}
console.log(properties);
// output with some formatting applied
object {
_anySiblingsSelectorHash false
_attributes: {}
_childrenSelectorHash false
_computedStyleMatchers: {}
_domClient: {}
_firstChild: {}
_lastChild: {}
_layoutInfo: {}
_mutation -9007199254740991
_namespaceURI http://www.w3.org/1999/xhtml
_nativeId 64
_nestedSelectorHash false
_nextSibling: {}
_nextSiblingSelectorHash false
_nodeName option
_ownerDocument: {}
_parentNode: {}
_previousSibling null
_properties [object Map]
_scrollInfo: {}
_style: {}
oncancel undefined
onchange undefined
onclick undefined
onclose undefined
onerror undefined
onfocus undefined
oninput undefined
onkeydown undefined
onkeyup undefined
onload undefined
onsubmit undefined
}
Notice in the list above that innerHTML and innerText are not listed but both are properties of an option object.
You’re actually seeing the private internals of UXP UI rendering here… the reason being is that they are just simple fields. Unfortunately in JS getters and setters are not enumerable by default (or when using get/set syntax), and that means fields like innerHTML don’t show. This is why you may often get objects that render as {}.
When CDT lands (it’s enabled in the panels prerelease, btw), this may be less of an issue, since Chrome lets you inspect the object more directly.