哪些HTML元素的属性值可通过对象属性访问？技术问询

Great question! Let's walk through all the HTML element properties that give you an object-based interface (with sub-properties accessible via dot notation) just like style and dataset do. These are all DOM API abstractions that wrap complex element features into structured objects for easier manipulation.

1. Element.style #

You already mentioned this one, but let's elaborate: it returns a CSSStyleDeclaration object tied to the element's inline styles. You use camelCase versions of CSS properties to read/write styles directly:

// Set inline font size
myElement.style.fontSize = "24px";
// Get current inline background color
const currentBg = myElement.style.backgroundColor;

Note: This only works for inline styles—if you need computed styles (from stylesheets or inheritance), use getComputedStyle(myElement) instead.

2. Element.dataset #

This returns a DOMStringMap object that lets you interact with the element's data-* custom attributes. The sub-properties are the data- prefix stripped, converted to camelCase:

<div id="product" data-product-id="456" data-product-category="electronics"></div>

const product = document.getElementById("product");
// Read custom attributes
const productId = product.dataset.productId; // "456"
const category = product.dataset.productCategory; // "electronics"
// Set a new custom attribute
product.dataset.inStock = "true";

3. Element.styleMap (Modern Browsers) #

A more flexible modern alternative to style, this returns a StylePropertyMap object. It supports standard CSS property names (no camelCase needed) and handles typed values (like numbers for lengths) instead of just strings:

// Set a CSS variable
myElement.styleMap.set("--primary-color", "purple");
// Get a style value (returns a typed CSSStyleValue)
const primaryColor = myElement.styleMap.get("--primary-color");

4. HTMLFormElement.elements #

For <form> elements, the elements property returns an HTMLFormControlsCollection (an object-like collection) that lets you access form fields by their name attribute as a sub-property:

<form id="signupForm">
  <input type="email" name="userEmail">
  <input type="checkbox" name="subscribe">
</form>

const form = document.getElementById("signupForm");
// Access fields directly by name
const emailInput = form.elements.userEmail;
const subscribeCheckbox = form.elements.subscribe;

5. Media Element Properties (Audio/Video) #

For <audio> and <video> elements, properties like audioTracks, videoTracks, and textTracks return object-based collections (e.g., AudioTrackList) that let you access individual tracks and their properties:

const video = document.getElementById("myVideo");
// Access the first video track's label
const firstTrackLabel = video.videoTracks[0].label;
// Check if text tracks are enabled
const hasEnabledTextTracks = video.textTracks.some(track => track.mode === "showing");

Honorable Mention: Element.attributes #

While it's a collection (a NamedNodeMap), you can access individual attribute nodes via dot notation (e.g., myElement.attributes.id) or methods like getNamedItem(). It's less commonly used than the others above, but fits the "object-based sub-access" criteria.

内容的提问来源于stack exchange，提问作者Coffee'd Up Hacker