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

朱雀 2022-09-25 00:28 203阅读 0赞

先上图：（下图如果有点小看不清的话，请打开链接查看

/images/20220719/eea8b0421cf84a37960ea6e5ddeb54c4.png

）

![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并没有什么区别（不确定），建议用前者。

![Center 1][]

其他：

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

![Center 2][]

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

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

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

④父节点同理；

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

dom.isDescendant(node, ancestor);

解释：

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

②返回值为bool值；

③第一个结点为预期子节点（要查询的），第二个结点为预期父节点；

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

![Center 3][]

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"

如下图：

![Center 4][]

![Center 5][]

domConstruct.destroy(node);

说明：

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

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

③会丢失子节点；

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

示例代码：

![Center 6][]

![20160803233431859][]

点击后id=”a”的dom后，事件触发：

![20160803233544547][]

这时再点击红框范围：

①出现弹窗，出现文字；

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

![20160803233627501][]

domConstruct.empty(node);

说明：

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

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

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

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

domConstruct.place(node,refNode, position);

说明：

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

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

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

示例：

![20160803233810065][]

domConstruct.toDom(str);

说明：

①创建一个dom结点；

②参数是html文本；

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

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

⑤缺点：假如dom是多层结构A-BC，但需要对B和C设置事件时，不推荐使用本方法；

示例：（下图中的右方三图，依次是未点击触发事件，点击一次和点击两次之后的变化）

![20160803233938362][]

[Center]: /images/20220719/eea8b0421cf84a37960ea6e5ddeb54c4.png
[Center 1]: /images/20220719/e14ae37ff5aa45f9903eb4b495617be4.png
[Center 2]: /images/20220719/b57c6b52d2b14c7fa698e374dab5363e.png
[Center 3]: /images/20220719/0ed68c7d6d5c46dea5075b3c8b3c835a.png
[Center 4]: /images/20220719/5a9c2cc0c1114e7a926e07948b15343e.png
[Center 5]: /images/20220719/cafb145cf44b4bf589e669731a55f1ea.png
[Center 6]: /images/20220719/ea00b1d1af524d03b127579d8abd1561.png
[20160803233431859]: /images/20220719/bea639bac4f14ecf84d0b251d6adca51.png
[20160803233544547]: /images/20220719/9ea69f904bca4cd497fd0305190f34cd.png
[20160803233627501]: /images/20220719/b4fd0ce37a904efa8d1d96913a8e72bf.png
[20160803233810065]: /images/20220719/715555525a6b48868593e831969b2c60.png
[20160803233938362]: /images/20220719/b0bdd234b72a4209af95f3465af0e363.png