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