Question

需要一些帮助。我正在使用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元素。可能是什么原因？我在这里做错了吗？

Answer 1

您收到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。

Answer 2

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

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

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

Answer 3

您使用的是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>

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

3 个答案: