案例--根据父子查找,实现案例

最新推荐文章于 2022-07-05 14:47:21 发布
最新推荐文章于 2022-07-05 14:47:21 发布
阅读量104 收藏
点赞数 1
分类专栏： js有趣小案例 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54902466/article/details/117887176
版权

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding: 0 40px;
        }

        p {
            color: #333;
        }

        ul {
            padding: 0 0 0 20px;
        }

        table {
            width: 480px;
            text-align: center;
            border-collapse: collapse;
        }

        table,
        td {
            border: 1px solid #ccc;
        }

        td {
            padding: 10px 0;
        }
    </style>
</head>

<body>
    <!-- 父子关系的查找 -->
    <!-- parentNode属性 返回最近一级的父节点,找不到返回为null -->
    <!-- 子节点的查找 -->
    <!-- childNodes -->
    <!-- 获得所有子节点/包括文本节点(空格/换行)/注释节点等 -->
    <!-- children -->
    <!-- 进货的所有元素的子节点 -->
    <!-- 第一个子节点和最后一个子节点 -->
    <h3>父子关系</h3>
    <hr>

    <button class="btn1">所有的子节点</button>
    <button class="btn2">第1个子节点</button>
    <button class="btn3">最后1个子节点</button>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript 基础</li>
        <li>Web APIs</li>
        <!-- 注释 -->
    </ul>
    <hr>

    <div class="box">
        <p></p>
        <a href=""></a>
        <img src="" alt="">
    </div>

    <table>
        <tr>
            <td width="60">序号</td>
            <td>课程名</td>
            <td>难度</td>
            <td width="80">操作</td>
        </tr>
        <tr>
            <td>1</td>
            <td><span>HTML</span></td>
            <td>初级</td>
            <td><button>变色</button></td>
        </tr>
        <tr>
            <td>2</td>
            <td><span>CSS</span></td>
            <td>初级</td>
            <td><button>变色</button></td>
        </tr>
        <tr>
            <td>3</td>
            <td><span>Web APIs</span></td>
            <td>中级</td>
            <td><button>变色</button></td>
        </tr>
    </table>

    <script>
        // 通过儿子找父亲  -- 找最近的父亲--返回最近的父元素 子元素.parentNode
        let btns = document.querySelectorAll('table button')
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function () {
                this.parentNode.parentNode.style.backgroundColor = 'red'
            })
        }
        // 父亲找儿子  父亲.childNodes (所有子节点 -标签空格,换行,文本,注释)  父亲.children(仅仅获得节点)
        let ul = document.querySelector('ul')
        console.log(ul.childNodes);
        console.log(ul.children);             // 元素节点
        let btn1 = document.querySelector('.btn1')
        let arr = ['red', 'blue', 'gold', 'pink']
        for (let i = 0; i <= arr.length; i++) {
            btn1.addEventListener('click', function () {
                // arr[i] = Math.floor(Math.random() * arr.length)
                for (let j = 0; j < ul.children.length; j++) {
                    ul.children[j].style.color = 'red'
                }
            })
        }
        // 父亲找儿子 最后一个子节点和第一个子节点
        let btn2 = document.querySelector('.btn2')
        let btn3 = document.querySelector('.btn3')
        btn2.addEventListener('click', function () {
            ul.firstElementChild.style.color = 'red'
        })
        btn3.addEventListener('click', function () {
            ul.lastElementChild.style.color = 'red'
        })



    </script>
</body>

</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .erweima {
            width: 149px;
            height: 152px;
            border: 1px solid #000;
            /* background: url(./images/456.png) no-repeat; */
            position: relative;
        }

        .close {
            position: absolute;
            right: -52px;
            top: -1px;
            width: 50px;
            height: 50px;
            /* background: url(./images/bgs.png) no-repeat -159px -102px; */
            cursor: pointer;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="erweima">
        <span class="close"></span>
    </div>

    <hr />
    <div class="erweima">
        <span class="close"></span>
    </div>
    <hr />

    <div class="erweima">
        <span class="close"></span>
    </div>
    <hr />

    <div class="erweima">
        <span class="close"></span>
    </div>
    <script>
        let btns = document.querySelectorAll('.close')
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener('click', function () {
                btns[i].parentElement.style.display = "none"
            })
        }

    </script>
</body>

</html>
Jikel
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html dom取父节点jq,querySelector获得兄弟DOM元素 父级DOM元素 子级DOM元素
weixin_26937243的博客
06-18 2522
一、js定位兄弟，父级，子级元素所有DOM方法varel=document.getElementById('xxx');varel=document.getElementByName('xxx');varels=document.getElementsBy('highlight');varels=document.getElementsBy('td');tips:=====...
巧妙运用v-model实现父子组件传值的方法示例
10-17
主要介绍了巧妙运用v-model实现父子组件传值的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
孩子找父亲 ，父亲找孩子的写法
wkc168的专栏
12-14 880
<br />---今天面试 一面试官说写出孩子找父亲，父亲找孩子的算法 我就试了下<br /> <br /> <br /> <br />1 孩子找父亲<br /> <br />scott@ORCL> select * from ms<br />  2  /<br />ASSEMBLY_ITEM_NO     COMPONENT_ITEM_NO      QUANTITY<br />-------------------- -------------------- ----------<br />A     
javascript选择父亲、儿子、兄弟节点
刘璐菲
06-02 4869
1.Html文档，其中包括id 为myself的节点，以这个节点为基础 去寻找，它的父亲节点，儿子节点，哥哥节点（上一个同级节点），弟弟节点（下一个同级节点） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./test.js" type="text/javascript" charset="utf-8
DOM（三）：节点操作——获取父子兄节点（查）、添加和删除元素节点
weixin_42044763的博客
07-05 5377
节点主要 有父子兄关系语法：子节点.parentNode，得到的是一个元素不是集合 比如我选了一个类名叫zzy的元素 那么要获取zzy 的父节点，只需要zzy.parentNode 注意，得到的时离该元素最近的父节点（亲爹），如果找不到父节点，就返回null这个得到的是所有的子节点，除了我们想要的元素节点，还有换行、空格等文本节点，所以要想拿到元素，就要循环遍历，因为元素节点nodeType是1，属性2，文本3。这个真的是麻烦的一塌糊涂 这个只返回子元素节点，其他的都滚蛋，不错父节点.firstChild和
CSS选择器
weixin_30483013的博客
03-14 269
CSS 选择器 CSS选择器用于选择你想要的元素的样式的模式。 "CSS"列表示在CSS版本的属性定义（CSS1，CSS2，或对CSS3）。 选择器示例示例说明CSS .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * * 选择所有元素...
vue--实现购物车案例
小白小白从不日别的博客
12-13 8268
最终效果图： 这里我们将头部区域、列表区域、以及列表里的增加和减少商品数量的区域、以及底部计算区域分别单独封装为一个组件，如下： 大致实现步骤如下： 1. 安装项目所需的第三方包 通过 npm install bootstrap@4.6.0 --save 安装 bootstrap 通过 npm install less less-loader@5.0.0 --save 安装 less main.js – 引入bootstrap样式： import 'bootstra...
swift-模拟UITabBarController的父子控制器效果实现父子控制器管理
08-15
模拟UITabBarController 的父子控制器效果，实现父子控制器管理
vue.js使用v-model实现父子组件间的双向通信示例
10-15
主要介绍了vue.js使用v-model实现父子组件间的双向通信,结合实例形式分析了vue.js基于v-model父子组件间的双向通信的具体实现技巧,需要的朋友可以参考下
idea--4.父子工程
11-25
idea--4.父子工程idea--4.父子工程idea--4.父子工程idea--4.父子工程idea--4.父子工程
vue父子模板传值问题解决方法案例分析
01-19
本文实例讲述了vue父子模板传值问题解决方法。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> </...
查找带回——子父页面数据交互
weixin_34334744的博客
04-08 191
1 背景 在做应用系统时，经常遇到这样的需求：需要弹出一个页面，选择一些数据，并将数据带回到父页面中去。通常有以下几种情况： 选择单行记录，并且将文本赋值到textbox，将编号赋值到hidden上； 选择单行记录，并且将文本赋值到textbox，将编号赋值到hidden上，最后刷新页面到后台； 选择任意多行记录，并且将文本(逗号隔开)赋值到textbox，将编号(逗号隔开)赋值到hi...
for循环输出1-100之间能被3整除的数的和
热门推荐
weixin_54902466的博客
08-03 1万+
//---------------for循环输出1-100之间能被3整除的数的和---------- let num2 = 0 for (let h = 1; h <= 100; h++) { if(h%3==0){ num2 += h } } console.log(num2);
do-while循环-小案例- 求1-100之间的和
weixin_54902466的博客
08-03 2756
// ------- 求1-100之间的和 ----------- let sum = 0 let i = 0 // 反正是先循环一次,到时候i=0+1,在进行循环 do { sum += i i++ } while (i <= 100) console.log(sum); ...
for循环-求出1-100之间所有偶是数和奇数的和
weixin_54902466的博客
08-03 1663
//---------------求出1-100之间所有偶是数和奇数的和---------- let even = 0 let odd = 0 for (let c = 1; c <= 100; c++) { if (c % 2 === 0) { even += c } else { odd += c } .
do-whlie循环-求1-100之间的偶数的和
weixin_54902466的博客
08-03 1131
// ------- 求1-100之间的偶数的和 ----------- let sum5 = 0 let a = 1 do { if (a % 2 == 0) { sum5 += a } a++ } while (a <= 100) console.log(sum5); ...
案例--JS(原生)渲染表格实现增删改查
weixin_54902466的博客
06-20 809
点击提交 点击删除 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body.
循环案例-求1-100偶数和
weixin_54902466的博客
06-13 730
话不多说,上代码 // ---------求1-100的偶数和--------- let num = 1 let sum2 = 0 while (num <= 100) { // 需要用到if if (num % 2 === 0) { // 当数为偶数的时候,进入到运算之中 sum2 += num } num++
v-model实现父子组件传值
最新发布
02-29
v-model是Vue.js中用于实现父子组件之间双向数据绑定的指令。它可以在父组件中使用v-model来绑定一个值，并将这个值传递给子组件。同时，子组件可以通过修改这个值来更新父组件中的数据。 在父组件中，使用v-model...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值