Question

我遇到了两种获取属性值的方法：首先是：

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

另一个：

document.getElementById("id").className;

两者都可用于设置和获取类值或任何其他值。是否有特殊情况？一个比另一个快吗？他们有什么不同？为什么甚至有2种方法呢？

Answer 1

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

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

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

＆＃13;

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);
  
};

＆＃13;

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

＆＃13;

Answer 2

如果您的代码可以更改不同的属性，那么您将使用 document.getElementById("id").getAttribute(myVar); //myVar can be "class" document.getElementById("id").setAttribute(myVar, myValue); //myValue can be "newClass"

如果你知道你要改变你可以使用的课程 document.getElementById("id").className;

编辑：正如上面的答案中所指出的，属性是在HTML上设置的，当更改属性时，属性通常也会发生变化。

Answer 3

在一个问题中提出4个问题不是一个好主意。

是否有特别优先考虑的情况？

通常设置属性是首选，因为它更简单，历史更可靠。

一个比另一个快吗？

逻辑上，设置一个属性应该比调用一个方法更快，但差异可能忽略不计。

他们有什么不同？

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

为什么甚至有2种方法呢？

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

设置一个不是标准同名属性反映的属性不会创建该名称的属性（除了一些例外，该属性与其相关属性的名称不同，例如class / className和为/ htmlFor）。

有许多关于属性和属性的文章，很多文章都被jQuery attr 与 prop 问题所破坏，但如果你阅读得足够多，你就会得到图片。

Answer 4

一个比另一个快吗？

我刚看到一个网页（https://jsperf.com/style-vs-classname/4）测试了实现此目标的3种不同方式的速度

// css: .hide { display: none }
document.getElementById("id").style.display = "none";
document.getElementById("id").setAttribute( "class", "hide" );
document.getElementById("id").className( "hide" );

早在2010年，IE 6-7和Opera的第一个替代方案最快。

在我的浏览器（Ubuntu Chromium 64位上的Chrome 47.0.2526.73）中，第一种方法比第二种方案快2.7倍，比第三种方案快4倍。

亲自试试吧！

className与get / setAttribute方法

4 个答案: