如何遍历某些特定的子节点答案

【问题标题】：how to loop through some specific child nodes如何遍历某些特定的子节点
【发布时间】：2011-03-02 10:07:48
【问题描述】：

我有这个 DOM 树：

<li> 
data ....
  <br>
  data ...
  <img ... />
  <br>
  <script> ... </script>
  <span> data ... </span>
</li>

如何循环遍历上述 li 元素的子元素，这些子元素位于 li 本身和 script 元素之间，即 script 和 span 元素不在循环中... 提前谢谢！！

注意：我不想使用 JQuery，因为我的应用正在使用 Protoype，如果我同时使用它们会与 JQuery 冲突，如果有使用 Prototype 的快速解决方案，我将不胜感激。

【问题讨论】：

标签： javascript html

【解决方案1】：

这样的东西对你有用吗？

var child = liElement.firstChild;
while(child){
    if(child.nodeName.toLowerCase() == 'script'){
        break
    }
    //do your stuff here
    child = child.nextSibling;
}

注意，如果您的示例中的“数据”是字符串，则这些将作为 textNode 的实例存在于子层次结构中。如果您需要对这些东西进行特殊处理，您将需要进行检查，例如

switch(child.nodeType){
case 3:
   //text Node
   break;
case 1:
   //Element node
   break;
default:
    //break;
}

退房 https://developer.mozilla.org/en/nodeType 更多节点类型

【讨论】：

【解决方案2】：

你可以使用 jQuery 选择器：

获取<li>的所有孩子：

$('li').children();

排除不需要的元素：

$('li').children().not('script').not('span');

然后循环选择：

$('li').children().not('script').not('span').each(function(index, element){
    //do sth like hide the element
    $(element).hide();
});

【讨论】：

顺便说一句：jQuery 可以很好地与其他也使用 '$' 的库配合使用。有一个无冲突模式：api.jquery.com/jQuery.noConflict
我已经使用了这种方法（noConflict），但这不是问题，网站在许多页面中崩溃并且没有具体原因，如果我删除 Jquery 库不会发生崩溃..
只是一个选择器库，可以通过下载轻松地为您提供 jQuery 选择器的强大功能，别无其他
嗨 Umair，我在哪里可以单独下载选择器库而不需要整个 JQuery 东西？

【解决方案3】：

这是我为你破解的解决方案：

    $( "li" ).each(function( index ) {
 console.log($(this).find("span:first").text());
});

first span in Li

【讨论】：

【解决方案4】：

你看过 jquery 吗？它有一个非常好的查询语法。我不确定您要循环遍历哪些元素，例如： $('li > img') 将返回所有列表项下的所有图像。查看规范了解更多jquery

【讨论】：

我不能使用 JQuery，因为我在我的应用程序中使用 Prototype，如果我使用它会与 JQuery 冲突。
好的，看到你的编辑了。对于执行 -1 的人，我在 JeHelia 添加他无法使用 JQuery 的事实之前回答了。