className 与 get/setAttribute 方法

Question

我遇到过两种获取属性值的方法：第一种是：

document.getElementById("id").getAttribute("class");
document.getElementById("id").setAttribute("class", "newClass");

另一个：

document.getElementById("id").className;

两者都可用于设置和获取类值或任何其他值。是否存在更适合的特定情况？一个比另一个快吗？它们有何不同？为什么有两种方法呢？

Answer 1

他们做不同的事情。获取.getAttribute('name')属性，同时.name获取属性。

属性是创建元素时 HTML 代码中的属性设置的初始值。该属性是当前值，自创建元素以来可能已更改。

对于某些属性，属性会随属性一起更改，但对于某些属性，属性和属性是单独的值：

window.onload = function(){
  
  var el = document.getElementById("id");

  console.log("Attribute: " + el.getAttribute("value"));
  console.log("Property: " + el.value);

  console.log('Changing property');
  el.value = 'b';

  console.log("Attribute: " + el.getAttribute("value"));
  console.log("Property: " + el.value);
  
};

<input type="text" id="id" value="a"></div>

Answer 2

一次提出 4 个问题并不是一个好主意。

\n\n

\n

是否存在更适合的特定情况？

\n

\n\n

一般来说，设置属性是首选，因为它更简单并且历史上更可靠。

\n\n

\n

一个比另一个快吗？

\n

\n\n

从逻辑上讲，设置属性应该比调用方法更快，但差异可能可以忽略不计甚至不相关。

\n\n

\n

它们有何不同？

\n

\n\n

setAttribute设置属性值。属性反映在属性中。从历史上看，设置属性并不总是会更改属性，反之亦然。

\n\n

\n

为什么有两种方法呢？

\n

\n\n

属性在 JavaScript 之前就存在于 HTML 中，您可以将它们视为标记中的内容。DOM 属性主要是属性的反映。例如，曾几何时，表单控件的 value 属性反映默认值，而 value 属性反映其实际值。但其中许多差异正在消失。

\n\n

设置不反映标准 same\xe2\x80\x93named 属性的属性不会创建该名称的属性（除了几个例外，即该属性与其相关属性具有不同的名称，例如 class/className和 for/htmlFor)。

\n\n

有很多关于属性和属性的文章，很多都被 jQuery attr和prop问题破坏了，但是如果你读得足够多，你就会明白。

\n