获取子节点的方法有：

 方法  说明
 children()  选取子节点，可以带过滤参数。但只能选择子节点，不能选择孙子节点。
 find()  选取子节点，可以带过滤参数。可以选择子节点及孙子节点。

children()示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>子节点</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
        <style>
            .box{
                border: 1px solid blueviolet;
                padding: 1px;
                margin-bottom: 12px;
            }
        </style>
    </head>
    <body>
        <div>
            <ul id="ul">
                <li id="a">油条</li>
                <li id="b">包子</li>
                <li id="c">米饺</li>
                <li id="d"><a>鱼粉</a></li>
            </ul>
        </div>
        <script>
            $('div').children("*").attr("class", "box");
        </script>
    </body>
</html>

find()示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>子节点</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
        <style>
            .box{
                border: 1px solid blueviolet;
                padding: 1px;
                margin-bottom: 12px;
            }
        </style>
    </head>
    <body>
        <div>
            <ul id="ul">
                <li id="a">油条</li>
                <li id="b">包子</li>
                <li id="c">米饺</li>
                <li id="d"><a>鱼粉</a></li>
            </ul>
        </div>
        <script>
            $('div').find("ul").attr("class", "box");
        </script>
    </body>
</html>

遍历DOM树，获取子节点的更多相关文章

  1. 遍历DOM树，过滤节点

    jQuery还提供以下方法来过滤节点.  方法  说明  first()  获取第一个,示例 $('li').last()  last()  获取最后一个,示例$('li').last()  eq() ...

  2. 函数遍历DOM树

    //获取页面中的根节点--根标签   var root=document.documentElement;//html   //函数遍历DOM树   //根据根节点,调用fn的函数,显示的是根节点的名 ...

  3. JS高级---遍历DOM树

    遍历DOM树  第一个函数: 给我根节点, 我会找到所有的子节点: forDOM(根节点)  获取这个根节点的子节点  var children=根节点的.children  调用第二个函数  第二个 ...

  4. 问题：jQuery中遍历XML文件时候，获取子节点children不支持的情况（已解决）

    问题描述: 今天在写一个基于 jquery 的读取xml文件的程序时候,需要遍历xml的节点. 代码片段如下: function parse_xml_node(parent,result){ // r ...

  5. 拷贝和遍历DOM树

    一.浅拷贝: 拷贝就是复制,就相当于把一个对象中的所有内容,复制一份给另一个对象,直接复制, 或者说,就是把一个对象的地址给了另外一个对象,他们的指向相同,两个对象之间有相同的属性或者方法,都可以使用 ...

  6. 先序遍历DOM树的5种方法

    DOM树由文档中的所有节点(元素节点.文本节点.注释节点等)所构成的一个树结构,DOM树的解析和构建是浏览器要实现的关键功能.既然DOM树是一个树结构,那么我们就可以使用遍历树结构的相关方法来对DOM ...

  7. java list根据id获取子节点

    工作中因业务需求,将数据库中的树状结构的数据根据父节点获取所有的子节点 实现思路 1.获取整个数据的list集合数据 2.将数据分组,java8 list有groupby分组,java8之前的自己遍历 ...

  8. jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

    http://www.poluoluo.com/jzxy/201312/253059.html 在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的AP ...

  9. JS之获取子节点

    在JS中获取子节点有以下几种方法: firstElementChild.firstChild.childNodes和children 我们通过一个例子来分析这几种方法的区别(获取div下的p标签) 输 ...

随机推荐

  1. CRM 总是弹出登录窗口

    最近测试机总是会出现登录窗口,也能正常进入系统,但是会反复出现. 环境:CRM2016 问题:总是弹出登录窗口 解决方法:

  2. CRM N:1 关系或者字段无法删除

    点开详细信息查看那些实体引用了该组件.查看内容如下: 1 查看窗体上有无该字段; 2 查看视图中有无该字段; 3 查看试图的 筛选条件; 4 查看试图的 查找列; 5 发布之后再试试.

  3. delphi正则表达式学习笔记（三）

    Delphi 中经常使用的正则表达式 在 Delphi 中使用正则表达式, 目前 PerlRegEx 应该是首选, 准备彻底而细致地研究它.  官方网站: http://www.regular-e x ...

  4. 生成excel的时候要用双引号。。。。。

    <?php header("Content-type:application/vnd.ms-excel"); header("Content-Disposition ...

  5. 「ZJOI2015」地震后的幻想乡

    /* 难度最低的解法 钦定一个边集S作为前S小如果这个边集假如第|S|小这条边时加入时S恰好联通, 那么我们就能够算出他的贡献了 恰好联通 = 加了这条边之前不连通方案数 - 加了这条边之后不连通方案 ...

  6. es6基础(6)--数组扩展

    //数组扩展 { let arr=Array.of(3,4,6,7,9,11);//可以是空 console.log('arr=',arr);//[3,4,6,7,9,11] } { //Array. ...

  7. Ubuntu安装MyEclise16 过程差不多

    选择好安装路径,和workpace路径,可能会因为工作空间放的位置不太对,导致myeclipse出现问题. 1.Ubuntu安装MyEclise10 不知道为什么网上会有那么多安装过程,还有配置目录和 ...

  8. pom格式

    参考: https://www.jianshu.com/p/0e3a1f9c9ce7 https://blog.csdn.net/u012152619/article/details/51485297 ...

  9. CMD定时倒数

    修改if %count%==20 goto finish改变秒数 CMD: mode con: cols=80 lines=25color 4ftitle Please WaitSET /P var= ...

  10. tomcat gzip

    ----------- HTTP 压缩可以大大提高浏览网站的速度,它的原理是,在客户端请求网页后,从服务器端将网页文件压缩,再下载到客户端,由客户端的浏览器负责解压缩并浏览.相对于普通的浏览过程HTM ...