ArcGIS API for JavaScript 4.15系列（2）——Dojo中的dom操作

news2024/11/25 15:25:13

1、前言

ArcGIS API for JavaScript是基于Dojo框架编写的开发包，因此了解并掌握Dojo的相关基础知识是极为必要的。很多开发者都反馈过一个问题，那就是一看见ArcGIS API for JavaScript里那些奇形怪状的代码就觉得无从下手。有一点必须得承认：Dojo与现在流行的React、Vue相比，其设计思想确实已经落伍了，但这并不妨碍Dojo仍旧是一个优秀的JavaScript框架，其严格的模块化和面向对象的思想也依旧值得开发者学习借鉴。下面就来介绍一下Dojo中的基础的dom操作。

2、dojo/dom模块

在原生JavaScript中，我们可以通过document.getElementById方法获取对应的dom元素。而在dojo中，内置的dom模块提供了一个byId方法，我们可以通过该方法来获取对应的dom元素，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>demo</title>
    <script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
    <h1 id="title1">这是标题1</h1>
    <h1 id="title2">这是标题2</h1>
    <h1 id="title3">这是标题3</h1>
    <script>
        require(['dojo/dom', 'dojo/domReady!'], function (dom) {
            var title1 = dom.byId('title1').innerText;
            var title2 = dom.byId('title2').innerText;
            var title3 = dom.byId('title3').innerText;
            console.log(title1);
            console.log(title2);
            console.log(title3);
        });
    </script>
</body>
</html>

运行结果如下：

这是标题1
这是标题2
这是标题3

3、dojo/dom-construct模块

3.1、创建元素——create

Dojo中内置的dom-construct模块可用于创建dom元素，该模块中包含一个create方法，该方法的第一个参数为html中的元素标签，如h1、p、li等等。第二个参数为标签的属性值，第三个参数为父节点dom元素，第四个参数为在父节点中的插入位置。下面代码演示了在一个div中创建三个h1标签

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>demo</title>
    <script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
    <div id="container">

    </div>
    <script>
        require(['dojo/dom', 'dojo/dom-construct', 'dojo/domReady!'], function (dom, domConstruct) {
            var container = dom.byId('container');
            domConstruct.create('h1', { id: 'title1', innerHTML: '这是标题1' }, container, 'last');
            domConstruct.create('h1', { id: 'title2', innerHTML: '这是标题2' }, container, 'last');
            domConstruct.create('h1', { id: 'title3', innerHTML: '这是标题3' }, container, 'last');
        });
    </script>
</body>
</html>

运行结果如下图所示：

在这里插入图片描述

3.2、销毁元素——destroy

dom-construct模块中的destroy方法可用于销毁dom元素，该方法会连同内部的dom子节点一同销毁。下面代码演示了销毁div的操作，由于调用了destroy方法，因此div内部的h1元素也会一同被销毁。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>demo</title>
    <script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
    <div id="container">
        <h1 id="title1">这是标题1</h1>
        <h1 id="title2">这是标题2</h1>
        <h1 id="title3">这是标题3</h1>
    </div>
    <script>
        require(['dojo/dom', 'dojo/dom-construct', 'dojo/domReady!'], function (dom, domConstruct) {
            var container = dom.byId('container');
            domConstruct.destroy(container);
        });
    </script>
</body>
</html>

运行结果如下图所示，可以发现整个div元素都被销毁了。

在这里插入图片描述

3.3、清空元素——empty

dom-construct模块中的empty方法可用于清除内部元素。与destroy方法不同，empty方法只会清除内部的dom子节点，父节点则不受影响。代码如下

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>demo</title>
    <script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
    <div id="container">
        <h1 id="title1">这是标题1</h1>
        <h1 id="title2">这是标题2</h1>
        <h1 id="title3">这是标题3</h1>
    </div>
    <script>
        require(['dojo/dom', 'dojo/dom-construct', 'dojo/domReady!'], function (dom, domConstruct) {
            var container = dom.byId('container');
            domConstruct.empty(container);
        });
    </script>
</body>
</html>

运行结果如下图所示，可以发现：empty方法并没有清除div元素，只是将div内部的h1元素清除了。

在这里插入图片描述

3.4、插入元素——place

dojo/dom-construct模块中的place方法可用于插入dom元素。该方法与create方法类似，一共包含三个参数，第一个参数为插入的元素，第二个参数为父节点元素，第三个参数为插入的位置，如first、last。下面代码演示了在div中插入h1元素：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>demo</title>
    <script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
    <div id="container">

    </div>
    <script>
        require(['dojo/dom', 'dojo/dom-construct', 'dojo/domReady!'], function (dom, domConstruct) {
            var container = dom.byId('container');
            var title1 = domConstruct.create('h1', { innerHTML: '这是标题1' });
            var title2 = domConstruct.create('h1', { innerHTML: '这是标题2' });
            var title3 = domConstruct.create('h1', { innerHTML: '这是标题3' });
            domConstruct.place(title1, container, 'last');
            domConstruct.place(title2, container, 'last');
            domConstruct.place(title3, container, 'last');
        });
    </script>
</body>
</html>

运行结果如下图所示：

在这里插入图片描述

4、dojo/dom-prop模块

4.1、get

dojo/dom-prop模块提供了get方法用来获取dom元素的property。下面代码演示了获取一个文本框的property。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>demo</title>
    <script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
    <input id="userName" type="text" placeholder="请输入用户名" value="admin" />
    <script>
        require(['dojo/dom', 'dojo/dom-prop', 'dojo/domReady!'], function (dom, domProp) {
            var input = dom.byId('userName');
            console.log(domProp.get(input, 'id'));
            console.log(domProp.get(input, 'type'));
            console.log(domProp.get(input, 'placeholder'));
            console.log(domProp.get(input, 'value'));
        });
    </script>
</body>
</html>

运行结果如下所示：

userName
text
请输入用户名
admin

4.2、set

dojo/dom-prop模块提供了set方法用来设置dom元素的property。下面代码演示了将文本框变为密码框的操作。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>demo</title>
    <script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
    <input id="userName" type="text" placeholder="请输入用户名" value="admin" />
    <script>
        require(['dojo/dom', 'dojo/dom-prop', 'dojo/domReady!'], function (dom, domProp) {
            var input = dom.byId('userName');

            // set
            domProp.set(input, 'id', 'password');
            domProp.set(input, 'type', 'password');
            domProp.set(input, 'placeholder', '请输入密码');
            domProp.set(input, 'value', '123456');

            // get
            console.log(domProp.get(input, 'id'));
            console.log(domProp.get(input, 'type'));
            console.log(domProp.get(input, 'placeholder'));
            console.log(domProp.get(input, 'value'));
        });
    </script>
</body>
</html>

运行结果如下所示：

password
password
请输入密码
123456

5、dojo/dom-attr模块

5.1、get

dojo/dom-attr模块中的get方法可以用来获取dom元素的属性值，下面代码演示了获取一个超链接属性的操作：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>demo</title>
    <script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
    <a id="hyperLink" href="http://www.baidu.com" target="_blank">百度链接</a>
    <script>
        require(['dojo/dom', 'dojo/dom-attr', 'dojo/domReady!'], function (dom, domAttr) {
            var link = dom.byId('hyperLink');
            console.log(domAttr.get(link, 'id'));
            console.log(domAttr.get(link, 'href'));
            console.log(domAttr.get(link, 'target'));
            console.log(domAttr.get(link, 'innerHTML'));
        });
    </script>
</body>
</html>

运行结果如下所示：

hyperLink
http://www.baidu.com
_blank
百度链接

5.2、set

dojo/dom-attr模块中的set方法可以用来设置dom元素的属性值，下面代码演示了将百度链接改为网易链接的操作：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>demo</title>
    <script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
    <a id="hyperLink" href="http://www.baidu.com" target="_blank">百度链接</a>
    <script>
        require(['dojo/dom', 'dojo/dom-attr', 'dojo/domReady!'], function (dom, domAttr) {
            var link = dom.byId('hyperLink');

            // set
            domAttr.set(link, 'href', 'https://www.163.com');
            domAttr.set(link, 'target', '_self');
            domAttr.set(link, 'innerHTML', '网易链接');

            // get
            console.log(domAttr.get(link, 'id'));
            console.log(domAttr.get(link, 'href'));
            console.log(domAttr.get(link, 'target'));
            console.log(domAttr.get(link, 'innerHTML'));
        });
    </script>
</body>
</html>

运行结果如下所示：

hyperLink
https://www.163.com
_self
网易链接

5.3、has

dojo/dom-attr模块中的has方法可以用来判断dom元素是否包含某个属性值，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>demo</title>
    <script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
    <a id="hyperLink" href="http://www.baidu.com">百度链接</a>
    <script>
        require(['dojo/dom', 'dojo/dom-attr', 'dojo/domReady!'], function (dom, domAttr) {
            var link = dom.byId('hyperLink');
            console.log('是否包含id属性：' + domAttr.has(link, 'id'));
            console.log('是否包含href属性：' + domAttr.has(link, 'href'));
            console.log('是否包含target属性：' + domAttr.has(link, 'target'));
            console.log('是否包含style属性：' + domAttr.has(link, 'style'));
        });
    </script>
</body>
</html>

运行结果如下所示：

是否包含id属性：true
是否包含href属性：true
是否包含target属性：false
是否包含style属性：false

5.4、remove

dojo/dom-attr模块中的remove方法可以用来移除dom元素中的某个属性值，下面代码演示了移除超链接中的href属性：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>demo</title>
    <script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body>
    <a id="hyperLink" href="http://www.baidu.com" target="_blank">百度链接</a>
    <script>
        require(['dojo/dom', 'dojo/dom-attr', 'dojo/domReady!'], function (dom, domAttr) {
            var link = dom.byId('hyperLink');
            domAttr.remove(link, 'href');
        });
    </script>
</body>
</html>

运行程序可以发现，由于href属性被移除，因此点击超链接没有反应。

6、结语

本文介绍了Dojo中基础的dom操作方法，主要涉及到dojo/dom、dojo/dom-construct、dojo/dom-prop、dojo/dom-attr等内置模块。只要熟悉了Dojo的模块化思想，你会发现它其实并不难，甚至很多思想值得去借鉴并应用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/333383.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Xshell 安装及使用方法

Xshell 安装及使用方法

公网地址&#xff1a;47.XXX.XXX.229 私网地址&#xff1a;172.XXX.128.XXX 用户&#xff1a;root 密码&#xff1a;1234561,百度xshell&#xff0c;下载&#xff0c;安装Xshell 2&#xff0c;填写配置及使用方式 主机&#xff1a;47.XXX.XXX.229 用户&#xff1a;root 密码&a…
阅读更多...
SpringCloud学习笔记 - 系统自适应限流 - Sentinel

SpringCloud学习笔记 - 系统自适应限流 - Sentinel

1. Sentinel 系统自适应限流 Sentinel 系统自适应限流从整体维度对应用入口流量进行控制&#xff0c;结合应用的 Load、CPU 使用率、总体平均 RT、入口 QPS 和并发线程数等几个维度的监控指标&#xff0c;通过自适应的流控策略&#xff0c;让系统的入口流量和系统的负载达到一…
阅读更多...
第五十一章 BFS进阶（一）——双端队列广搜

第五十一章 BFS进阶（一）——双端队列广搜

第五十一章 BFS进阶&#xff08;一&#xff09;——双端队列广搜一、原理二、例题1、问题2、分析三、代码一、原理 在介绍双端队列广搜之前&#xff0c;我们先回顾一下堆优化版本的dijkstradijkstradijkstra算法。 在这个算法中&#xff0c;我们使用的是小根堆来找到距离起点…
阅读更多...
java基础—Volatile关键字详解

java基础—Volatile关键字详解

java基础—Volatile关键字详解 文章目录java基础—Volatile关键字详解并发编程的三大特性&#xff1a;volatile的作用是什么volatile如何保证有可见性volatile保证可见性在JMM层面原理volatile保证可见性在CPU层面原理可见性问题的例子volatile如何保证有序性单例模式使用volat…
阅读更多...
概率统计·假设检验【正态总体均值的假设检验、正态总体方差的假设检验】

概率统计·假设检验【正态总体均值的假设检验、正态总体方差的假设检验】

均值假设检验定义 2类错误 第1类错误&#xff08;弃真&#xff09;&#xff1a;当原假设H0为真&#xff0c;观察值却落入拒绝域&#xff0c;因而拒 绝H0这类错误是“以真为假” 犯第一类错误的概率显著性水平α第2类错误&#xff08;取伪&#xff09;&#xff1a;当原假设H0不…
阅读更多...
基于参数化模型的3D产品配置器开发

基于参数化模型的3D产品配置器开发

当我被要求为客户创建3D产品配置器时&#xff0c;我想到的第一个平台是 SketchFab。 我是在澳大利亚墨尔本的 SAE 创意媒体学院学习计算机动画时接触到它的。 推荐&#xff1a;使用 NSDT场景设计器 快速搭建 3D场景。 1、基于Sketchfab开发3D产品配置器 SketchFab 是在线共享…
阅读更多...
码住！为什么一定要做tiktok小店？赶快来开启爆单模式！

码住！为什么一定要做tiktok小店？赶快来开启爆单模式！

随着短视频和社交电商的结合&#xff0c;商家的变现渠道变得更加宽广。各大平台也开启了直播带货的赛道&#xff0c;在跨境行业中&#xff0c;tiktok小店也是商家们关注的渠道。很多商家也开始做tiktok小店&#xff0c;那我们可以先了解一下这小店的优势。tiktok小店拥有优质的…
阅读更多...
并发线程、锁、ThreadLocal

并发线程、锁、ThreadLocal

并发编程并发编程Java内存模型&#xff08;JMM&#xff09;并发编程核心问题—可见性、原子性、有序性volatile关键字原子性原子类CAS(Compare-And-Swap 比较并交换)ABA问题Java中的锁乐观锁和悲观锁可重入锁读写锁分段锁自旋锁共享锁/独占锁公平锁/非公平锁偏向锁/轻量级锁/重…
阅读更多...
02- pandas 数据库 (机器学习)

02- pandas 数据库 (机器学习)

pandas 数据库重点: pandas 的主要数据结构: Series (一维数据)与 DataFrame (二维数据)。 pd.DataFrame(data np.random.randint(0,151,size (5,3)), # 生成pandas数据 index [Danial,Brandon,softpo,Ella,Cindy], # 行索引 …
阅读更多...
J6412四网口迷你主机折腾虚拟机教程

J6412四网口迷你主机折腾虚拟机教程

今天给大家做一个四网口迷你主机折腾虚拟机的安装教程&#xff0c;主机采用的是maxtang大唐NUC J6412 intel i226V四网口的迷你主机&#xff0c;这款主机它是不能直接装上NAS的&#xff0c;必须使用虚拟机系统&#xff0c;近期研究了下然后做了一个教程分享给大家。 首先需要做…
阅读更多...
Antd-table全选踩坑记录

Antd-table全选踩坑记录

目录 一、需求 二、问题 ​编辑三、解决 四、全选选中所有数据而不是当前页 一、需求 最近遇到一个小小的需求&#xff0c;在我们这个项目中&#xff0c;有一个表格需要添加全选删除功能。这还不简单吗&#xff0c;于是我找到andt的官网&#xff0c;咔咔咔一顿cv&#xff0…
阅读更多...
「自控元件及线路」14 电子电力技术与功率放大器概述

「自控元件及线路」14 电子电力技术与功率放大器概述

本节介绍电子电力技术的基本概念 本节介绍PD、SCR、GTR、MOSFET、IGBT等电子电力器件 本节介绍功率放大器的基本概念和线性功率放大器 文章目录电力电子技术概述电能变换电子电力器件功率二极管PD晶闸管SCR功率晶体管GTR功率场效应晶体管PowerMOSFET绝缘栅双极晶体管IGBT功率放…
阅读更多...
代码随想录.力扣.二叉树.105/106. 从中序与前序/后序序列构造二叉树

代码随想录.力扣.二叉树.105/106. 从中序与前序/后序序列构造二叉树

题目&#xff1a; 给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。 示例 1: 输入: preorder [3,9,20,15,7], inorder [9,3,15,20,7] 输出: [3,9,2…
阅读更多...
Notion 笔记Mac及windows客户端汉化

Notion 笔记Mac及windows客户端汉化

1、 注册/登录账号&#xff1a; https://www.notion.so/zh-cn 2、下载电脑软件应用&#xff1a; https://www.notion.so/desktop 下载完成后&#xff0c;安装到电脑中&#xff0c;界面如下&#xff1a; 3、下载汉化js插件 地址&#xff1a;https://github.com/Reamd7/n…
阅读更多...
String、StringBuffer、StringBuilder有什么区别？

String、StringBuffer、StringBuilder有什么区别？

第5讲 | String、StringBuffer、StringBuilder有什么区别&#xff1f; 今天我会聊聊日常使用的字符串&#xff0c;别看它似乎很简单&#xff0c;但其实字符串几乎在所有编程语言里都是个特殊的存在&#xff0c;因为不管是数量还是体积&#xff0c;字符串都是大多数应用中的重要…
阅读更多...
【PR】源窗口

【PR】源窗口

【PR】源窗口源窗口粗剪源窗口按钮功能标记按钮出入点相关插入与覆盖插入覆盖导出帧使用软件&#xff1a;Premiere2020 源窗口粗剪 我们手上可能有一些很长的视频&#xff0c;但是我就想要其中的几段&#xff0c;这个时候粗剪就很方便&#xff0c;把想要的视频段落剪出来先凑一…
阅读更多...
私募证券基金动态-23年1月报

私募证券基金动态-23年1月报

成交量&#xff1a;1月日均7,901.31亿元2023年1月A股两市日均成交7,901.31亿元&#xff0c;环比上升0.33%、同比下降25.18%。1月恰逢春节仅16个交易日&#xff0c;节后2个交易日交易量明显回暖。管理人&#xff1a;新提交备案51家&#xff0c;备案通过21家1月新提交备案申请的5…
阅读更多...
分析了 200 个 DeFi 项目,我发现了这些规律

分析了 200 个 DeFi 项目,我发现了这些规律

作者&#xff1a;Ren & Heinrich翻译&#xff1a;dongdong在这篇文章中&#xff0c;我分享了我通过分析当前排名前 200 的 DeFi 加密项目的见解。这不是一项学术研究。尽管如此&#xff0c;这些发现对加密货币投资者来说具有附加值。我使用 https://defillama.com/ 的公共数…
阅读更多...
财报解读：业务复苏迹象明显，中国中免能否重写增长神话？

财报解读：业务复苏迹象明显，中国中免能否重写增长神话？

2月3日&#xff0c;中国中免披露2022年度业绩快报&#xff0c;2022年总营收为544.63亿元&#xff0c;同比下降19.52%&#xff1b;实现归属于上市公司股东的净利润50.25亿元&#xff0c;同比下降47.95%。来源&#xff1a;中国中免2022年度业绩快报业绩近乎腰斩&#xff0c;但从长…
阅读更多...
库存管理系统软件哪个好用 盘点前十名！

库存管理系统软件哪个好用 盘点前十名！

库存管理怎么做&#xff1f;库存管理系统有什么用处&#xff1f;市面上那么多库存管理系统&#xff0c;我们又如何挑选呢&#xff1f; 本文将为您介绍库存管理系统挑选的方法以及库存管理系统的选型。 库存管理系统前十名为&#xff1a;1、简道云库存管理软件&#xff1b;2、…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023