关于我为什么做我所做的事情的解释将在底部

// References the only "<ul>" in the document.
var list = document.getElementById("tableOfContents");
function createTOC () {
  // a. This counter will = "1", and will repeat the loop as long as the value is LTG "10", and will increment the counter variable by "1" each time through.
  for (var a = 1; a <= 10; a++) {
    (function(a) {
    // Within the "for" loop, add statements that do the following:
    // b. Set the value of the "headingText" variable to the content of the element with an ID = to the current value of the counter variable ("a").
    var headingText = document.getElementById(a).innerHTML;
   // c. Create a new <li> element and assign it as the value of the "TOCEntry" variable.
    var TOCEntry = document.createElement ("li");
   // d. Set the content of the "TOCEntry" Node to the following: "<a href=#" + i ">" + headingText + "</a>".
    TOCEntry.innerHTML = "<a href='"#" + a + "'">" + headingText + "</a>";
    // e. Add the "TOCEntry" Node as the last child to the list Node.
    list.appendChild (TOCEntry);
  })(a);
 }
}
// Backwards-compatibility event listener
if (window.addEventListener) {
 window.addEventListener ("load", createTOC, false);
}
else if (window.attachEvent) {
 window.attachEvent ("onload", createTOC);
}

<article>
 <h2>United States Bill Of Rights</h2>
 <h3>Table Of Contents</h3>
 <ul id="tableOfContents">
 <!-- The Table Of Contents will appear here. -->
 </ul>
 <h3 id="1">Amendment I</h3>
 <p>Congress shall...</p>
 <h3 id="2">Amendment II</h3>
 <p>A well regulated Militia...</p>
 <h3 id="3">Amendment III</h3>
 <p>No Soldier shall...</p>
 <h3 id="4">Amendment IV</h3>
 <p>The right of the people...</p>
 <h3 id="5">Amendment V</h3>
 <p>No person shall be held...</p>
 <h3 id="6">Amendment VI</h3>
 <p>In all criminal prosecutions...</p>
 <h3 id="7">Amendment VII</h3>
 <p>In Suits at common law...</p>
 <h3 id="8">Amendment VIII</h3>
 <p>Excessive bail shall...</p>
 <h3 id="9">Amendment IX</h3>
 <p>The enumeration in the Constitution...</p>
 <h3 id="10">Amendment X</h3>
 <p>The powers not delegated to the...</p>
</article>

• [getElementsByTagName][1]返回一个HTMLCollection，而不是元素，因此，只有当您显式获取第一个元素时，您使用它来获取目录才可行。（这就是为什么我给TOC一个标识符）
• 在评论中提到，对于没有 var 关键字的循环，不应该使用，但没有解释原因：当没有 var 关键字时，JS 会将名称视为属于现有变量（因为这通常是使用该关键字的变量时）。当JS沿着词法层次结构向上走时，它最终会到达window，如果不存在，它将用该名称创建一个变量。在这种特殊情况下，这不是一个大问题，但是如果您处理很多并发性（这在JS中很常见），for循环很容易开始相互遍历。
• for循环中立即调用的匿名函数存在，因此循环的每个迭代在词法上都与其他迭代分开，因此 TOCEntry 变量不会发生冲突。（headingtext是一个基元字符串，因此将按值传递，因此没有冲突的风险。（此外，事件侦听器现在的行为将更加直观，而不是所有事件侦听器都引用闭包公开的最后一个a值）
• 标题的 ID 是连续的，您的循环循环遍历它们，因此document.getElementById(a)将获取与调用它的迭代相关的任何标题。

此外，i是迭代器的伪标准名称;它应该总是你去的第一个迭代器（虽然这是在你的老师身上，这就是为什么它不在列表中。