javascript - 使用 getElementsByClassName 而不是 getElementById 修改脚本以追加子项

Question

我正在使用下面的脚本来生成目录。

它当前将目录附加到 ID。我想使用 getElementsByClassName 在同一页面上添加两次目录。

我知道我需要循环遍历元素数组，但我就是无法获得正确的语法。

非常感谢任何帮助。

// External code for generating a simple dynamic Table of Contents
function generateTableOfContents(els) {
    var anchoredElText,
        anchoredElHref,
            ul = document.createElement('UL');

  document.getElementById('table-of-contents').appendChild(ul);

    for (var i = 0; i < els.length; i++) {
    anchoredElText = els[i].textContent;
        anchoredElHref = els[i].querySelector('.anchorjs-link').getAttribute('href');
    addNavItem(ul, anchoredElHref, anchoredElText);
  }
}

function addNavItem(ul, href, text) {
  var listItem = document.createElement('LI'),
          anchorItem = document.createElement('A'),
      textNode = document.createTextNode(text);

  anchorItem.href = href;
  ul.appendChild(listItem);
  listItem.appendChild(anchorItem);
  anchorItem.appendChild(textNode);
}

Example of getElementById

Answer 1

您将在那里遇到问题。单个元素只能附加到文档一次。如果您尝试将其附加到其他位置，它将首先从当前位置删除。

避免这种情况的一种可能的解决方案是使用 cloneNode .

使用 ES5 forEach ，您的函数的可能版本是:

function generateTableOfContents(els) {
    var anchoredElText, anchoredElHref,
        ul = document.createElement('UL');

    for (var i = 0; i < els.length; i++) {
        anchoredElText = els[i].textContent;
        anchoredElHref = els[i].querySelector('.anchorjs-link').getAttribute('href');
        addNavItem(ul, anchoredElHref, anchoredElText);
    }

    // We have to use call here, because getElementsByClassName returns an array-like, not an actual array
    [].forEach.call(document.getElementsByClassName('table-of-contents'), function(el) {
        el.appendChild(ul.cloneNode(true));
    });

    // Alternative to the 3 above lines using a for
    // var tocs = document.getElementsByClassName('table-of-contents');
    // for (var i = 0; i < tocs.length; i++) {
    //  tocs[i].appendChild(ul.cloneNode(true));
    // }
}