为什么不对DOM元素函数应用工作？

Question

Sample code

document.body.getAttribute.apply(this,['id']);
document.body.setAttribute.apply(this,['id','test']);

The error
Firefox:

TypeError: 'setAttribute' called on an object that does not implement interface Element.

Chrome:

Uncaught TypeError: Illegal invocation

Answer 1

apply is working just fine. It is calling the setAttribute function and inside that function the value of this is what you set it to).

We can't see what it is you are setting it to because you are passing this without showing us what its value is.

Clearly, this is not a DOM element, so you can't set a DOM attribute on it.

If you had called document.body.getAttribute() then inside setAttribute the value of this would be document.body , which is a DOM element.

You can see it working if this is a DOM element in this example:

 document.querySelector('div').setID = function () { document.body.setAttribute.apply(this,['id','test']); } document.querySelector('div').setID(); document.querySelector('div').innerHTML = document.querySelector('div').id; 

 <div></div> 

Answer 2

This works :

document.body.setAttribute.apply(document.body,['id','test']);
document.body.getAttribute.apply(document.body,['id']);

In your code (if you execute outside any function), this refers to the window element, so your code is equivalent to :

window.setAttribute("id","test");

which is not allowed

Answer 3

Is there a specific reason why you need apply ? As this is your window object. Applying an id to it is probably not very useful or even allowed. From what I know, I would go with this method:

document.body.getAttribute('id');
document.body.setAttribute('id','test');
document.body.getAttribute('id');

Feel free to correct me :)