大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
先上图:(下图如果有点小看不清的话,请打开链接查看
https://img-blog.csdn.net/20160803234144705?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
)
dojo/dom
模块:dojo/dom
参数:dom
方法:
①dom.byId(id, doc);
用于通过id来选择某个dom结点;
②dom.isDescendant(node, ancestor);
确认某个node是否是另外一个结点的子节点;
③dom.setSelectable(node,selectable);
用于启用或者禁止对某个结点的选择
自己测试结果是无效,官方给的示例和API写的很粗浅,无实际应用。
dom.byId(id, doc)
原型:
dom.byId(id, doc);
解释:
①返回值是一个node(dom结点);
②第一个参数是必须的,是一个字符串;
③第二个参数一般不使用,默认是当前文档(document),但也可以用于检索来自其他文档的dom结点;
其他:
【一】console.dir(node)的结果(如下图),比较重要的属性有:
①children:这个属性用于获取其子节点,一般使用这个;
与childrenNodes的区别在于,后者获取的是一个元素,例如这里一个text元素,data值为”a”
②classList:样式表,但一般不直接使用;
③firstChild、lastChild:获取第一个子结点、最后一个子结点,也可以通过children来获取;
④parentNode:获取直接父结点;
但个人感觉,和parentElement并没有什么区别(不确定),建议用前者。
其他:
【二】通过这种方式获取的dom结点,可以直接用于jquery的选择器中。例如:
①点击红色方块出便会出现弹窗;
②也可以写作node.children[0]只针对第一个元素(假如子节点很多的话);
③可以重复使用children.children来获取更深一级的子节点;
④父节点同理;
⑤获取的结点可以用在其他函数中,参数为node的地方
dom.isDescendant(node, ancestor);
解释:
①用于查看某个结点是否是另外一个结点的子节点;
②返回值为bool值;
③第一个结点为预期子节点(要查询的),第二个结点为预期父节点;
④对非直接父子关系也起作用:如下图
dojo/dom-construct
模块:dojo/dom-construct
参数:domConstruct
方法:
①domConstruct.create(tag,attrs,refNode, pos):
创建一个dom结点,设置标签名,属性,放置于哪个结点,跟该结点是什么关系;
②domConstruct.destroy(node);
摧毁一个dom结点;
③domConstruct.empty(node);
清空一个dom结点下的所有子节点——安全的;
④domConstruct.place(node,refNode, position);
将一个dom结点放置于另一个结点的某个位置;
⑤domConstruct.toDom(frag, doc);
创建一个dom结点(以字符串形式)
domConstruct.create(tag,attrs,refNode,pos)
说明:
①创建一个dom结点,第一个参数是必备,其他可选;
②第一个参数是标签名,参数类型是字符串,例如”span”
③第二个参数是属性,可以增加class,name,value,style等,直接添加到标签属性之中,参数是对象;
④第三个参数是成为某个dom结点的子节点(如果没有第四个参数的话);
⑤第四个参数是创建的dom结点和第三个参数的dom结点之间的关系,参数类型是字符串;
⑥第四个参数可选有:”first”,”after”,”before”,”last”,”replace” or “only”
如下图:
domConstruct.destroy(node);
说明:
①移除某个dom结点,包括他的子节点,元素等;
②会导致innerHML等属性的丢失,但不会丢失样式、类名、事件等;
③会丢失子节点;
④只是从dom树中移除,但dom结点本身还在;
示例代码:
点击后id=”a”的dom后,事件触发:
这时再点击红框范围:
①出现弹窗,出现文字;
②点掉弹窗后,文字消失,原因在于“事件的冒泡”,他在触发子结点的事件后,会继续触发父节点的事件(即第一个on部分的事件)
domConstruct.empty(node);
说明:
①清空一个dom结点下的所有子节点;
②和destroy相似,只是移除dom,但dom本身还在内存之中,dom的事件不受影响;
③参数是目标结点;目标结点不受影响
总体而言,有一些类似domConstruct.destroy(node),只不过一个是对结点本身起效,一个是对结点的所有子节点起效果。
domConstruct.place(node,refNode, position);
说明:
①将一个dom结点放在另外一个dom结点的某个位置;
②第一个参数是被放置的结点,第二个参数是参考结点,第三个参数可选,是位置;
③第三个参数在不使用的情况下,默认是将node放在refNode结点的子节点的位置,并且放置在最后;
示例:
domConstruct.toDom(str);
说明:
①创建一个dom结点;
②参数是html文本;
③非常灵活,并且创建的dom很直观,适用于创建一个新的dom结点(多层更佳),并放置于dom树中的某个地方;
④需要和domConstruct.place结合使用;
⑤缺点:假如dom是多层结构A-BC,但需要对B和C设置事件时,不推荐使用本方法;
示例:(下图中的右方三图,依次是未点击触发事件,点击一次和点击两次之后的变化)
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/197662.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...