我应该使用 setAttribute 向元素添加属性吗?

Should I use setAttribute to add properties to an element?

本文关键字：添加 属性 元素 setAttribute 我应该      更新时间：2023-09-26

我正在使用JavaScript阅读页面上的元素（各种），并在需要时对其进行修改。当我修改其中一个元素时，我想留下一个标记，说我修改了它。然后，我可以通读页面上的元素，如果我找到那个标记，我知道它是我修改的元素之一，并且可以恢复它。这是对我有用的代码，但有人建议我应该使用 setAttribute 和 getAttribute 而不是我正在做的事情：

//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
    }
}

恢复元素值的相应代码如下所示：

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吗？我目前不认为我需要对我自己添加的属性使用属性函数。

在下面的线程讨论之后，我尝试了这个测试：

<!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 开发工具的元素选项卡中，我看到 mydiv 将该公共属性显示为div 的一部分。不过，它没有显示秘密属性。

正如我想的那样。使用 setAttribute 是设置一个 HTML 属性，该属性也反映在 javascript 对象中，但是当不使用 setAttribute 并向 javascript 主机对象添加属性时，反射不会走另一条路（TO HTML 属性）。这就是我想要的。我不希望我隐藏的每个元素突然显示一个wasHiddenByMe="true"属性（尽管这有优点，但我看到了）。

设置自己的 DOM 元素属性存在一些问题，本文将介绍 perfectionkills.com。它谈到了扩展 DOM 元素原型，但部分

  • 主机对象没有规则，
  • 碰撞几率（另请参阅不要修改不属于您的对象）和
  • IE DOM 一团糟

与您相关。然而，如果您意识到这些问题，我认为这是可以的 - 这是将自定义对象与 DOM 元素协调的唯一方法。

如果你可以使用HTML5技术，你也可以看看数据属性。对于简单的布尔标记，它们可能是更好的方法。

为了向HTML元素添加属性，W3C标准是setAttribute。您不能将其用于 element .style。 property .

但是，只需执行 .* attribute * element即可设置属性仍然有效。它只是不是一个真正的标准，所以最好使用 setAttribute ，但这取决于您的喜好。

相关文章：