-1

I execute

document.getElementsByTagName('img')[0]['!abc'] = "abc";

to set "!abc" attribute to one image element.

When I try to get this attribute in content script, the result is null.

But when I try to get it in document console, the result is "abc".

Leslie Wu
  • 760
  • 3
  • 13
  • 29
  • Your code doesn't set an attribute. It sets a property on the DOM element. (Frequently called an "expando" property.) While some properties are reflected attributes, that's a small set of properties *defined* by the DOM. Your expandos don't magically become attributes. – T.J. Crowder Jun 08 '13 at 09:22
  • I execute "document.getElementsByTagName('img')[0]['!abc']" in content script, it returns null. but the result is "abc" in document console with the same code. My goal is to get, not to set.@T.J.Crowder – Leslie Wu Jun 08 '13 at 09:41
  • @ Leslie: If your got is to get, why are you showing a set operation? – T.J. Crowder Jun 08 '13 at 09:42
  • @LeslieWu Make sure that you are [looking at the correct context in the developer tools](http://stackoverflow.com/a/15197993/938089). If it's not a matter of debugging, but implementation, you have to [inject code in the page](http://stackoverflow.com/questions/9515704/building-a-chrome-extension-inject-code-in-a-page-using-a-content-script/9517879#9517879), which handles the "get" operations for your content script (see this [detailed answer](http://stackoverflow.com/questions/10526995/can-a-site-invoke-a-browser-extension/10527809#10527809) by apsillers). – Rob W Jun 08 '13 at 11:21
  • @T.J.Crowder I am developing a testing tool, I want to get all the attribute or property in an element. I give a set operation for anyone to reproduce this issue. The problem is if some element has an "!abc" property in DOM, I cannot get it in content script. – Leslie Wu Jun 09 '13 at 02:40
  • @LeslieWu: The terminology you use in your question is incorrect, which is why you got incorrect answers. The Q. is also misleading (because you only show a set op -- if you're having trouble with a get, show that too). And I very much doubt that `document.getElementsByTagName('img')[0]['!abc']` is returning `null` as you say in a comment above. (It could be, I just doubt it.) Much more likely to be returning `undefined`. So my recommendation: 1. Fix the terminology ("property", not "attribute"), 2. Show how you're retrieving it, 3. Show where you think you're getting `null` (screenshot?). – T.J. Crowder Jun 09 '13 at 05:55

2 Answers2

1

Use setAttribute();

var myImg = document.getElementsByTagName('img')[0];
myImg.setAtrribute("attrib_name", value);
pvnarula
  • 2,771
  • 18
  • 22
  • +1 It's more powerful, though, if you actually use the example from the post. E.g.: `document.getElementsByTagName('img')[0].setAttribute("!abc", "abc");` Also if you explain why the OP's code didn't work. – T.J. Crowder Jun 08 '13 at 09:24
  • I execute "document.getElementsByTagName('img')[0]['!abc']" in content script, it returns null. but the result is "abc" in document console with the same code. My goal is to get, not to set. – Leslie Wu Jun 08 '13 at 09:42
  • Well it could give you mixed results I have not used this approach ever. The above approach is the one preferred. – pvnarula Jun 08 '13 at 10:05
0

You can define a function that do like:

function setElementAttrbute(tagname,index,attrName,value){

    var elements = document.getElementsByTagName(tagname); // returns kind of array
    elements[index].setAttribute(attrName,value); 

}

When you would like to use array-methods like (slice,push,pop,shift,unshift), you can cast it by doing this:

document.getElementsByTagName(tagname); // returns kind of array that does not have got array.-methods like above.
elements = Array.prototype.slice.call(elements); // returns real array
Blauharley
  • 4,186
  • 6
  • 28
  • 47