我的javascript代码出了什么问题?

时间:2015-07-30 18:56:23

标签: javascript html css twitter-bootstrap

需要一些帮助。 我正在使用bootstrap CSS来设计我的网站。

这是我的第一个代码段:

<ul class="nav nav-pills nav-stacked border-right" id="clearFilter"   style="display:none">
<li class="text-uppercase bold-text" onclick="showChild(event)"><a href="#" class="li-head-color">Clear Filter<span class="glyphicon glyphicon-plus float-right" aria-hidden="true"></a></li>
</ul>

如果我检查这个ul元素的长度。它显示了3. ul中只有1个li。

然后,当我尝试使用javascript向此ul添加li时,长度仅增加1。

这是javascript代码:

var ul = document.getElementById("clearFilter");
var li = document.createElement("li");
var anchor = document.createElement("a");   
var span = document.createElement("span");
span.setAttribute("class","glyphicon glyphicon-remove-circle float-right");
anchor.appendChild(document.createTextNode(str));
anchor.appendChild(span);
anchor.setAttribute("href","#");
li.appendChild(anchor);
li.setAttribute("onclick","removeFilter(event)");
li.setAttribute("style","display:none");
ul.appendChild(li);

那么可能是什么原因。 我的代码中还有3个这样的ul元素。 ul的长度大于实际存在的li元素。 可能是什么原因?我在这里做错了吗?

3 个答案:

答案 0 :(得分:3)

您收到text nodes<ul><li></ul>之间的文字)以及<li>个节点。

如果您使用的是childNodes属性,请根据需要使用以下代码过滤掉文本节点(IE9 +)。

var children = ul.childNodes;
children = Array.prototype.slice.call(children).filter(function(element) { return element.nodeType == 1; });

有关代码和演示的信息,请参阅this jsFiddle,有关详情,请参见this SO discussion

答案 1 :(得分:1)

我认为你的问题是,当你得到&#34;长度&#34;在<ul>元素中,结果返回3个子元素 - <li><a><span>元素。

以下JavaScript返回长度为1的数组 - 这是您之后的目标吗?

document.getElementById('clearFilter').getElementsByTagName('li').length;

答案 2 :(得分:1)

您使用的是childNodes还是children

childNodes`返回值的文档:

  

NodeList对象,表示节点集合。返回集合中的节点按照它们在源代码中的显示进行排序

children返回值的文档:

  

实时HTMLCollection对象,表示元素节点的集合。返回集合中的元素按照它们在源代码中的显示进行排序

对我来说,这似乎和泥一样清晰。但只是尝试一下,children属性将空格忽略为“文本节点”,而childNodes包含额外节点时找到哪个空格。这基本上意味着在您的情况下,差异在于,当您编写代码时,您包含空格,这意味着DOM解析器正在创建额外的文本节点。在javascript中创建节点时,不会添加任何空格。

示例说明如果没有空格,无论您使用childNodes还是children属性,都会得到相同的结果。

function childLengthDemo(id){
  console.log(document.getElementById(id).children.length); // 1, 1
  console.log(document.getElementById(id).childNodes.length); // 1, 3
  
  var ul = document.getElementById(id);
  var li = document.createElement("li");
  var anchor = document.createElement("a");   
  var span = document.createElement("span");
  span.setAttribute("class","glyphicon glyphicon-remove-circle float-right");
  anchor.appendChild(document.createTextNode("Another Clear Filter")); // your variable, str, was undefined
  anchor.appendChild(span);
  anchor.setAttribute("href","#");
  li.appendChild(anchor);
  li.setAttribute("onclick","removeFilter(event)");
  li.setAttribute("style","display:none");
  ul.appendChild(li);
  
  console.log(document.getElementById(id).children.length); // 2, 2
  console.log(document.getElementById(id).childNodes.length); // 2, 4
}

childLengthDemo('clearFilter-nowhitespace'); // same for both children and childNodes property
childLengthDemo('clearFilter-whitespace'); // different for children and childNodes property
<ul class="nav nav-pills nav-stacked border-right" id="clearFilter-nowhitespace" style="display:none"><li class="text-uppercase bold-text" onclick="showChild(event)"><a href="#" class="li-head-color">Clear Filter<span class="glyphicon glyphicon-plus float-right" aria-hidden="true"></span></a></li></ul>

<ul class="nav nav-pills nav-stacked border-right" id="clearFilter-whitespace" style="display:none">
  <li class="text-uppercase bold-text" onclick="showChild(event)">
    <a href="#" class="li-head-color">
      Clear Filter
      <span class="glyphicon glyphicon-plus float-right" aria-hidden="true" style="display:none"></span>
    </a>
  </li>
</ul>