从零开始学_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)
blank

相关推荐

  • pcanywhere远程控制的步骤_windows10远程桌面端口修改

    pcanywhere远程控制的步骤_windows10远程桌面端口修改  PcAnywhere远程连接默认端口是5631[数据端口]、5632[状态端口],实际发现其实防火墙打开5631[数据端口]端口就可以自由访问。要改变Pcanywhere数据端口[5631]要去编辑系统注册表,找到以下键值:开始->运行->regedit:HKEY_LOCAL_MACHINE\SOFTWARE\Symantec\pcAny…

  • BGP实验(2)

    BGP实验(2)

  • describing people听力原文_你美国也配谈道德

    describing people听力原文_你美国也配谈道德  美国著名公司PeopleSoft,名字也代表旗下的一系列ERP产品,一系列的解决方案,有一整套的开发工具,04年被oracle以103亿美元收购。 在某银行的CRM,EPM项目中有幸认识Michaelzhou,非常感谢他的帮助,使我认识到底什么才是PeopleSoft,暂且不说PeopleSoft的产品有多好,本文仅讨论PeopleSoft的开发模式。 

  • idera激活码[在线序列号]

    idera激活码[在线序列号],https://javaforall.cn/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

  • Java零基础好学吗?Java该怎么学?

    Java零基础好学吗?Java该怎么学?Java零基础好学吗?Java该怎么学?在IT行业中,Java开发工程师是一个很吃香的职业,薪资水平也是几乎过万,许多人想转行Java开发,但又担心零基础能不能学会,学起来有多难,如果是零基础自学Java的话是比较困难的,学Java难不难取决于学习方法的选择和努力程度。今天就来讲讲Java零基础好学吗?Java该怎么学?Java学习路线:第一阶段:Java基础语法内容:运行环境、关键字、数据类型、运算符、方法、条件结构、循环结构、方法重载、数组。第二阶段:面向对象和封装内容:面向对象、thi

  • IE内嵌google chrome frame解决浏览器兼容问题

    IE内嵌google chrome frame解决浏览器兼容问题参考文献:http://www.pseudowired.com/2012/12/04/tomcat-http-header-manipulation/(html中自动添加使用chrome的header)http://www.baike.com/wiki/Google+Chrome+Frame(googlechromeframe介绍)http://www.cnbl

发表回复

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

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