Question

使用JavaScript，我希望通过添加id属性来标记网页中的所有元素（或至少链接和按钮），例如custom-id =＆＃34; 12345＆＃34;。< / p>

我关注的是如何为每个元素维护这些ID唯一且静态的，特别是在将来（开发人员或业务部门更改某些元素）时，页面可以包含更多或更少的元素，并且只需遍历文档元素即可分配id可能会改变元素和id的顺序，而不具备静态IDS的优势。

我想再次做的是，即使页面层次结构发生多次变化，也要为同一个元素使用相同的ID。

标记页：

<!DOCTYPE html>
<html>
<body>

<h1 custom-id = "1">My First Heading</h1>

<p custom-id = "2">My first paragraph.</p>

</body>
</html>

当元素发生变化时，它会出错：

<!DOCTYPE html>
<html>
<body>

<p custom-id = "1">My first paragraph.</p>

</body>
</html>

正确应该是：

<!DOCTYPE html>
<html>
<body>

<p custom-id = "2">My first paragraph.</p>

</body>
</html>

脚本如下所示：

var all = document.getElementsByTagName("*");

for (var i=0, max=all.length; i < max; i++) {
    all[i].setAttribute("data-custom-id", i);
}

全部谢谢！河底

Answer 1

我认为你正在寻找类似于.is（）选择器（jQuery）的东西

$('#theid').is($('p')); ==> true

这样，你可以在条件中使用它，将正确的数据标识添加到正确的元素标记中，如上所述。

非jQuery解决方案（来自http://youmightnotneedjquery.com/）

var matches = function(el, selector) {
  return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);
};

matches(el, '.my-class');

或..

el === otherEl

希望有所帮助。

Answer 2

我想我找到了它：

现在，我想到另一种方式。生成一个唯一的键来识别元素本身的元素，并将其提供给TMS，我认为这应该有用..

示例：

该插件应始终在Google Analytics规则之前运行。

Step1：循环和读取元素：

<h1>My First Heading</h1>

Step2：转换为String：

"<h1>My First Heading</h1>"

Step3：将字符串转换为Key !! （例如使用cryptoJS）：

"dhked543e5de"

然后将其添加到元素：

<h1 custom-elm-key = "dhked543e5de">My First Heading</h1>

如何向网站元素注入第二个元素ID

2 个答案: