Home/ Questions/Q 8008997
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T18:18:53+00:00

I’m reading through elements on the page (of all kinds) with JavaScript and modifying

  • 0

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).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0