微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > 循环、函数、获取dom元素方法 dom的遍历方法, 实例演示dataset, classList对象的使用
博主信息
博文 21
粉丝 0
评论 0
访问量 27894
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
循环、函数、获取dom元素方法 dom的遍历方法, 实例演示dataset, classList对象的使用
N.
原创
1350人浏览过
循环的所有形式必须全部熟悉并实例演示

上代码:

  1. <!DOCTYPE html>
  2. <html lang="">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       const age = [1, 2, 3, 4, 5];
  11.       console.log(age.length);
  12.       let i = 0;
  13.       // 入口判断
  14.       while (i < age.length) {
  15.         // i的值为索引，i的值为0代表第一个，为1代表第二个，依次递增
  16.         console.log(age[i + 4]);
  17.         i++;
  18.       }
  19.       //   出口判断，先执行，再判断
  20.       let z = 0;
  21.       do {
  22.         console.log(age[z]);
  23.         z++;
  24.       } while (z > age.length);
  25.       //   for (循环变量的初始化; 循环条件; 更新循环条件){... }
  26.       // length是索引数量
  27.       for (let z = 0; z < age.length; z++) {
  28.         if (z < 3) {
  29.           console.log(age[z]);
  30.         }
  31.       }
  32.       console.log("----------");
  33.       for (let z = 0; z < age.length; z++) {
  34.         if (z >= 3) break;
  35.         {
  36.           // break意思是跳出循环，我现在设定的是当z的值大于等于3时跳出
  37.           // 意思也就是当打印出对应索引的数值大于3时自动跳出循环，
  38.           // 也就是只循环到前三个，也就是 1  2  3时停止循环，
  39.           // 1  2  3  对应的索引时  0  1  2
  40.           console.log(age[z]);
  41.         }
  42.       }
  43.       console.log("-----------");
  44.       for (let z = 0; z < age.length; z++) {
  45.         // 比如当我设置只取偶数时，单数跳出循环，只打印偶数
  46.         // %号时除的意思，除以2 余0 加！意思不等于，意思被2整除时余数不等于0跳过本次循环
  47.         // 也就是只取偶数，加！号应注意是两个等于号，
  48.         if (z % 2 !== 0) continue;
  49.         {
  50.           // continue意思是跳过本次循环，
  51.           console.log(age[z]);
  52.         }
  53.       }
  54.       console.log("-----------");
  55.       for (let z = 0; z < age.length; z++) {
  56.         // 比前我设置只取奇数，偶数跳出循环，只打印奇数
  57.         // %号时除的意思，除以2 余0 意思被2整除时余数等于0跳过本次循环
  58.         // 注意这里是三个等于号
  59.         if (z % 2 === 0) continue;
  60.         {
  61.           // continue意思是跳过本次循环，
  62.           console.log(age[z]);
  63.         }
  64.       }
  65.       console.log("-----------");
  66.       const ming = {
  67.         name: "czy",
  68.         id: 456,
  69.         email: "1923834525@qq.com",
  70.       };
  71.       //   for (键名/属性 in 对象) {...}
  72.       //   键名和属性名字是可以自定义的  对象名字是创建好的
  73.       // 里面let后面跟的是属性，属性里的键名可以自定义
  74.       for (let shuxing in ming) {
  75.         console.log(shuxing, ming[shuxing]);
  76.       }
  77.       console.log("-----------");
  78.       //   array.forEach(function (值, 索引, 数组) {});
  79.       //   第一个值是值，第二个是索引，第三个是数组，
  80.       age.forEach(function (canshu, suoyin, shu) {
  81.         console.log(canshu, suoyin, shu);
  82.         // 第一个值是必须选的  其他都是可选的
  83.       });
  84.       console.log("-----------");
  85.       // for - of: 不能遍历自定义对象
  86.       // v: 数组中的某一个成员
  87.       //   for -of : 直接取出数组的值
  88.       for (let v of age) {
  89.         console.log(v);
  90.       }
  91.     </script>

上截图：

函数的所有形式,箭头函数,实例演示
内容都在代码里，上代码！

  1. <!DOCTYPE html>
  2. <html lang="">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>函数练习</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       function czy() {
  11.         console.log("欢迎您", czy.name);
  12.       }
  13.       czy();
  15.       ///////////////////////////////////////////////////////////////////
  16.       console.log("--------------");
  17.       function czy1(name) {
  18.         console.log("欢迎您！", name);
  19.       }
  20.       czy1("小白白");
  22.       ///////////////////////////////////////////////////////////////////
  23.       console.log("--------------");
  24.       //   声明一个函数  给一个设好的值  a=1
  25.       function czy2(a = 1) {
  26.         let b;
  27.         // 创建一个变量b，
  28.         // 判断b是否等a等于1，如果不等于，则显示失败 ，如果等于，则提示成功
  29.         b = a === 1 ? "成功" : "失败";
  30.         console.log(b);
  31.       }
  32.       czy2();
  33.       czy2(2);
  35.       ///////////////////////////////////////////////////////////////////
  36.       console.log("--------------");
  37.       function czy3(a, b) {
  38.         console.log(a + b);
  39.       }
  40.       czy3(1, 3);
  41.       //////////////
  43.       // 剩余参数: 使用剩余运算符, ...name
  44.       // ...rest: 将剩余参数全部打包到一个数组变量中
  45.       function czy3(...aaa) {
  46.         //   aaa名字是随便设的，意思是将czy的剩余参数（比方说无限个或者很多）全部打包到数组
  47.         // 累加器初始化: 0
  48.         let res = 0;
  49.         for (let a of aaa) {
  50.           // a的也是随便取得 意思是代表其中的某一个成员
  51.           res += a;
  52.         }
  53.         console.log(res);
  54.       }
  55.       czy3(1, 3.5, 5, 7, 8);
  56.       czy3(11, 22, 66, 77);
  57.       let shu = [11, 22, 33, 44];
  58.       czy3(shu);
  59.       //   只能使用离散的组中不能是数组，数组的话会错误上面shu就是数组
  60.       // ...spread: 将数组展开成一个个独立的单元
  61.       ///
  62.       //    可以这样使用 数组前面加三个点，意思是展开
  63.       czy3(...shu);
  64.       // 这样就可以用了
  65.       ///////////////////////////////////////////////////////////////////
  66.       console.log("--------------");
  67.       function czy4() {
  68.         return [
  69.           { id: 1, name: "aaad" },
  70.           { id: 2, name: "ddda" },
  71.           { id: 3, name: "ccca" },
  72.         ];
  73.       }
  74.       console.log(czy4()[2].name);
  76.       ///////////////////////////////////////////////////////////////////
  77.       console.log("--------------");
  78.       // 4. 函数表达式: 当成匿名函数,用在回调方法
  79.       // 匿名函数,没有名字,通过把它赋值给一个变量,来引用它
  80.       let czy5 = function (name) {
  81.         console.log("哈喽", name);
  82.       };
  83.       czy5("小白白");
  84.       // 删除function , 在参数列表与大括号之间添加一个"=>", 胖箭头
  85.       czy5 = (name) => {
  86.         console.log("哈喽", name);
  87.       };
  88.       czy5("大白白 ");
  89.     </script>
  90.   </body>
  91. </html>

上截图！

实例演示获取dom元素的所有方法，话都在代码里！

  1.  <!DOCTYPE html>
  2. <html lang="">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>获取dom练习</title>
  7.   </head>
  8.   <body>
  9.     <ul id="its">
  10.       <li class="item" name="yi">行一</li>
  11.       <li class="item">行二</li>
  12.       <li class="item" name="san">行三</li>
  13.       <li class="item">行四</li>
  14.       <li class="item">行五</li>
  15.     </ul>
  16.     <script>
  17.       // 通过标签拿
  18.       let its = document.getElementsByTagName("li");
  19.       console.log(its, "这里我通过标签的的方法获得了所有的li，但是没有显示内容");
  20.       // 拿到第二个标签的内容
  21.       console.log(its.item(2).innerHTML, "这里我使用了标签的方法，获得了li中的第三个值 也就是：行三");
  22.       // 使用id的方法获取ul,并显示ul的内容
  23.       let ul = document.getElementById("its");
  24.       console.log(ul.innerHTML, "这里我使用id的方法获取了ul，并且显示ul的内容，就是所有的li");
  25.       // 使用class名称获得dom
  26.       // 因为its之前已经声明过了，所以我这里临时选用aaa作为标识符
  27.       let aaa = document.getElementsByClassName("item");
  28.       console.log(aaa, "这里我是用了class的方法，获得了所有的li，");
  29.       // 现在我想要显示按class获取的第三个并且显示内容
  30.       console.log(aaa.item(2).innerHTML, "这里通过class的方法拿到了第三个值，并显示了内容“行三”");
  31.       // 通过name属性拿到第三个li，并且显示内容；
  32.       const bbb = document.getElementsByName("san");
  33.       console.log(bbb[0], "这里通过name的方法拿到了第三个值,");
  35.       /////////////////////////////
  36.       // 使用选择器来获取;
  37.       // 通过选择器来获取li
  38.       // querySelector返回集合中的第一个值，
  40.       console.log("------------------------");
  41.       li = document.querySelector("li");
  42.       console.log(li, "这里返回了集合中的第一个值");
  43.       // querySelectorALL返回集合中的所有值
  44.       li = document.querySelectorAll("li");
  45.       console.log(li, "这里返回了集合中的的所有值");
  46.       // 使用querySelectorALL返回集合中的前三个值
  47.       li = document.querySelectorAll("li:nth-of-type(-n+3)");
  48.       console.log(li, "这里我使用了伪类选择器结合querySelectorALL的特性返回了前三个值");
  50.       // 模拟jQuery的$()来获取元素
  51.       //  先声明一个函数
  52.       const i = (selector) => document.querySelectorAll(selector);
  53.       console.log(i(".item"), "这里我使用了selector函数的方式按类获取了所有的li");
  54.     </script>
  55.   </body>
  56. </html>

上截图！


实例演示dom的遍历方法,熟悉所有属性，上代码！！

  1. <!DOCTYPE html>
  2. <html lang="">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>dom元素的遍历</title>
  7.   </head>
  8.   <body>
  9.     <ul>
  10.       <li>iten1</li>
  11.       <li>iten2</li>
  12.       <li>iten3</li>
  13.       <li>iten4</li>
  14.       <li>iten5</li>
  15.     </ul>
  16.     <script>
  17.       const ul = document.querySelector("ul");
  18.       //   显示子元素
  19.       console.log(ul.children, "这里显示ul下面的所有子元素");
  20.       //   显示子元素数量
  21.       console.log(ul.children.length, "这里显示了ul子元素的数量，也就是5");
  22.       console.log(ul.childElementCount, "这里使用了另一种方法，ul.childElementCount也是显示ul下面的子元素数量");
  23.       //   获取任何特定位置的子元素
  24.       //   获取ul第三个位置的子元素
  25.       console.log(ul.children[2].innerHTML, "这里显示的是第三个ul的子元素");
  26.       //   获取ul第一个位置的子元素
  27.       console.log(ul.firstElementChild.innerHTML, "这里显示了第一个子元素的内容");
  28.       //   获取ul第一个位置的子元素
  29.       console.log(ul.lastElementChild.innerHTML, "这里显示了最后一个子元素的内容");
  30.       /////////
  31.       //   兄弟之间的
  32.       // 显示第二个ul子元素的前一个兄弟节点
  33.       console.log(
  34.         ul.children[1].previousElementSibling.innerHTML,
  35.         "这里显示第二个ul子元素的前一个兄弟节点，也就是第一个子元素"
  36.       );
  37.       //   下一个兄弟元素节点
  38.       console.log(
  39.         ul.children[1].nextElementSibling.innerHTML,
  40.         "这里显示第二个ul子元素的下一个兄弟节点，也就是第三个子元素"
  41.       );
  43.       console.log("---------------------");
  44.       //   子元素的遍历
  45.       console.log(ul.children, "通过for of的方法获取全部子元素");
  46.       for (let v of ul.children) {
  47.         console.log(v, "通过for of的方法获取全部子元素");
  48.       }
  49.       //   将类数组转成真正的数组使用Array.from的方法
  50.       //   Array.from(ul.children);
  51.       Array.from(ul.children).forEach(
  52.         (item) => console.log(item),
  53.         "使用Array.from(ul.children)将类数组转成真正的数组,然后遍历其子元素"
  54.       );
  55.       // 父节点
  56.       const li = document.querySelector("ul");
  57.       console.log(ul.parentElement, "这里的父节点是body，");
  58.       ul.parentElement.style.background = "red";
  59.       //   背景变成红色，证明其body是父节点
  60.     </script>
  61.   </body>
  62. </html>

上截图！！

实例演示dataset, classList对象的使用 代码如下：

  1.  <!DOCTYPE html>
  2. <html lang="">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>实例演示dataset, classList对象的使用</title>
  7.     <style>
  8.       .yi {
  9.         color: brown;
  10.       }
  11.       .bul {
  12.         color: blue;
  13.       }
  14.       .bgc {
  15.         background-color: darkcyan;
  16.       }
  17.     </style>
  18.   </head>
  19.   <body>
  20.     <p class="yi">好好学习 ，天天掉头发</p>
  21.     <h3>学习使我快乐，奥里给！！</h3>
  22.     <script>
  23.       const p = document.querySelector("p");
  24.       console.log(p.className);
  25.       p.className = "bul";
  26.       const h3 = document.querySelector("h3");
  27.       //   add属性可以叠加
  28.       h3.classList.add("yi");
  29.       h3.classList.add("bgc");
  30.       h3.classList.add("bul");
  31.       //   remove意思是移除
  32.       h3.classList.remove("bul");
  33.       h3.classList.replace("bul", "red");
  34.       h3.classList.toggle("bul");
  35.     </script>
  36.   </body>
  37. </html>

上截图！！

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：剩余参数很有意思 ,多练习
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录