Закладки на JavaScript

Всем доброго пятничного дня. Как я писал ранее, я изучаю JavaScript по книге Хавербеке. Одно из заданий звучит так:

Интерфейс закладок встречается часто. Он позволяет вам выбирать панель интерфейса, выбирая одну из нескольких торчащих закладок над элементом. В упражнении вам нужно сделать простой интерфейс закладок. Напишите функцию asTabs, которая принимает узел DOM, и создаёт закладочный интерфейс, показывая дочерние элементы этого узла. Ей нужно вставлять список элементов вверху узла, по одному на каждый дочерний элемент, содержащих текст, полученный из атрибута data-tabname. Все, кроме одного из дочерних элементов, должны быть спрятаны (при помощи display style none), а текущий видимый узел можно выбирать нажатием кнопки. Когда оно заработает, расширьте функционал, чтобы у текущей активной кнопки был свой стиль.

В общем на Ваш суд, интересно будет послушать мнение каждого, и профессионала и любителя

function asTabs(node) { 
  if (node.nodeType !== 1) return "Not elementNode"; 
  node.className = "wrapper"; 
  var divs = Array.prototype.filter.call(node.children, function(elem) { 
    return elem.nodeName === "DIV"; 
  }); 
  Array.prototype.forEach.call(divs, function(child, index) { 
    var button = document.createElement("button"); 
    button.textContent = child.getAttribute("data-tabname"); 
 
    if (index !== 0) child.style.display = "none"; 
    else child.style.display = ""; 
    button.className = "tab_passive"; 
 
    button.addEventListener("click", function(event) { 
      var buttonsClassNames = document.getElementsByClassName("tab_active"), 
        childrenWrapper = node.children; 
      Array.prototype.forEach.call(buttonsClassNames, function(button) { 
        if (button.className === "tab_active") button.className = "tab_passive"; 
      }); 
      Array.prototype.forEach.call(childrenWrapper, function(childWrapper) { 
        if (childWrapper.style.display === "") childWrapper.style.display = "none"; 
      }); 
      child.style.display = ""; 
      event.target.className = "tab_active"; 
    }); 
    document.body.insertBefore(button, node); 
  }); 
  document.getElementsByClassName("tab_passive")[0].className = "tab_active"; 
} 
 
asTabs(document.querySelector("#wrapper"));

.wrapper { 
  width: 350px; 
  height: 150px; 
  border: 4px solid firebrick; 
  background: lemonchiffon; 
  padding: 5px; 
} 
 
.tab_active { 
  border: 4px solid firebrick; 
  border-bottom: 0; 
  border-radius: 4px 4px 0 0; 
  background: lemonchiffon; 
  margin-right: 5px; 
  width: 100px; 
  outline:none; 
} 
 
.tab_passive { 
  border: 4px solid firebrick; 
  border-bottom: 0; 
  border-radius: 4px 4px 0 0; 
  background: teal; 
  margin-right: 5px; 
  width: 100px; 
  outline:none; 
}

<div id="wrapper"> 
  <div data-tabname="one">Закладка один</div> 
  <div data-tabname="two">Закладка два</div> 
  <div data-tabname="three">Закладка три</div> 
</div>

Вот как вариант исправленных, только стили надо переделывать

function asTabs(node) {
    if(node.nodeType!==1) return "Not elementNode";
    node.className = "wrapper";
    var elementsTab = Array.prototype.filter.call(node.children,function(elem){
        if(elem.getAttribute("data-tabname")) return elem.nodeName;
        else elem.innerHTML = "";
    });
    var bookmarks = document.createElement("div");
    bookmarks.className = "bookmarks";
    node.insertBefore(bookmarks, node.firstElementChild);
    Array.prototype.forEach.call(elementsTab, function(child,index){
        var bookmark = document.createElement("button");
        bookmark.textContent = child.getAttribute("data-tabname");
        if(index!==0) child.style.display = "none";
        else child.style.display = "";
        bookmark.className = "tab_passive";
        bookmark.addEventListener("click",function(event){
            var bookmarkClassNames = node.getElementsByClassName("tab_active");
            Array.prototype.forEach.call(bookmarkClassNames,function(button){button.className="tab_passive"});
            Array.prototype.forEach.call(elementsTab,function(childWrapper){childWrapper.style.display = "none"});
            child.style.display = "";
            event.target.className = "tab_active";
        });
        bookmarks.appendChild(bookmark);
    });
    node.firstElementChild.firstElementChild.className="tab_active";
}

Но теперь до меня дошло, что я не понимаю откуда событие "помнит" что такое node и что такое child