从HTML属性名称到DOM属性名称有映射吗？ [英] is there a mapping from HTML property names to DOM propety names?

问题描述

在HTML中

<td colspan=3 style='background-color:pink;' >hello world</td>

但使用Javascript / DOM

but in Javascript / DOM

var td = document.createElement('td');
td.colSpan = 3;
td.style.backgroundColor = 'pink';

是否存在HTML属性和样式到Javascript / DOM属性和样式的映射？

is there a mapping of HTML properties and styles to Javascript/DOM attributes and styles?

了解有关CSS样式的camelBack

understand about camelBack for CSS style

具有一些HTML规范，例如 colspan = 3 ，并使用Javascript实现。因此，需要在HTML属性名称和DOM属性名称之间进行映射。

have some HTML specifications, eg, colspan=3, and implementing them with Javascript. so need a mapping between HTML property name and DOM property names.

好，这是异常属性的映射。

ok, here's a mapping for the abnormal properties. those with a 1::1 mapping and functions are omitted.

html2dom = {
  acceptcharset: 'acceptCharset',
  accesskey: 'accessKey',
  bgcolor: 'bgColor',
  cellindex: 'cellIndex',
  cellpadding: 'cellPadding',
  cellspacing: 'cellSpacing',
  choff: 'chOff',
  class: 'className',
  codebase: 'codeBase',
  codetype: 'codeType',
  colspan: 'colSpan',
  datetime: 'dateTime',
  checked: 'defaultChecked',
  selected: 'defaultSelected',
  value: 'defaultValue',
  frameborder: 'frameBorder',
  httpequiv: 'httpEquiv',
  longdesc: 'longDesc',
  marginheight: 'marginHeight',
  marginwidth: 'marginWidth',
  maxlength: 'maxLength',
  nohref: 'noHref',
  noresize: 'noResize',
  noshade: 'noShade',
  nowrap: 'noWrap',
  readonly: 'readOnly',
  rowindex: 'rowIndex',
  rowspan: 'rowSpan',
  sectionrowindex: 'sectionRowIndex',
  selectedindex: 'selectedIndex',
  tabindex: 'tabIndex',
  tbodies: 'tBodies',
  tfoot: 'tFoot',
  thead: 'tHead',
  url: 'URL',
  usemap: 'useMap',
  valign: 'vAlign',
  valuetype: 'valueType' };

推荐答案

DOM IDL 为方便和一致性，公开了不同的HTML属性。也就是说， COLSPAN -> colSpan 和 CLASS -> className 。 （记住，由于DOM属性区分大小写，因此HTML属性对大小写不敏感）。

The DOM IDL exposes different HTML attributes differently for convenience and consistency. That is, COLSPAN -> colSpan and CLASS -> className. (Remember that HTML attributes are not case-sensitive by virtue of being case-normalized while DOM properties are.)

由于所有标准HTML属性在适当的DOM IDL中列出了 -这是权威来源-然后可以根据提供的定义生成映射。可能需要咨询其他文档以了解特定于供应商或尚未编码的属性。

Since all standard HTML attributes are listed in the appropriate DOM IDL - which is the authoritative source - then a mapping can be generated off of the supplied definitions. Other documentation may need to be consulted for vendor-specific or not-yet-codified attributes.

1.1.3命名约定说：

虽然属性和方法名称简短，信息量大，内部一致并且对类似API的用户熟悉是很好的，但名称也不应与DOM支持的旧式API中的名称冲突实现。此外，OMG IDL和ECMAScript在区分来自不同命名空间的名称的能力方面都存在明显的局限性，这使得避免与短而熟悉的名称命名冲突变得很困难。因此，DOM名称往往很长且具有描述性，以便在所有环境中都是唯一的。

While it would be nice to have attribute and method names that are short, informative, internally consistent, and familiar to users of similar APIs, the names also should not clash with the names in legacy APIs supported by DOM implementations. Furthermore, both OMG IDL and ECMAScript have significant limitations in their ability to disambiguate names from different namespaces that make it difficult to avoid naming conflicts with short, familiar names. So, DOM names tend to be long and descriptive in order to be unique across all environments.

与HTML（和XML）完美结合，有利于内部一致性和通用性。

That is, while the DOM attempts to pair well with HTML (and XML), it favors internal consistency and universal use.

该问题的原始前提是错误，因为 background-color 不是 HTML属性。这是一个CSS属性，它通过 elm.style.backgroundColor 在DOM中公开（请参阅Jospehn Siber关于映射的答案）。

The original premise of the question was incorrect because background-color is not an HTML attribute. It is a CSS property that is exposed in the DOM via elm.style.backgroundColor (see Jospehn Siber's answer for the mapping).

因为 background-color 是 not 的HTML属性，因此不能与HTML属性进行比较，例如 colspan 或 class 。

Because background-color is not an HTML attribute it cannot be compared with HTML attributes such as colspan or class.

这篇关于从HTML属性名称到DOM属性名称有映射吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！