Should I use setAttribute to add properties to an element?

StackOverflow https://stackoverflow.com/questions/10833853

質問

I'm reading through elements on the page (of all kinds) with JavaScript and modifying them if needed. When I do modify one of the elements, I want to leave a marker behind to say that I modified it. Then later, I can read through the elements on the page and if I find that marker, I know it's one of the elements I modified and can restore it. Here's code that's working for me, but it was suggested I should be using setAttribute and getAttribute rather than what I'm doing:

//hide some elements, after first leaving a marker and saving orig. val
for(var i=0; i<elements.length; i++) {
    if(should_i_hide_this_element(elements[i])) {    //external logic unimportant

        elements[i].wasModifiedByMe = true;             //mark element as modified
        elements[i].origViz = elements[i].style.visibility; //save visibility val
        elements[i].style.visibility = "hidden";          //and give it a new val
    }
}

The corresponding code to restore the element values is like this:

for(var i=0; i<elements.length; i++) {
    if(elements[i].wasModifiedByMe) {                 //This is one I modified
        elements[i].style.visibility = elements[i].origViz; //restore original val
        elements[i].wasModifiedByMe = false;          //mark as not modified now
    }
}

The question is, should I be using setAttribute and getAttribute for my wasModifiedByMe boolean and my origViz properties? I don't believe currently that I need to use the attribute functions for my own added properties.

Following thread discussions below, I tried this test:

<!doctype html>
<html>
<body>
<div id="mydiv">DIV</div>
<script>
var elem = document.getElementById("mydiv");
elem.secretproperty = "not_seen_in_elements_tab_in_chrome_dev_tools";
elem.setAttribute("publicproperty","is_visible_in_elements_tab");
</script>
</body>
</html>

and in the elements tab in the chrome dev tools, I saw that mydiv was showing that publicproperty attribute as part of the div. It was NOT showing the secretproperty though.

It's as I thought. Using setAttribute is setting a HTML Attribute that is also reflected in the javascript object, but when NOT using setAttribute and adding a property to the javascript host object, the reflection does not go the other way (TO the HTML attributes). This is what I want. I don't want that every element I've hidden suddenly displays a wasHiddenByMe="true" attribute (although there is merit in that, I see that).

役に立ちましたか？

解決

There are some issues with setting your own properties of DOM elements, covered by this article on perfectionkills.com. It talks about extending DOM element prototypes, but the sections

are relevant to you. Yet, if your are aware of the issues I think it is OK - it is the only way to accociate custom objects to DOM elements.

If you can use HTML5 techniques, you also may have a look at data attributes. For simple boolean markers they may be the superior approach.

他のヒント

For adding attributes to HTML Elements, the W3C standard is setAttribute. You can't use it for element.style.property.

However, setting attributes by simply doing element.*attribute* still works. It's just not a real standard, so it may be better to use setAttribute, but this is up to your preference.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top