2

在这里，我有两个函数setImage1，分别为属性和对象的属性添加setImage2值 。srcaltdieImg

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

所以我的问题是，是否有必要使用第一个使用 setAttribute 方法的解决方案这两个函数的结果是相同的。

第二个问题我什么时候必须使用 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
4

3 回答 3

3

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

例如 ：

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

这使得

<img parentnode="a">

尽管

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

只是让

<img>

（你可以看到它使用outerHTML）

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

于 2013-09-12T07:53:53.530 回答
1

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

于 2013-09-12T07:52:11.593 回答
0

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

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

 <input value="1" />

然后你改变它的 value属性：

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

可能实现不同，但是现在这个输入的属性是2，但是value 属性还是1。但是会显示提交为2。http://jsfiddle.net/EhJUt/

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

于 2013-09-12T08:19:18.413 回答