Question

例如，我可以使用

遍历Element.prototype中的属性

Object.getOwnPropertyNames(Element.prototype).forEach(/*does the thing*/)

但我似乎无法找到一种方法来迭代元素的属性，如＆＃34; audio＆＃34;。例如，尝试迭代HTMLAudioElement只会产生一个带有[＆＃34;构造函数＆＃34;]的数组，当它肯定有比这更多的属性时。有谁知道怎么做？

更多背景：我正在尝试构建一个代理类，它将值传递给元素但触发事件。该类需要具有与它作为代理的元素相同的属性。

Answer 1

HTMLAudioElement没有特定的属性，因为它从其父级，HTMLMediaElement和HTMLElement继承了它的属性。

Object.getOwnPropertyNames(HTMLMediaElement)

输出：

["length", "name", "arguments", "caller", "prototype", "NETWORK_EMPTY",
 "NETWORK_IDLE", "NETWORK_LOADING", "NETWORK_NO_SOURCE", 
 "HAVE_NOTHING", "HAVE_METADATA", "HAVE_CURRENT_DATA", 
 "HAVE_FUTURE_DATA", "HAVE_ENOUGH_DATA", "toString"]

https://developer.mozilla.org/en/docs/Web/API/HTMLAudioElement

正如@self在下面的评论中指出的那样，你也可以使用：

Object.getOwnPropertyNames(HTMLAudioElement.__proto__)

获得相同的结果，而无需知道HTMLAudioElement继承自哪个类。

Answer 2

在 Firefox 中，我能够使用 for in 获取音频元素的所有属性。

for (let prop in Audio.prototype) {
    console.log(prop);
}

我用它构建了一个数组，然后可以在 Chrome 和 Firefox 中使用。

const audioProps = ["load", "canPlayType", "fastSeek", "play", "pause", "addTextTrack", "mozCaptureStream", "mozCaptureStreamUntilEnded", "mozGetMetadata", "setMediaKeys", "seekToNextFrame", "error", "src", "currentSrc", "crossOrigin", "networkState", "preload", "buffered", "readyState", "seeking", "currentTime", "duration", "paused", "defaultPlaybackRate", "playbackRate", "played", "seekable", "ended", "autoplay", "loop", "controls", "volume", "muted", "defaultMuted", "textTracks", "srcObject", "mozPreservesPitch", "mozAudioCaptured", "mozFragmentEnd", "mediaKeys", "onencrypted", "onwaitingforkey", "NETWORK_EMPTY", "NETWORK_IDLE", "NETWORK_LOADING", "NETWORK_NO_SOURCE", "HAVE_NOTHING", "HAVE_METADATA", "HAVE_CURRENT_DATA", "HAVE_FUTURE_DATA", "HAVE_ENOUGH_DATA", "click", "focus", "blur", "title", "lang", "dir", "innerText", "hidden", "accessKey", "accessKeyLabel", "draggable", "contentEditable", "isContentEditable", "spellcheck", "nonce", "offsetParent", "offsetTop", "offsetLeft", "offsetWidth", "offsetHeight", "oncopy", "oncut", "onpaste", "style", "onabort", "onblur", "onfocus", "onauxclick", "onbeforeinput", "oncanplay", "oncanplaythrough", "onchange", "onclick", "onclose", "oncontextmenu", "oncuechange", "ondblclick", "ondrag", "ondragend", "ondragenter", "ondragexit", "ondragleave", "ondragover", "ondragstart", "ondrop", "ondurationchange", "onemptied", "onended", "onformdata", "oninput", "oninvalid", "onkeydown", "onkeypress", "onkeyup", "onload", "onloadeddata", "onloadedmetadata", "onloadend", "onloadstart", "onmousedown", "onmouseenter", "onmouseleave", "onmousemove", "onmouseout", "onmouseover", "onmouseup", "onwheel", "onpause", "onplay", "onplaying", "onprogress", "onratechange", "onreset", "onresize", "onscroll", "onseeked", "onseeking", "onselect", "onstalled", "onsubmit", "onsuspend", "ontimeupdate", "onvolumechange", "onwaiting", "onselectstart", "ontoggle", "onpointercancel", "onpointerdown", "onpointerup", "onpointermove", "onpointerout", "onpointerover", "onpointerenter", "onpointerleave", "ongotpointercapture", "onlostpointercapture", "onmozfullscreenchange", "onmozfullscreenerror", "onanimationcancel", "onanimationend", "onanimationiteration", "onanimationstart", "ontransitioncancel", "ontransitionend", "ontransitionrun", "ontransitionstart", "onwebkitanimationend", "onwebkitanimationiteration", "onwebkitanimationstart", "onwebkittransitionend", "dataset", "tabIndex", "onerror", "getAttributeNames", "getAttribute", "getAttributeNS", "toggleAttribute", "setAttribute", "setAttributeNS", "removeAttribute", "removeAttributeNS", "hasAttribute", "hasAttributeNS", "hasAttributes", "closest", "matches", "webkitMatchesSelector", "getElementsByTagName", "getElementsByTagNameNS", "getElementsByClassName", "insertAdjacentElement", "insertAdjacentText", "mozMatchesSelector", "setPointerCapture", "releasePointerCapture", "hasPointerCapture", "setCapture", "releaseCapture", "getAttributeNode", "setAttributeNode", "removeAttributeNode", "getAttributeNodeNS", "setAttributeNodeNS", "getClientRects", "getBoundingClientRect", "scrollIntoView", "scroll", "scrollTo", "scrollBy", "insertAdjacentHTML", "querySelector", "querySelectorAll", "attachShadow", "requestFullscreen", "mozRequestFullScreen", "requestPointerLock", "animate", "getAnimations", "before", "after", "replaceWith", "remove", "prepend", "append", "replaceChildren", "namespaceURI", "prefix", "localName", "tagName", "id", "className", "classList", "part", "attributes", "scrollTop", "scrollLeft", "scrollWidth", "scrollHeight", "clientTop", "clientLeft", "clientWidth", "clientHeight", "scrollTopMax", "scrollLeftMax", "innerHTML", "outerHTML", "shadowRoot", "assignedSlot", "slot", "onfullscreenchange", "onfullscreenerror", "previousElementSibling", "nextElementSibling", "children", "firstElementChild", "lastElementChild", "childElementCount", "getRootNode", "hasChildNodes", "insertBefore", "appendChild", "replaceChild", "removeChild", "normalize", "cloneNode", "isSameNode", "isEqualNode", "compareDocumentPosition", "contains", "lookupPrefix", "lookupNamespaceURI", "isDefaultNamespace", "nodeType", "nodeName", "baseURI", "isConnected", "ownerDocument", "parentNode", "parentElement", "childNodes", "firstChild", "lastChild", "previousSibling", "nextSibling", "nodeValue", "textContent", "ELEMENT_NODE", "ATTRIBUTE_NODE", "TEXT_NODE", "CDATA_SECTION_NODE", "ENTITY_REFERENCE_NODE", "ENTITY_NODE", "PROCESSING_INSTRUCTION_NODE", "COMMENT_NODE", "DOCUMENT_NODE", "DOCUMENT_TYPE_NODE", "DOCUMENT_FRAGMENT_NODE", "NOTATION_NODE", "DOCUMENT_POSITION_DISCONNECTED", "DOCUMENT_POSITION_PRECEDING", "DOCUMENT_POSITION_FOLLOWING", "DOCUMENT_POSITION_CONTAINS", "DOCUMENT_POSITION_CONTAINED_BY", "DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC", "addEventListener", "removeEventListener", "dispatchEvent"];

如何遍历html元素原型的属性名称？

2 个答案: