Question

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

我发现第二个解决方案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

Answer 1

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

例如：

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

这使得

<img parentnode="a">

而

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

只是制作

<img>

（您可以使用outerHTML）

查看

今天，使用data-*属性，它的相关性较低。

Answer 2

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

Answer 3

属性和属性之间存在细微差别。 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，而您可以使用属性执行任何操作。

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

3 个答案: