精华内容
下载资源
问答
  • js—DOM节点操作

    千次阅读 2018-09-03 15:13:55
    一、定义 DOM :文档对象模型 ...节点分为几种不同的类型 : Node类型 Document类型 Element类型 Text类型——文本类型 Comment类型 —— 注释类型 二、类型的具体说明 Node类型 属性:...

    一、定义

    DOM :文档对象模型

    DMO是针对HTML文档的一个API(应用程序编程接口),DOM描绘了一个层次化的节点树,允许开发人员添加,删除,修改页面的某一部分。

    节点分为几种不同的类型 :

    • Node类型
    • Document类型
    • Element类型
    • Text类型——文本类型
    • Comment类型 —— 注释类型

    二、类型的具体说明

    • Node类型

           属性:1、nodeType , 表示节点类型

                             规则:  1 -->Element类型    3 -->Text类型   8 -->Comment类型   9 -->Document类型

                     2、 childNodes ,表示子节点集合,可以使用slice方法将NodeList转换为数组

                              var arr = Array.prototype.slice.call(nodes,0);

     demo:       

    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>
    	window.onload = function(){
    	    console.log(document.body.childNodes);   //获取所有子节点,包括各种类型的节点,返回NodeList类数组对象
    
    	    //将类数组对象转换为数组对象
    	    var tempArr = Array.prototype.slice.call(document.body.childNodes,0);
    	    console.log(tempArr);
    
                //Text类型
    	    var texts = tempArr.filter(function(item,index){
    		return item.nodeType == 3;
    	    });
    	    console.log(texts);
    
    	    //Element类型
    	    var eles = tempArr.filter(function(item,index){
    		    return item.nodeType == 1;
    	    });
    	    console.log(eles);
    
    
    	    //Comment类型
    	    var com = tempArr.filter(function(item,index){
    		return item.nodeType == 8;
    	    });
    	    console.log(com);
    
    
    	    //Document类型
    	    var docu = tempArr.filter(function(item,index){
    		    return item.nodeType == 9;
    	    });
    	    console.log(docu);
    
            }
        </script>
    </head>
    <body>
        hello
        <!-- 注释 -->
        <div>
    	<span>world</span>
        </div>
        你好
    </body>

    输出结果:

                                

                       3、nodeName , 取决于节点类型,如果是元素类型,值为元素的标签名

                       4、nodeValue , 取决于节点类型,如果是元素类型,值为null

                       5、parentNode,指向文档树中的父节点

                       6、previousSibling,兄弟节点的前一个节点

                       7、nextSibling,兄弟节点的下一个节点

                       8、firstSibling,childsNode列表中的第一个节点

                       9、ownerDocument,指向表示整个文档的文档节点

                       10、hasChildNodes,包含一个或多个节点时,返回true

    <head>
        <meta charset="UTF-8">
        <title>Node属性</title>
            <script>
    	    window.onload = function(){
    		console.log(document.body.childNodes);  //获取所有节点
    
    		var childs = document.body.childNodes;
    		console.log(childs.length);
    
    		console.log(childs[3].nodeName);     //获取类数组对象中第三个节点的nodeName
    		// 或者console.log(childs.item(0));
    
    		console.log(childs[1].nodeValue);   //获取第一个节点的nodeValue
    
    		console.log(childs[0].parentNode);   //指向文档树中的父节点
    
    		//兄弟节点
    		console.log(childs[0].nextSibling);     //下一个兄弟
    		console.log(childs[4].previousSibling); //上一个兄弟
    
    		console.log(document.body.firstChild == childs[0]);  //第一个孩子节点
    
    		console.log(childs[0].ownerDocument);   //任何节点都属于它所在的文档
    
    		console.log(document.body.hasChildNodes());  //在包含一个或多个节点的情况下返回true
    		console.log(childs[0].hasChildNodes());
    			
    	 }
        </script>
    </head>
    <body>                  
        <!-- 注释 -->
        hello
        <div>
    	<span>world</span>
        </div>
        你好
        <div>
    	one
        </div>
    </body>

    输出结果:

          



     

    Node类型的操作节点

    • appendChild()——  向childNodes列表末尾添加一个节点   
    <head>
        <meta charset="UTF-8">
        <title>node节点操作</title>
            <style>
    	    .content{
    		border:1px solid black;
    		overflow: hidden;
    	    }
    	    .content > div{
    		width:50px;
    		height: 50px;
    		background-color: red;
    		float: left;
    		margin: 10px;
    	    }
    	    .content .two{
    		background-color: blue;
    	    }
    	</style>
    	<script>
    	    window.onload = function(){
    		var div = document.getElementsByClassName('one')[0]; //通过classname来获取元素
    		console.log(div);
    
    		//复制
    		var newDiv = div.cloneNode(true);
    
    		var btns = document.getElementsByTagName('button');  //选中所有button元素
    		console.log(btns);
                    
                    //添加点击效果
    		btns[0].onclick = function(){
    		        //追加节点
    		        var content = document.getElementsByClassName('content')[0];
    		        content.appendChild(newDiv);
    		    }
    		}
    	</script>
    </head>
    <body>
        <button>点击追加</button>
        <div class="content">
    	    <div class="one">
    		<span>one</span>
    	    </div>
    	    <div class="two">
    		two
    	    </div>
        </div>
    </body>

    输出结果:

                         点击前:

                         点击后:


    • insertBefore()——第一个参数:要插入的节点,第二个参数:作为参照的节点
    • replaceChild()——第一个参数:要插入的节点,第二个参数:要替换的节点
    • removeChild()——一个参数,即要删除的节点
    • cloneNode()——复制节点
    <head>
        <meta charset="UTF-8">
        <title>node</title>
        <style>
            .content{
    	    border:1px solid black;
    	    overflow: hidden;
    	  }
    	.content > div{
    	    width:50px;
    	    height: 50px;
    	    background-color: red;
    	    float: left;
    	    margin: 10px;
    	  }
    	 .content .two{
    	    background-color: blue;
    	  }
    	 .content .three{
    	    background-color: pink;
    	  }
        </style>
        <script>
    	    window.onload = function(){
    	    var btns = document.getElementsByTagName('button');
    	    console.log(btns);
    
    	    var content = document.getElementsByClassName('content')[0];  
    
    	    var newDiv = document.getElementsByClassName('one')[0];
    	    //克隆one,要插入的节点
    	    newDiv = newDiv.cloneNode(true);
    	    //粉色div,参考的节点
    	    var div3 = document.getElementsByClassName('three')[0];
    
    	    //插入节点
    	    btns[0].onclick = function(){
    		    content.insertBefore(newDiv,div3);
    		}
    
    	    //替换节点
    	    btns[1].onclick = function(){
    		    content.replaceChild(newDiv,div3);
    	    }
    
    	    //移除节点
    	    btns[2].onclick = function(){
    		    content.removeChild(div3);
    	        }
    	    }
        </script>
    </head>
    <body>
    	<button>插入节点</button>
    	<button>替换节点</button>
    	<button>删除节点</button>
    	<div class="content">
    		<div class="one">one</div>
    		<div class="two">two</div>
    		<div class="three">three</div>
    	</div>
    </body>

    点击前:

     

    点击“插入节点”:

     

    点击“替换节点”:

     

    点击“删除节点”:

     

     

     

     

     

     

     

    展开全文
  • Zookeeper的节点操作,节点的信息

    千次阅读 2018-10-24 11:47:33
    ZK Shell使用(linux命令) zkCli.sh -server ip:port 连接对应的zk,ip表示zk的IP地址,port代表端口...ls,ls2 都是列出zk的节点,但是ls2列出的比较详细; create [-s] [-e] path data acl 创建节点;zk的...
    • ZK Shell使用(linux命令)

    zkCli.sh -server ip:port            连接对应的zk,ip表示zk的IP地址,port代表端口

    ls,ls2                                     都是列出zk的节点,但是ls2列出的比较详细;

    create  [-s] [-e] path data acl   创建节点;zk的创建节点有两种:临时节点(随着zkSession消亡而自动删除)、

                                                      持久节点(一直会存在);

    delece path                                       删除节点;

    rmr  path                                  递归删除(zk的节点结构是znode,也就是相当于树结构,可以递归删除);

    get   path                                 获取节点信息;

                                                     [zk: ip:port ] get  /test0000000001                
                                                                  896       (节点的值)                                          
                                                                 cZxid = 0xe0000000d                                 (第一次创建的节点的事务Id)  
                                                                 ctime = Thu Oct 25 16:57:57 CST 2018     (第一次创建节点的时间) 
                                                                 mZxid = 0xe00000013                                (最后一次修改节点的事务Id)
                                                                 mtime = Thu Oct 25 17:03:54 CST 2018    (最后一次修改节点的时间)
                                                                 pZxid = 0xe00000014                                 (子节点的事务Id)
                                                                 cversion = 2
                                                                 dataVersion = 3        (数据版本)
                                                                 aclVersion = 0       (权限版本)           
                                                                 ephemeralOwner = 0x0  (持久节点还是临时节点)
                                                                dataLength = 3    (节点数据的长度)
                                                                numChildren = 2 (子节点的状态)

    set   path                                 更新节点信息;

    connect  host:port                 连接到指定节点;

    setquota -n|-b val path            某个Znode指定多少存储空间或者允许创建多少个节点;

                                                     n:指定可以设置多少个子节点;

                                                                b 指定可以设置多大空间(byte)

               listquota path                         对于配额不是硬性的提示,超过配额还是可以继续创建,只不过在日志里面有提示;

                                                              一般日志都是查看Zookeeper.out文件中,里面有报错信息;

    start path                                查看节点的状态; 

    如果使用命令时报错:是因为在节点名前没用使用 / (斜杠)的问题。

    Command failed: java.lang.IllegalArgumentException: Path must start with / character,

       

     

    展开全文
  • JavaScript节点操作

    千次阅读 2020-10-11 08:42:19
    JavaScript节点操作 // 父级节点 var par = li.parentNode // 所有儿子节点 var all_child = li.children // 第一个(最后一个子节点) var fir = li.firstChild var las = li.lastChild // 第一个子元素...

    JavaScript节点操作

    // 父级节点
            var par = li.parentNode
    
            // 所有儿子节点
            var all_child = li.children
    
            // 第一个(最后一个子节点)
            var fir = li.firstChild
            var las = li.lastChild
    
            // 第一个子元素(最后一个)节点
            var fir_element = li.firstElementChild
            var las_element = li.lastElementChild
    
            // 兄弟节点
    
            // 返回下一个列表选项的 HTML 内容:
            var bor = li.nextElementSibling
            // 返回上一个列表选项的 HTML 内容:
            var bor = li.previousElementSibling
            // 返回列表项的下一个同胞:
            var bor2 = li.nextSibling
            // 返回列表项的上一个同胞
            var bor2 = li.previousSibling
    
            // 创建节点
    
            var news = document.createElement('li')
    
            //添加节点
    
            // 添加节点到指定父节点的子节点列表末尾
            node.appendChild(child)
    
            // 添加节点到指定父节点的子节点列表前面
            node.insertBefore(child, 指定元素)
    
            // 插入节点
    
            li.insertAdjacentElement('位置', 元素)
            // beforeBegin: 插入到标签开始前
            // afterBegin: 插入到标签开始标记之后
            // beforeEnd: 插入到标签结束标记前
            // afterEnd: 插入到标签结束标记后
    
            // 删除节点
    
            li.parentNode.remove()   // 删除li的父级节点
    
    展开全文
  • 节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”。页面中的元 素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建、 插入、替换、克隆、删除等等一些列的...

    前言

    1.创建节点
    2.插入节点
    3.包裹节点
    4.节点操作

    DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”。页面中的元 素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建、 插入、替换、克隆、删除等等一些列的元素操作。

    一.创建节点

    为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点。

    var box = $('<div id="box">节点</div>'); //创建一个节点 $('body').append(box);//将节点插入到<body>元素内部

    二.插入节点

    在创建节点的过程中,其实我们已经演示怎么通过.append()方法来插入一个节点。但除 了这个方法之余呢,jQuery 提供了其他几个方法来插入节点。

    这里写图片描述

    $('div').append('<strong>节点</strong>'); //向 div 内部插入 strong 节点 
    $('div').append(function (index, html) { //使用匿名函数插入节点,html 是原节点
    return '<strong>节点</strong>';
    });
    $('span').appendTo('div'); //讲 span 节点移入 div 节点内
    $('span').appendTo($('div')); //讲 span 节点移入 div 节点内
    $('div').prepend('<span>节点</span>');//将 span 插入到 div 内部的前面
     $('div').append(function (index, html) {//使用匿名函数,同上
    return '<span>节点</span>'; });
    $('span').prependTo('div'); //将 span 移入 div 内部的前面
    $('span').prependTo($('div'));//将 span 移入 div 内部的前面

    这里写图片描述

    $('div').after('<span>节点</span>'); //向 div 的同级节点后面插入 span
    $('div').after(function (index, html) {//使用匿名函数,同上
    return '<span>节点</span>'; });
    $('div').before('<span>节点</span>'); //向 div 的同级节点前面插入 span
    $('div').before(function (index, html) { return '<span>节点</span>';
    });
     $('span').insertAfter('div'); //将 span 元素移到 div 元素外部的后面
     $('span').insertBefore('div');//将 span 元素移到 div 元素外部的前面

    三.包裹节点

    jQuery 提供了一系列方法用于包裹节点,那包裹节点是什么意思呢?其实就是使用字符 串代码将指定元素的代码包含着的意思。
    这里写图片描述
    这里写图片描述

    $('div').wrap('<strong></strong>'); //在 div 外层包裹一层 strong
    $('div').wrap('<strong>123</strong>'); //包裹的元素可以带内容
    $('div').wrap('<strong><em></em></strong>'); //包裹多个元素
    
    $('div').wrap($('strong').get(0)); //也可以包裹一个原生 DOM
    $('div').wrap(document.createElement('strong')); //临时的原生DOM
    $('div').wrap(function (index) {//匿名函数
    return '<strong></strong>'; });
    $('div').unwrap(); $('div').wrapAll('<strong></strong>'); //所有 div 外面只包一层 strong
    $('div').wrapAll($('strong').get(0)); //同上
    $('div').wrapInner('<strong></strong>'); //包裹子元素内容
    $('div').wrapInner($('strong').get(0)); //DOM 节点
    $('div').wrapInner(function () {//匿名函数
    return '<strong></strong>'; });

    注意:.wrap()和.wrapAll()的区别在前者把每个元素当成一个独立体,分别包含一层外 层;后者将所有元素作为一个整体作为一个独立体,只包含一层外层。这两种都是在外层包 含,而.wrapInner()在内层包含。

    四.节点操作

    除了创建、插入和包裹节点,jQuery 还提供了一些常规的节点操作方法:复制、替换和 删除节点。

    //复制节点
    $('body').append($('div').clone(true)); //复制一个节点添加到 HTML 中

    注意:clone(true)参数可以为空,表示只复制元素和内容,不复制事件行为。而加上 true 参数的话,这个元素附带的事件处理行为也复制出来。

    //删除节点
    $('div').remove(); //直接删除 div 元素
    

    注意:.remove()不带参数时,删除前面对象选择器指定的元素。而.remove()本事也可以 带选择符参数的,比如:$(‘div’).remove(‘#box’);只删除 id=box 的 div

    //保留事件的删除节点
    $('div').detach(); //保留事件行为的删除
    

    注意:.remove()和.detach()都是删除节点,而删除后本身方法可以返回当前被删除的节 点对象,但区别在于前者在恢复时不保留事件行为,后者则保留。

    //清空节点
     $('div').empty();
    //替换节点 
    $('div').replaceWith('<span>节点</span>');//将 div 替换成 span 元素
     $('<span>节点</span>').replaceAll('div');//同上
    

    注意:节点被替换后,所包含的事件行为就全部消失了。

    请继续看下一章[jQuery知识]jQuery之知识体系

    展开全文
  • 接下来就来踩踩uniapp节点操作的坑吧 按照文档:写下如下代码,验证: <template> <view class="content"> <view class="text-area" style="position: relative;"> <text class="title" s
  • 文章目录 操作元素 自定义属性 子节点获取 下拉节点 兄弟节点解析 添加节点简单发布实例 删除节点 操作元素 自定义属性 <!DOCTYPE ...
  • QTreeWidget讲解及节点操作

    万次阅读 2013-08-21 22:23:05
    关于Qt的节点操作,也就是QTreeWidget 类的操作。 先看我的效果图!       具体实现如下! 构造函数中写事件! connect(ui->treeWidget,SIGNAL(itemDoubleClicked(QTreeWidgetItem*,int)),  this,SLOT...
  • JS标签选择器以及节点操作

    万次阅读 2019-03-19 15:21:21
    JS的DOM开始当然是从选择器开始的,小编这边先做一个归类。 一、DOM选择器 document代表整个文档这边就省略他的...2.getElementByTagName( ) //通过标签类型来获取节点(常用) 3.getElementByClassName( ) //...
  • 二分搜索树的删除节点操作

    千次阅读 多人点赞 2017-12-23 21:50:45
    本节我们来讨论一下对二叉搜索树的删除节点操作。 首先,我们先来研究一下稍微简单一点的问题,如何删除二叉树中的最小值和最大值。 例如上图的这一棵二叉树中,最小值节点和最大值节点都在哪里呢?我们可以很清楚...
  • 父页面中iframe标签的id为“mainFrame”,调用iframe中方法的方式: $("#mainFrame")[0].contentWindow.removeProj();...操作iframe中节点的方式为: $("#mainFrame")[0].contentWindow.$("#loadHiden").val();
  • Java链表删除节点操作

    千次阅读 2019-03-27 16:07:30
    1、创建节点类Node /** * 程序目的:建立一组学生成绩的单向链表程序,包含学号、姓名、和成绩3种数据。 只要输入要删除学生的成绩,就可以遍历该链表,并清除学生的节点, * 要结束输入时,输入“-1”,则此时会...
  • #所以需要注意的是 张量 不是 节点操作(OP) #tensor1 = tf.matmul(a,b,name='exampleop') #上面这个 定义的只是一个张量,是在一个静态的图(graph)中的 #张量在 定义完成之后是不会进行操作的,想要进行操作就...
  • uni-app元素节点操作

    万次阅读 2018-12-26 14:36:20
    mounted() {  uni.createSelectorQuery().select('#test').boundingClientRect(function(e){  console.log(e)  uni.pageScrollTo({  scrollTop: e.top...
  • CCNode是Cocos2d-x的一个非常重要的概念,所有可以被渲染或者包含可渲染的都是一个CCNode。最主要的CCNode有:...这篇文章主要是讨论一下节点的添加、移除和渲染,也就是我们经常用到的addChild、removeChild和dra
  • rabbitmq集群节点操作

    千次阅读 2016-11-30 17:13:29
    节点恢复过程中把数据删掉很重要,恢复一单结点,再清数据 节点增加: 1. rabbitmq-server -detached --- .erlang.cooike的权限,400 属主rabbitmq 2. rabbitctl stop_app 3. rabbitmqctl join_cluster ...
  • 选择器获取 < template > < div > < canvas id = 'cvs' > div > template > < script > ...//vue中,在mounted之后的钩子 函数中才能进行dom操作,mounted完成dom挂载
  • 分类目录:《Python爬虫从入门到精通》总目录 在《高级框架Selenium的使用(一):基础知识》中我们了解了利用...除此之外,Selenium还可以驱动浏览器完成各种操作,本文就阐述下Selenium的节点操作,后续的文章会继...
  • vue怎样操作元素 怎样获取元素节点

    千次阅读 2019-07-14 16:51:39
    vue中建议我们操作节点的时候使用ref来获取节点,所以虽然可以用document.getElement之类的语句来操作,不过代码还是有点长,所以我们可以使用vue提供的api来进行操作 先用ref在元素上面做一个标记,然后用this.$...
  • 1、添加节点 2、插入节点 3、删除节点 4、替换节点 5、复制节点 1、添加节点 appendChild():添加子节点到末尾(类似于粘贴复制的效果) 步骤: 获取到ul 获取到div2 把ul添加到div2 2、插入节点 ...
  • vue中操作Dom节点的方法

    千次阅读 2019-09-21 03:34:33
    1.vue中ref操作dom节点 <template> <div id="app"> <div ref="box">1111111111111111</div> <button @click="changeColor">改变</button> </div> ...
  • 其赋予了JS操作节点的能力。当网页被加载时,浏览器就会创建页面的文档对象模型。 节点:根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 1、整个文档时一个文档节点。 2、每个HTML元素是元素节点。 3...
  • 我的WebAPI学习(四)------ 节点操作

    万次阅读 2020-07-05 23:14:38
    文章目录节点操作删除节点案例:删除留言复制节点创建元素事件高级注册事件的方式事件监听阻止默认行为事件委托 节点操作 删除节点 node.removeChild()方法子节点,返回删除的节点 <button>删除</button>...
  • 但是这三个也极其不好用,而且我发现tree的删除节点操作没办法条件判断,也就是说你点了确定以后页面的dome结构他直接给你删了 不得不说最近使用layui着实遇到了太多问题,但是没办法,还得用啊 说一下我的解决办法 ...
  • 关于ZooKeeper的介绍,网上很多介绍,我也懒的在多写了.. 直接上代码吧.. 长时间不用,会生疏.. 关于环境, 我自己在虚拟机上装...Java操作ZooKeeper 创建单个节点 package com.java.module.zookeeper.zk_1; import or
  • (1):DOM :DOM文档树的全称是document object model ,也就是文档对象模型,在js中,把整页面当成一个dom树,而我们可以对每一个节点都可以进行相应的操作,比如创建一个节点,删除一个节点等等。 对于操作的方法...
  • 微信小程序操作dom元素节点 wx.createSelectorQuery() 原创@Demi 最后发布于2018-11-30 17:31:43 阅读数 17531 收藏 展开 WXML <view> <text class="title" id="productServe">产品服务</text> ...
  • JavaScript的DOM操作(节点操作)

    万次阅读 2013-01-11 08:54:04
    创建节点 createElement() var node = document.createElement(“div”); 没什么可说的,创建一个元素节点,但注意,这个节点不会被自动添加到文档(document)里。 2、创建文本节点 createTextNode() var value = ...
  • 转自:... JS节点方法 (属性: 1. Attributes 存储节点的属性列表(只读) 2. childNodes 存储节点的子节点列表(只读) 3. dataType 返回此节点的数据类型 4. Definit
  • ext的树节点操作常用属性

    千次阅读 2016-03-17 16:21:49
    ext 树节点的一些常用操作 1、全部展开 tree.expandAll(); 2、全部收缩 tree.collapseAll(); 3、得到父节点 node.parentNode 4、判断是否有父节点 node.parentNode==null 5、判断是否有子节点 node....
  • ——我们将在这里学习可以对这些节点和属性做哪些常用操作 1、激活,关闭节点——active this.node.active = true; //false。  激活——在父节点同样激活的情况下,所有激活的组件开始执行update方法和onEnable...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,465,453
精华内容 586,181
关键字:

节点操作