title: Should I use setAttribute to add properties to an element?
body: <p>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:</p>
  
  <pre><code>//hide some elements, after first leaving a marker and saving orig. val
  for(var i=0; i&lt;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
      }
  }
  </code></pre>
  
  <p>The corresponding code to restore the element values is like this:</p>
  
  <pre><code>for(var i=0; i&lt;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
      }
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Following thread discussions below, I tried this test:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;body&gt;
  &lt;div id="mydiv"&gt;DIV&lt;/div&gt;
  &lt;script&gt;
  var elem = document.getElementById("mydiv");
  elem.secretproperty = "not_seen_in_elements_tab_in_chrome_dev_tools";
  elem.setAttribute("publicproperty","is_visible_in_elements_tab");
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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 (<em>TO</em> 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).</p>