获取子节点的方法有：

 方法  说明
 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. Tomcat 环境部署网站. 帆软平台部署.

    主要内容. 需要使用Tomcat 部署 帆软报表平台(以下简称报表平台). 报表平台可以集成到网站, 也可独立部署. 此处是独立部署.即通过 网址:域名 独立访问这个报表平台. -- 技术要点 Tom ...

  2. MapReduce源码刨析

    MapReduce编程刨析: Map map函数是对一些独立元素组成的概念列表(如单词计数中每行数据形成的列表)的每一个元素进行指定的操作(如把每行数据拆分成不同单词,并把每个单词计数为1),用户可以 ...

  3. MongoDB基础命令

    MongoDB 入门命令 查看当前数据库 > show dbs admin 0.000GB config 0.000GB local 0.000GB > -- use databaseNa ...

  4. CVPR 2019 | 用异构卷积训练深度CNN：提升效率而不损准确度

    对于深度卷积神经网络而言,准确度和计算成本往往难以得兼,研究界也一直在探索通过模型压缩或设计新型高效架构来解决这一问题.印度理工学院坎普尔分校的一篇 CVPR 论文则给出了一个新的思路——使用异构的卷 ...

  5. 初级安全入门——SQL注入的原理与利用

    工具简介 SQLMAP: 一个开放源码的渗透测试工具,它可以自动探测和利用SQL注入漏洞来接管数据库服务器.它配备了一个强大的探测引擎,为最终渗透测试人员提供很多强大的功能,可以拖库,可以访问底层的文 ...

  6. list 列表 和一些操作方法

    1. 什么是列表 定义: 能装对象的对象 在python中使用[]来描述列表, 内部元素用逗号隔开. 对数据类型没有要求 列表存在索引和切片. 和字符串是一样的. 2. 相关的增删改查操作(重点) 添 ...

  7. sql生成随机不重复字符串 可指定长度

    存储过程: create procedure dbo.GetRandStr () output) AS BEGIN ), ), @ss varchar DECLARE @I INTEGER, @cou ...

  8. MIME Type和Content-Type

    告知浏览器:资源的媒体类型MIME Type: application/json HTTP协议中的媒体类型,由 Web服务器告知浏览器的,更准确地说,是通过响应头中的Content-Type表示.Co ...

  9. js分钟数转天-时-分

    //js格式化分钟转为天.时.分 function formatMinutes(minutes) { )); ? Math.floor((minutes - day * ) / ) : Math.fl ...

  10. Oracle exp/imp 导出/导入

    set NLS_LANG=AMERICAN_AMERICA.AL32UTF8 exp jjhd_test/11111111@a_syj file="d:\jjhd_test.dmp" ...