遍历DOM树，获取子节点

时间：2021-04-04 23:28:43

获取子节点的方法有：

 方法  说明
 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&lpar;&rpar;&comma;parent&lpar;&rpar;&comma;closest&lpar;&rpar;之间的区别

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

  9. JS之获取子节点

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

随机推荐

  1. 代码的坏味道（5）——数据泥团&lpar;Data Clumps&rpar;

    坏味道--数据泥团(Data Clumps) 特征 有时,代码的不同部分包含相同的变量组(例如用于连接到数据库的参数).这些绑在一起出现的数据应该拥有自己的对象. 问题原因 通常,数据泥团的出现时因为 ...

  2. codeforces 723E：One-Way Reform

    Description There are n cities and m two-way roads in Berland, each road connects two cities. It is ...

  3. 响应式布局（Responsive layout，RL）的简单Demo

          ★背景:       响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决 ...

  4. &lpar;转&rpar;js的左右滑动触屏事件

    原文:http://blog.sina.com.cn/s/blog_6a0a183f0100zsfk.html (2012-01-20 08:55:53) 转载▼ 标签: 移动设备 触屏事件 杂谈 分 ...

  5. SpringMVC经典系列-13使用SpringMVC处理Ajax请求---【LinusZhu】

    注意:此文章是个人原创,希望有转载须要的朋友们标明文章出处,假设各位朋友们认为写的还好,就给个赞哈,你的鼓舞是我创作的最大动力,LinusZhu在此表示十分感谢,当然文章中如有纰漏,请联系linusz ...

  6. CentOS安装常用软件

    下载第三方库rpmforge,找到合适自己版本的rpmforge下载,用以支持NTFS格式硬盘和MP3格式音频或其他 http://pkgs.repoforge.org/rpmforge-releas ...

  7. &lbrack;Django&rsqb; Base class in the model layer

    In the model layer, the Model class is the base class while the ModelBase class is metaclass.

  8. 为什么 dll 改名字之后无法使用

    有人直接把dll名字改了,我的程序运行出错,说这是我程序的问题,难道真是这样吗? 总感觉直接改dll名字不对,但哪儿不对呢,带着这样的疑惑研究了一下,重新做了一下试验,结果程序抛出了错误: Could ...

  9. linux 命令 创建 Django 项目 使用路由返回首页界面

    1.安装mysql数据库 2.安装pymysql.pip3 install pymysql 3.首先使用cd 命令进入创建的项目文件夹 4.使用django-admin startproject we ...

  10. php -- 目录、路径、磁盘

    ----- 028-dir.php ----- <!DOCTYPE html> <html> <head> <meta http-equiv="co ...

相关文章