当有更好的方法时，使用 setAttribute 方法有什么意义

What is the point to use the setAttribute method when there is better way

本文关键字：方法 什么 setAttribute 使用 更好      更新时间：2023-09-26

在这里，我有两个函数setImage1和setImage2来添加一个值 src属性和dieImg对象的alt属性。

我发现第二个解决方案比第一个解决方案更容易setImage2更短。

所以我的问题是，在您使用的第一个解决方案时使用第一个解决方案是否有任何意义setAttribute metod这两个函数的结果是相同的。

第二个问题 什么时候必须使用 setAttribute 方法？ 

function setImage1(dieImg) {
  var dieValue = Math.floor(1 + Math.random() * 6);
  dieImg.setAttribute("src", "img/die" + dieValue + ".png");
  dieImg.setAttribute("alt", "die image with " + dieValue + " spot(s)");
} // end function setImage1

function setImage2(dieImg) {
  var dieValue = Math.floor(1 + Math.random() * 6);
  dieImg.src = "img/die" + dieValue + ".png"
  dieImg.alt = "die image with " + dieValue + " spot(s)");
} // end function setImage2

当您想要设置不能是节点属性的属性时，它很有用（因为已经有一个具有该名称的属性）。

例如：

var element = document.createElement('img');
element.setAttribute('parentNode', 'a');

这使得 

<img parentnode="a">

而 

var element = document.createElement('img');
element['parentNode'] = 'a';

只是让

<img>

（您可以使用outerHTML查看它）

今天，有了data-*属性，它就不那么重要了。

大多数情况下，您可以使用 object.attribute = value 。你应该使用 setAttribute 的时刻是你将属性的名称作为变量的时候。

属性和属性之间存在细微差别。DOM 节点有一个 attributes 对象，其中保存属性。它们还具有直接属于节点的属性。 attributes通常与 HTML 源代码相关联，而属性可能会在运行时更改。

假设您的代码中有一个输入元素：

 <input value="1" />

然后更改其值属性：

var input = document.getElementsByTagName('input')[0];
input.value = 2;
console.log( input.value == input.getAttribute('value') );
// false

它可能因实现而异，但现在此输入的 value 属性为 2，但属性仍为 1。但它将显示并提交为 2。http://jsfiddle.net/EhJUt/

有些属性不能直接操作，比如@dystroy响应中的parentNode，而你可以对属性做任何你想做的事情。

相关文章：