将提醒DOM位置的代码

Code that will alert DOM Position

本文关键字：代码 位置 DOM      更新时间：2023-09-26

可能重复：
JQuery检查DOM 中的重复ID

假设我有一个代码：

<div id="one">
    <div id="two"></div>
    <div id="three"></div>
</div>
<div id="four">
    <div id="two"></div>
</div>
<div id="one">
  <p id="five">
    <span id="three"></span>
  </p>
</div>

（具有不同DOM项的大型HTML代码）。

目标：

是否可以构建一个jQuery或JavaScript代码，提醒我在该职位的文档中id的重复。此处位置的含义如下；

> duplicate id: 'div#two' > within `div#four`, `div#one` 
> duplicate id: 'div#one' > parent of `p#five`
> duplicate id: 'span#three' > within `p#five` and such a pattern.

注：

我发现了一个和我相似的问题，但不完全一样。因为这与之前提出的任何问题都不重复。所以不要关闭它。

如果你只想根除重复的id，你应该验证你的html。

http://validator.w3.org/

这将提醒您重复id，并确保您的代码格式正确。

注意：阅读所有注意事项。这段代码的目的是说明问题的本质，即纯JS解决方案是不可取的。

首先，希望这能说明，有时可行的事情并不总是可取的。有很多很棒的工具可以提供更好的错误检查，比如W3C的验证器或使用它的插件/扩展，比如Chrome的有效性。一定要用那些。

但无论如何，这里有一个极简主义的例子。请注意，没有一个DOM引用它自己的行号，因此您必须将documentElement中的整个innerHTML属性作为字符串获取。匹配该字符串的部分，然后在匹配位置将其分解为子字符串，然后计算回车次数。显然，这段代码可以进行广泛的重构，但我认为重点是明确的（对于那些想要它的人来说也是jsFiddle示例，尽管行数将是fubar）：

编辑

我已经更新了正则表达式，使其与<div>id="a"</div>等示例不匹配。尽管如此，如果OP想要纯JS，他将不得不依赖于此版本或一个相当复杂的版本，该版本具有非常小的好处。底线是DOM节点和行号之间没有关联。你必须自己弄清楚ID属性在哪里，然后追踪它们的位置。这极易出错。作为编程实践，它可能有一定的意义，但在现实世界中是非常不可取的。最好的解决方案——我在这里第四次重申——是一个扩展或插件，它只会将您的页面发送到W3C这样的真正验证器。

下面的代码被设计成"只工作"，因为没有好的方法来完成OP的要求。

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Test</title>
  </head>
  <body>
    <div id="a"></div>
    <div id="a"></div> <!-- catches this -->
    <div id="b"></div>
    <div>id="a"</div>
    <div id="c"></div>
    <div id="c"></div> <!-- catches this -->
    <span>[id="a"]</span>
    <script>
    var re = /<[^>]+id="(.*?)"[^>]*>/g; // match id="..."
    var nl = /'n'r?/g;                  // match newlines
    var text = document.documentElement.innerHTML;
    var match;
    var ids = {};                       // for holding IDs
    var index = 0;
    while (match = re.exec(text)) {
      // Get current position in innerHTML
      index = text.indexOf(match[0], index + 1);
      // Check for a match in the IDs array
      if (match[1] in ids) {
        // Log line number based on how many newlines are matched 
        // up to current position, assuming an offset of 3 -- one
        // for the doctype, one for <html>, and one for the current
        // line
        console.log("duplicate match at line " +
          (text.substring(0, index).match(nl).length + 3));
      } else {
        // Add to ID array if no match
        ids[match[1]] = null;
      }
    }
    </script>
  </body>
</html>
相关文章：