精华内容
下载资源
问答
  • 没有看到通过某一节点获取子节点以及父节点的所有信息。 很苦恼。 之后在一篇博客上看到通过某一节点获取父节点信息的一条sql语句之后在上面略作修改。 把子节点的也全部获取下来了。 下面我会三种情况的实现sql做...

    最近要实现一个查看历史记录的功能。 在网上查了很多资料。 都是通过某一节点获取父节点或者获取子节点信息。 没有看到通过某一节点获取子节点以及父节点的所有信息。 很苦恼。 之后在一篇博客上看到通过某一节点获取父节点信息的一条sql语句之后在上面略作修改。 把子节点的也全部获取下来了。 下面我会三种情况的实现sql做个记录。 以免以后忘记。希望这个记录对其他码友有些帮助。

    以下是我的表结构:

     

    CREATE TABLE `test_class_table` (
      `class_id` INT(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
      `p_id` INT(11) DEFAULT '0' COMMENT '父节点id',
      `s_id` INT(11) DEFAULT '0' COMMENT '子节点id',
      `class_name` VARCHAR(50) DEFAULT NULL COMMENT '班级名称',
      `class_num_people` INT(50) DEFAULT '0' COMMENT '班级人数',
      `class_grade` VARCHAR(20) DEFAULT NULL COMMENT '所属年级',
      `in_date` DATETIME NOT NULL COMMENT '插入时间',
      `up_date` TIMESTAMP NULL,
      PRIMARY KEY (`class_id`)
    ) ENGINE=MYISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4
    

    现在插入一些简单的假数据:

     

    现在我们来看如何实现的三种情况。

     

    一、通过某id获取迭代父id信息  比如: 获取五年级及以上的班级信息

    
     SELECT t2.* FROM (
    
    SELECT 
    @r AS _id,(SELECT @r := p_id FROM test_class_table WHERE class_id = _id) AS parent_id
    
    FROM (SELECT @r := 5,@l := 0) vars, test_class_table h 
    
    WHERE @r != 0 
    
    ) t1 JOIN test_class_table t2 ON (t1._id = t2.class_id) ORDER BY class_id ASC
                

    结果:

     

    二、通过某id获取迭代子id信息  比如: 获取二年级及以下的班级信息

    SELECT t2.* FROM (
    
    SELECT 
    @r AS _id,(SELECT @r := s_id FROM test_class_table WHERE class_id = _id) AS parent_id
    
    FROM (SELECT @r := 2,@l := 0) vars, test_class_table h 
    
    WHERE @r != 0 
    
    ) t1 JOIN test_class_table t2 ON (t1._id = t2.class_id) ORDER BY class_id ASC

    结果:

     

    三、最后一种情况就是把一个给整合起来。通过某id获取迭代子id以及父id的所有信息 

    比如:给你个三年级的id 获取跟他有关联关系的一到六年级

    SELECT t2.* FROM (
    
    SELECT 
    @r AS _pid,(SELECT @r := p_id FROM test_class_table WHERE class_id = _pid) AS parent_id,
    @i AS _sid,(SELECT @i := s_id FROM test_class_table WHERE class_id = _sid) AS son_id        
    
    FROM (SELECT @r := 3, @i := 3,@l := 0) vars, class_table h 
    
    WHERE @r != 0 OR @i != 0 
    
    ) t1 JOIN test_class_table t2 ON (t1._pid = t2.class_id OR t1._sid = t2.class_id) ORDER BY class_id ASC

     

    结果:

     

    以上就是三种情况的实现。

    注意新手直接复制粘贴。 因为里面的变量问题很容易出错。

    希望对新手有帮助

     

    每次查询变量变更的顺序

    展开全文
  • 获取父元素节点: ... // 再通过parentNode获取父节点 // 得到的是元素最近的父节点,如果找不到返回null console.log(zi.parentNode); </script> 获取子元素节点: <script> // 先获取父元素

    获取父元素节点:

    <script>
            // 先获取子元素
            var zi = document.querySelector('zi');
            // 再通过parentNode获取父节点
            // 得到的是元素最近的父节点,如果找不到返回null
            console.log(zi.parentNode);
        </script>
    

    获取子元素节点:

    <script>
            // 先获取父元素
            var fu = document.querySelector('fu');
            // children 获取所有子元素节点 也是我们实际开发常用的
            console.log(fu.children);
        </script>
    

    通过下标获取子元素节点:

    <body>
        <ul>
            <li>我的是lis1</li>
            <li>我是lis2</li>
            <li>我是lis3</li>
            <li>我是lis4</li>
            <li>我是lis5</li>
        </ul>
        <script>
            // 先获取ul元素
            var ul = document.querySelector('ul');
            // 使用 children[]获取第一个li元素
            console.log(ul.children[0]);
            // 使用 children[]获取最后一个li元素
            console.log(ul.children[ul.children.length - 1]);
            // 使用 children[2]下标获取最后三个li元素
            console.log(ul.children[2]);
        </script>
    </body>
    
    展开全文
  • 总结来说就是:通过DOM获得父节点,兄弟节点进行操作 节点的获取 所有节点都是文档对象的属性 DOM的节点都不是孤立的,因此可以通过DOM之间的相对关系进行访问 获取父节点(parentNode) 方法:使用节点对象...

    引言

    通过前面笔记DOM的介绍,DOM的数据结构是一种树形数据结构,因此可以使用DOM获取对象(元素),然后对该对象的属性以及样式进行设置以及更改,甚至可以动态创建以及删除对象。总结来说就是:通过DOM获得父节点,兄弟节点进行操作
    在这里插入图片描述

    节点的获取

    • 所有节点都是文档对象的属性
    • DOM的节点都不是孤立的,因此可以通过DOM之间的相对关系进行访问

    获取父节点(parentNode)

    方法:使用节点对象,通过节点对象.parentNode获取父节点
    例:

    <body>
    <!--a标签的父节点的父节点-->
        <div id ="box">
            <button id ="btn" class ="btn-class">第一个按钮</button>
            <button class ="btn-class"> 第二个按钮</button>
            <button>第三个按钮</button>
    <!--        a标签父节点-->
            <span id ="span">
    <!--            a标签-->
                <a herf="#">点击打开快乐</a>
            </span>
        </div>
    <script>
        window.onload = function () {
            //获取a节点
            var a = document.getElementsByTagName("a")[0];
            console.log(a);
            //获取a的父节点
            var parentNode = a.parentNode;
            console.log(parentNode);
            //获取a的父节点的父节点
            var parentNode_paretNode = a.parentNode.parentNode;
            console.log(parentNode_paretNode);
        }
    </script>
    </body>
    

    在这里插入图片描述

    通过子节点设置父节点属性

    例:通过子节点设置父节点的背景颜色

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*设置父节点的长宽*/
            #box{
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id ="box">
            <button id ="btn" class ="btn-class">第一个按钮</button>
            <button class ="btn-class"> 第二个按钮</button>
            <button>第三个按钮</button>
            <span id ="span">
                <a herf="#">点击打开快乐</a>
            </span>
        </div>
    <script>
        window.onload = function () {
            //获取a节点
            var a = document.getElementById("span");
            //获取a节点的父节点
            var box =a.parentNode;
            //设置父节点的背景颜色
            box.style.backgroundColor="red";
        };
    </script>
    </body>
    

    获取兄弟节点

    由上面的DOM数据结构图,可以看到根元素html是没有兄弟节点,其他元素都有自己的兄弟节点,因此我们可以使用类似获取父节点的方式,来获取兄弟节点。
    使用方法:

    • 获取上一个兄弟节点:节点.previousSibling
    • 获取下一个兄弟节点:节点.nextSibling
      在火狐谷歌IE9+以后,用nextElementSilbing获取下一个兄弟节点

    例子:

    <body>
        <div id ="box">
            <button id ="btn" class ="btn-class">第一个按钮</button>
            <button class ="btn-class"> 第二个按钮</button>
            <button>第三个按钮</button>
            <p>今天不快乐</p>
            <span id ="span">
                <a herf="#">点击打开快乐</a>
            </span>
            <p>今天很快乐</p>
        </div>
    <script>
        window.onload = function () {
            //获取a节点
            var span = document.getElementById("span");
            //获取a节点的上一个兄弟节点
            var bro1 =span.previousElementSibling || span.previousSibling;
            console.log(bro1);
            //获取a节点的下一个兄弟节点
            var bro2 =span.nextElementSibling || span.nextSibling;
            console.log(bro2);
        };
    </script>
    </body>
    

    在这里插入图片描述

    获取子节点

    获取单个节点
    • 获取第一个子节点:节点.firstChild || 节点.firstElementChild
    • 获取最后一个子节点:节点.lastChild || 节点.lastElementChild

    例:

    <body>
        <div id ="box">
            <button id ="btn" class ="btn-class">第一个按钮</button>
            <button class ="btn-class"> 第二个按钮</button>
            <button>第三个按钮</button>
            <p>今天不快乐</p>
            <span id ="span">
                <a herf="#">点击打开快乐</a>
            </span>
            <p>今天很快乐</p>
        </div>
    <script>
        window.onload = function () {
            //获取box节点
            var box = window.document.getElementById("box");
            console.log(box);
            //获取box节点的第一个子节点
            var firstChild = box.firstElementChild || box.firstChild;
            console.log(firstChild);
            //获取box节点的最后一个子节点
            var lastChild = box.lastElementChild || box.lastChild;
            console.log(lastChild);
        };
    </script>
    </body>
    

    在这里插入图片描述

    获取多个节点

    • 获取所有的子节点:父节点.childNodes返回制定元素的子元素集合,包括HTML节点,所有属性,文本节点

    注意:

    • nodeType ==1 :表示元素节点

    • nodeType ==2 :表示属性节点

    • nodeType ==3 :表示文本节点

    • 高版本浏览器使用父节点.children获取所有子节点,只返回HTML节点,不返回文本节点

    <body>
        <div id ="box">
            <button id ="btn" class ="btn-class">第一个按钮</button>
            <button class ="btn-class"> 第二个按钮</button>
            <button>第三个按钮</button>
            <p>今天不快乐</p>
            <span id ="span">
                <a herf="#">点击打开快乐</a>
            </span>
            <p>今天很快乐</p>
        </div>
    <script>
        window.onload = function () {
            //获取box节点
            var box = window.document.getElementById("box");
            //获取box节点的所有子节点
            var allChild =box.childNodes;
            console.log(allChild);
    
            //获取子节点中的元素节点:
            var eleChild =[];
            for (var i =0; i<allChild.length;i++){
                var node =allChild[i];
                if (node.nodeType==1){
                    eleChild.push(node);
                }
            }
            console.log(eleChild);
    
            //使用children获取所有子节点
            var NewAllChild =box.children;
            console.log(NewAllChild);
        };
    
    </script>
    </body>
    

    在这里插入图片描述

    展开全文
  • 通过节点的层次关系获取节点对象。 关系: 1,父节点: parentNode:对应一个节点对象。 2,子节点:childNodes:对应一个节点集合。 3,兄弟节点: 上一个兄弟节点:previousSibling 下一个...
    		
    		<script type="text/javascript">
    			
    			function getNodeByLevel(){
    				//获取表格节点
    				var tabNode=document.getElementById("tabid");
    				
    				//获取父节点
    				//var parentNode=tabNode.parentNode;
    				//alert(parentNode.nodeName);//BODY
    				
    				//获取子节点
    				//var childNodes=tabNode.childNodes;
    				//alert(childNodes[0].nodeName);//TBODY
    				//alert(childNodes[0].childNodes[0].nodeName);//TR
    				
    				//获取兄弟节点
    				//var brotherNode=tabNode.previousSibling;
    				//var brotherNode=tabNode.nextSibling;
    				//alert(brotherNode.nodeName);//#text
    				//为什么是#text而不是SPAN呢?因为在和
    div区域
    span区域
    单元格一 单元格二
    span区域11
    上层项目
    下层项目
    一个超链接
    展开全文
  • 本文实例讲述了JS获取子节点父节点和兄弟节点的方法。分享给大家供大家参考,具体如下:一、js获取子节点的方式1. 通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名字。getElementsByTagName...
  • JS获取兄弟节点,父节点子节点 这里我介绍两种方法,一种是通过自己,现在上一个兄弟节点,通过nodeType判断是否是元素节点,是就push 到一个新数组,在查找上一个兄弟节点依次类推,直到空;另一种是查找父节点,...
  • JS获取子节点父节点和兄弟节点 1. JS获取子节点父节点和兄弟节点 【一】获取子节点 通过获取dom方式直接获取子节点 通过childNodes集合,获取子节点 使用childNodes获取子节点的时候,childNodes返回的是子...
  • 本文实例讲述了JS获取子节点父节点和兄弟节点的方法。分享给大家供大家参考,具体如下: 一、js获取子节点的方式 1. 通过获取dom方式直接获取子节点 其中test的父标签id的值,div为标签的名字。...
  • 通过document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。 如 今,已经...
  • 通过获取dom方式直接获取子节点 其中test的标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。 var a = document.getElementById("test")....
  • 官方v2.2.1版本已经提供获取半选中状态节点对象。具体实现思路:// 1. 先合并选中/半选中节点Id,请求传给后台。[].concat(this.$refs.menuListTree.getCheckedKeys(), [this.tempKey], this.$refs.menuListTree....
  • DOM树 DOM树 又称为 文档树模型,就是把文档映射成树形结构,通过节点对象对...通过 parentNode 属性可以获取指定节点的父节点;如果指定的节点没有父节点就会返回 null,如果存在则返回父节点对象 语法: node.pa...
  • 首先我们这里有一个父节点father.vue,在这里我们定义了一个子节点child.vue,并且由父节点定义一个ref为childDatas,父节点需要获取子节点的值,就可以直接通过this.$refs.childDatas里面获取,换句话说,这个...
  • JS获取子节点父节点和兄弟节点的若干种方式

    万次阅读 多人点赞 2017-07-22 16:50:49
    通过获取dom方式直接获取子节点其中test的标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。var a = document.getElementById("test")....
  •  我们已经知道在JavaScript中提供下面的方法获取子、...通过父节点获取子节点: parentObj.firstChild 获取已知父节点的第一个子节点 parentObj.lastChild 获取已知父节点的最后一个子节点 parentObj.childNodes 
  • 1. 通过document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。 JavaS
  • 问题: 排它思想是什么?...获取父节点的方法? 获取子点方法 获取第一个节点,与最后一个节点,为什么不用官方提供的方法? 实际的操作中兄弟节点操作,为什么直接使用nextElementSibing()与previousElementSi
  • 本文实例讲述了JS获取子节点父节点和兄弟节点的方法。分享给大家供大家参考,具体如下: 一、js获取子节点的方式 1. 通过获取dom方式直接获取子节点 其中test的父标签id的值,div为标签的名字。...
  • 遇到的问题是我要通过点击删除按钮删除这一行数据,后端给的接口要传的参数就是设备编号(imei),重点是这个列表本身也是动态的数据,用框架渲染出来的,然后就想到了用dom节点来删除,还算比较简单, 我要获取的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 424
精华内容 169
关键字:

通过父节点获取子节点