我应该使用setAttribute将属性添加到元素吗? [英] Should I use setAttribute to add properties to an element?
问题描述
我正在使用JavaScript阅读(各种)页面上的元素，并在需要时对其进行修改.当我确实修改其中一个元素时，我想在后面留下一个标记以表示我已对其进行修改.然后，稍后，我可以通读页面上的元素，如果找到该标记，则知道它是我修改过的元素之一，可以恢复它.这是对我有用的代码，但建议我应该使用setAttribute和getAttribute而不是我在做什么:
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
}
}
问题是，我应该为wasModifiedByMe布尔值和origViz属性使用setAttribute和getAttribute吗?我目前不认为我需要为自己添加的属性使用属性功能.
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>
，然后在chrome开发工具的elements标签中，我看到mydiv将div属性显示为publicproperty属性.不过，它没有显示出秘密财产.
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.
就像我想的那样.使用setAttribute设置的HTML属性也反映在javascript对象中，但是当不使用setAttribute并将属性添加到javascript宿主对象时，该反映不会相反(HTML的 TO 属性).这就是我要的.我不希望我隐藏的每个元素突然显示一个wasHiddenByMe ="true"属性(尽管它有优点，但我看到了).
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
- 主机对象没有规则，
- 发生碰撞的可能性(另请参见不要修改对象您不拥有)和
- IE DOM很烂
- Host objects have no rules,
- Chance of collisions (see also Don’t modify objects you don’t own) and
- IE DOM is a mess
与您有关.但是，如果您知道这些问题，我认为这是可以的-这是将自定义对象与DOM元素相关联的唯一方法.
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.
如果您可以使用HTML5技术，则还可以查看数据
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.
这篇关于我应该使用setAttribute将属性添加到元素吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
