Javascript 何时访问属性（相对于属性）？

据我所知，人们几乎总是希望访问DOM属性，而不是HTML属性

---

那么，罕见的有用例外是什么呢？在什么情况下访问HTML属性比访问DOM属性更好？

有时属性不会映射到属性中的更改

一个例子是复选框的

checked

属性/属性

演示：

---

…而ID属性/属性将保持同步：

演示：

自定义属性通常根本不映射。在这些情况下，需要获取属性

---

可能更有用的情况是文本输入

<input type="text" value="original">

---

一个罕见的例外是

元素的属性可能与表单中的元素冲突。例如，考虑下面的HTML：

<form id="theForm" method="post" action="save.php">
    <input name="action" value="edit">
</form>

这是不幸的；如果不存在此映射，则会更好，因为表单的

元素

属性已经包含由

名称

键入的所有表单元素。我想我们得感谢网景公司

现场演示：

使用属性的其他场合：

• 访问自定义属性时，例如

• 当序列化DOM时，您需要原始HTML中的值作为输入属性，例如

  value

  和

  checked

---

我只能提出另外两种情况，即访问/设置属性会带来好处 超过财产

样式属性：

在不允许使用任何框架的情况下，可以使用“样式属性”一次设置多个样式，如下所示：

elem.setAttribute( "style", "width:100px;height:100px;" );

而不是这样做：

elem.style.width = "100px";
elem.style.height = "100px";

或者这个：

var styles = {width: "100px", height: "100px"}, style;

for( style in styles ) {
elem.style[style] = styles[style];
}

请注意，设置样式属性将覆盖上一个样式属性。也许写下来更好 一个多样式设置器函数

Href属性：

A href属性通常包含“/products”之类的值，但该属性将包含解析的url，如： “”而不是您真正想要的：“/products”。所以如果你想用它做些动态的事情 链接，然后读取href属性而不是属性会更好，因为它具有您想要的值

更新 我突然发现了另外两个用途，我确信还有更多类似的用途

如果要查看某个元素是否设置了自定义选项卡索引，最简单的方法是查看该元素是否具有该属性。自违约以来

.tabIndex

-属性的值取决于元素，无法轻松用于查看元素是否具有自定义tabIndex

查看元素是否具有自定义的

.maxLength

属性。这也无法从属性中看到：

document.createElement("input").maxLength
//524288

---

如果不处理属性，就无法判断值

524288

是否有意存在。

Ok。但这为什么有用呢？属性在这里似乎很重要。@Randomblue：只有在需要获取原始值的情况下。我不认为这是一种常见的情况。您可能想提到属性本质上是一种“初始”状态。关于

HTMLInputElement.defaultChecked

（以及它本质上是属性值的方式）的简介将是锦上添花：）。@MattMcDonald:好主意。我会更新的。虽然我说的是“初始状态”，但我认为你不一定暗示它是持久的。它是默认状态，而不是初始状态（我也犯了这个错误）。如果更改

值

属性，然后重置表单，则输入的值将恢复为新的属性值+1“这个答案很有用（再次单击以撤消）”谢谢，这是一个信息。这个映射是Netscape为了加快采用JavaScript而在JavaScript 1.1（Netscape 3.0）中犯的错误之一：语言应该简单易用。竞争和向后兼容性要求在MSHTML和更高版本的DOM实现中具有相同的映射。所以这里的经验法则是：1。不要将控件命名为与窗体对象属性相同的名称；例如，永远不要使用“操作”或“提交”的名称。2.不要为元素发明新属性（除非是XHTML，并且您知道自己在做什么）。3.永远不要扩充主机对象，如元素对象。@PointedEars:Full-ACK，正如您可能说的。很高兴在堆栈溢出上看到您。请温柔一点：）

elem.setAttribute（“style”，“width:100px；height:100px；”）

在IE的旧版本或兼容模式下的新版本中不起作用，因此我会避免在一般web中使用。

<form id="theForm" method="post" action="save.php">
    <input name="action" value="edit">
</form>

var form = document.getElementById("theForm");

// Alerts HTMLInputElement in most browsers
alert( form.action );

// Alerts "save.php"
alert( form.getAttribute("action") );

// Alerts "post" because no input with name "method" exists
alert( form.method ); 

elem.setAttribute( "style", "width:100px;height:100px;" );

elem.style.width = "100px";
elem.style.height = "100px";

var styles = {width: "100px", height: "100px"}, style;

for( style in styles ) {
elem.style[style] = styles[style];
}

document.createElement("input").maxLength
//524288