javascript - 获取子节点的标签名称和id

Question

我有一个看起来像这样的 html

<div id="tabs"> 

  <ul id="ul_id"> 
    <li><a href="#tabs-1">tab 1</a></li> 
    <li><a href="#tabs-2">tab 2</a></li> 
    <li><a href="#tabs-3">tab 3</a></li> 
  </ul> 

  <div id="tabs-1"> <p>tab 1 contents</p> </div> 
  <div id="tabs-2"> <p>tab 2 contents</p> </div> 
  <div id="tabs-3"> <p>tab 3 contents</p> </div>

</div>

我需要做的是使此代码动态化，因为选项卡的数量不固定。

到目前为止我所做的是这样的

<script>
  par = document.createElement('p')
  par.setAttribute("text","Adding nodes");
  dib = document.createElement('div')
  dib.setAttribute("id","tabs-4");
  dib.appendChild(par);
  test=document.getElementById("tabs")
  test.appendChild(dib);
  for(i=0; i< test.childNodes.length; i++)
  {
    document.getElementsByName
    if(test.childNodes[i].getAttribute("id") == "ul_id")
      alert("equal");
    else
      alert(test.childNodes[i].getAttribute("id"));
  }
</script>

为<p>创建一个元素

为div创建一个元素

将 div 元素追加(appendChild)到选项卡

现在我坚持获取标签名称和标签子节点的 ID 名称的部分..我需要将新条目添加到列表中。

我该怎么做？

我想使用getElementsByName但这意味着我需要向 ul 添加一个名称属性。我不确定这是否是个好主意，所以我正在考虑其他可能的方法。请帮忙。谢谢

Answer 1

添加选项卡看起来应该作为函数而不是内联完成，因此您可以这样编写

                                 // i is the last id
var addTab = (function (tab_root, nav_root, i) { // IIFE to create closure
    return function (title, contents) {
        var li, a, div, j;
        // get id
        j = ++i; // I put it in it's own var to avoid race conditions
        // create nav
        li = document.createElement('li');
        a = document.createElement('a');
        a.setAttribute('href', '#tabs-' + j);
        if (title) a.appendChild(document.createTextNode(title));
        li.appendChild(a);
        // create tab
        div =  document.createElement('div');
        if (contents) div.appendChild(document.createTextNode(contents));
        // append to document
        tab_root.appendChild(div);
        nav_root.appendChild(li);
        return {tab: div, nav: a, id: j};
    }
}(document.getElementById('tabs'), document.getElementById('ul_id'), 3)());
// invoke IIFE with initials i.e. id 3 for 3 tabs existing

现在

addTab('tab 4', 'tab 4 contents');

返回一个带有属性 tab、nav 和 id 的对象。这使您可以根据需要对不同部分进行更多工作。