从零开始学_JavaScript_系列(27)——dojo的文档相关模块

从零开始学_JavaScript_系列(27)——dojo的文档相关模块先上图:dojo/dom模块:dojo/dom参数:dom方法:①dom.byId(id,doc);用于通过id来选择某个dom结点;②dom.isDescendant(node,ancestor);确认某个node是否是另外一个结点的子节点;③dom.setSelectable(node,se

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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

从零开始学_JavaScript_系列(27)——dojo的文档相关模块

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);

解释:

①返回值是一个nodedom结点);

②第一个参数是必须的,是一个字符串;

③第二个参数一般不使用,默认是当前文档(document),但也可以用于检索来自其他文档的dom结点;

其他:

【一】console.dir(node)的结果(如下图),比较重要的属性有:

children:这个属性用于获取其子节点,一般使用这个;

childrenNodes的区别在于,后者获取的是一个元素,例如这里一个text元素,data值为”a”

classList:样式表,但一般不直接使用;

firstChildlastChild:获取第一个子结点、最后一个子结点,也可以通过children来获取;

④parentNode:获取直接父结点;

但个人感觉,和parentElement并没有什么区别(不确定),建议用前者。

从零开始学_JavaScript_系列(27)——dojo的文档相关模块


其他:

【二】通过这种方式获取的dom结点,可以直接用于jquery的选择器中。例如:

从零开始学_JavaScript_系列(27)——dojo的文档相关模块


①点击红色方块出便会出现弹窗;

②也可以写作node.children[0]只针对第一个元素(假如子节点很多的话);

③可以重复使用children.children来获取更深一级的子节点;

④父节点同理;

⑤获取的结点可以用在其他函数中,参数为node的地方


dom.isDescendant(node, ancestor);

解释:

①用于查看某个结点是否是另外一个结点的子节点;

②返回值为bool值;

③第一个结点为预期子节点(要查询的),第二个结点为预期父节点;

④对非直接父子关系也起作用:如下图

从零开始学_JavaScript_系列(27)——dojo的文档相关模块




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”

③第二个参数是属性,可以增加classnamevaluestyle等,直接添加到标签属性之中,参数是对象;

④第三个参数是成为某个dom结点的子节点(如果没有第四个参数的话);

⑤第四个参数是创建的dom结点和第三个参数的dom结点之间的关系,参数类型是字符串;

⑥第四个参数可选有:”first”,”after”,”before”,”last”,”replace” or “only”

如下图:

从零开始学_JavaScript_系列(27)——dojo的文档相关模块

从零开始学_JavaScript_系列(27)——dojo的文档相关模块

domConstruct.destroy(node);

说明:

①移除某个dom结点,包括他的子节点,元素等;

②会导致innerHML等属性的丢失,但不会丢失样式、类名、事件等;

③会丢失子节点;

④只是从dom树中移除,但dom结点本身还在;

示例代码:

从零开始学_JavaScript_系列(27)——dojo的文档相关模块


从零开始学_JavaScript_系列(27)——dojo的文档相关模块


点击后id=”a”dom后,事件触发:

从零开始学_JavaScript_系列(27)——dojo的文档相关模块


时再点击红框范围:

①出现弹窗,出现文字;

②点掉弹窗后,文字消失,原因在于“事件的冒泡”,他在触发子结点的事件后,会继续触发父节点的事件(即第一个on部分的事件)

从零开始学_JavaScript_系列(27)——dojo的文档相关模块



domConstruct.empty(node);

说明:

①清空一个dom结点下的所有子节点;

②和destroy相似,只是移除dom,但dom本身还在内存之中,dom的事件不受影响;

③参数是目标结点;目标结点不受影响

总体而言,有一些类似domConstruct.destroy(node),只不过一个是对结点本身起效,一个是对结点的所有子节点起效果。



domConstruct.place(node,refNode, position);

说明:

①将一个dom结点放在另外一个dom结点的某个位置;

②第一个参数是被放置的结点,第二个参数是参考结点,第三个参数可选,是位置;

③第三个参数在不使用的情况下,默认是将node放在refNode结点的子节点的位置,并且放置在最后;

示例:


从零开始学_JavaScript_系列(27)——dojo的文档相关模块


domConstruct.toDom(str);

说明:

①创建一个dom结点;

②参数是html文本;

③非常灵活,并且创建的dom很直观,适用于创建一个新的dom结点(多层更佳),并放置于dom树中的某个地方;

④需要和domConstruct.place结合使用;

⑤缺点:假如dom是多层结构A-BC,但需要对BC设置事件时,不推荐使用本方法;

示例:(下图中的右方三图,依次是未点击触发事件,点击一次和点击两次之后的变化)

从零开始学_JavaScript_系列(27)——dojo的文档相关模块



版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/197662.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java取整四舍五入_java取整和四舍五入

    java取整四舍五入_java取整和四舍五入Contents12345Math类里的两个方法:staticdouble(doublea)返回最大的(最接近正无穷大)double值,该值小于等于参数,并等于某个整数。staticdoubleceil(doublea)返回最小的(最接近负无穷大)double值,该值大于等于参数,并等于某个整数。123456789101112131415161718192021222324252627…

  • Model、ModelMap和ModelAndView的使用详解

    Model、ModelMap和ModelAndView的使用详解1.前言最近SSM框架开发web项目,用得比较火热。spring-MVC肯定用过,在请求处理方法可出现和返回的参数类型中,最重要就是Model和ModelAndView了,对于MVC框架,控制器Controller执行业务逻辑,用于产生模型数据Model,而视图View用于渲染模型数据。使用Model和ModelAndView这两个类在spring的视图解析时作用以及区别。这两者之间…

  • windows pip 安装 whl文件

    windows pip 安装 whl文件在安装之前,一直比较迷惑究竟如何用,安装完后,发现竟然如此简单!首先我一般用的是python27,官网下载python27msi安装window764位后,已经自带了Pip和easy_install但是却不晓得如何安装whl目录,经过搜索后发现,把pip和easy_install加入到环境变量中,就可以便捷使用了。1、先找到python的安装目录,以及pip工具所在目录:2、将目录加入环境…

  • 停用NetworkManager[通俗易懂]

    停用NetworkManager[通俗易懂]managed=false LinuxDeepin11.12,在KDE下使用pppoeconf后发现gnome3中NetworkManager显示“设备未托管”,用pppoeconf联网查找资料:——————————————–修改文件:/etc/NetworkManager/NetworkManag

  • Kali Linux三种网络攻击方法总结(DDoS、CC和ARP欺骗)

    Kali Linux三种网络攻击方法总结(DDoS、CC和ARP欺骗)本文章使用的是KaliLinux的2020-4-installer-amd64版本KaliLinux的安装过程本文章不做过多说明,请自行百度一、DDos攻击首先,打开一个命令行输入以下命令:gitclonehttps://github.com/Ha3MrX/DDos-Attack提示如图所示这样,用于DDos的数据包就已经下载到了你的Kali上下面,进入你所下载的DDos文件夹,输入命令(注意大小写):cdDDos-Attack然后设置ddos-attack.py设置

  • mongodb 唯一索引 性能_什么是唯一索引

    mongodb 唯一索引 性能_什么是唯一索引MongoDB支持的索引种类很多,诸如单键索引,复合索引,多键索引,TTL索引,文本索引,空间地理索引等。同时索引的属性可以具有唯一性,即唯一索引。唯一索引用于确保索引字段不存储重复的值,即强制索引字段的唯一性。缺省情况下,MongoDB的_id字段在创建集合的时候会自动创建一个唯一索引。本文主要描述唯一索引的用法。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号