什么是错误的我的代码在javascript

What is wrong with my code in javascript?

本文关键字：代码 javascript 我的 错误 什么      更新时间：2023-09-26

这里需要一些帮助。我正在使用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。

然后当我尝试使用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元素。这可能是什么原因呢?我做错什么了吗?

您将获得文本节点(<ul>, <li>和</ul>之间的文本)以及<li>节点。

如果你使用childNodes属性，使用下面的代码过滤掉文本节点，如果需要的话(IE9+)。

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

请参阅jsFiddle获取代码和演示，并参阅SO讨论获取更多信息。

我认为您的问题是，当您获得<ul>元素的"长度"时，结果返回3个子元素- <li>, <a>和<span>元素。

下面的JavaScript返回一个长度为1的数组-这是你想要的吗?

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

您使用的是childNodes还是children ?

childNodes ' return value:

一个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>

相关文章：