ArcGIS API for JavaScript 4.15系列（5）——Dojo中的query查询器

news/2024/11/2 4:36:40/

1、前言

在之前的博客中，我们一直通过dom.byId方法来获取dom元素。但在实际开发过程中，单凭id获取dom元素是无法满足开发需求的，例如根据css样式名称获取对应的dom元素集合、获取某个div下所有的超链接<a>元素等。Dojo中提供了dojo/query模块，该模块可实现复杂情况下的dom元素拾取，下面开始介绍。

2、基础查询器

dojo/query模块提供了非常多灵活实用的方法来拾取dom元素，基础的方法包括根据id、class、tag获取dom元素。

2.1、根据id获取dom元素

dojo/query模块支持根据id获取dom元素。不过在写法上与dom.byId有所不同，代码如下：

<!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="title">这是一个标题</h1><script>require(['dojo/query', 'dojo/domReady!'], function (query) {var title = query('#title')[0].innerHTML;console.log(title);});</script>
</body>
</html>

query方法需要传入dom元素的id值，同时要加上一个#符号。同时，query方法返回的是一个数组，因此需要写为query('#id')[0]的形式。运行结果如下所示：

这是一个标题

2.2、根据class获取dom元素

query查询器允许根据css名称获取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><style>.one {color: red;}.two {color: blue;}</style><script src="http://localhost/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
</head>
<body><h1 class="one">这是标题1</h1><h1 class="two">这是标题2</h1><h1 class="one">这是标题3</h1><h1 class="two">这是标题4</h1><script>require(['dojo/query', 'dojo/domReady!'], function (query) {// 查询class="one"的元素集合var titles = query('.one');titles.forEach(function (title) {console.log(title.innerHTML);})console.log('----------');// 查询class="two"的元素集合titles = query('.two');titles.forEach(function (title) {console.log(title.innerHTML);})});</script>
</body>
</html>

运行结果如下所示：

这是标题1
这是标题3
----------
这是标题2
这是标题4

2.3、根据tag标签获取dom元素

query查询器允许根据tag标签名称获取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>这是标题1</h1><h1>这是标题2</h1><h1>这是标题3</h1><h1>这是标题4</h1><script>require(['dojo/query', 'dojo/domReady!'], function (query) {var titles = query('h1');titles.forEach(function (title) {console.log(title.innerHTML);})});</script>
</body>
</html>

运行结果如下所示：

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

3、层次查询器

在实际业务中，根据各个dom元素之间的层次关系查询也是常见操作。一般的层级关系包括祖先后代关系，父子关系、相邻兄弟关系。

3.1、祖先后代关系

dojo/query模块支持根据祖先与后代的层级关系获取dom元素。下面代码演示了获取body下所有的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 style="background-color: red;"><h1>这是标题1</h1><h1>这是标题2</h1></div><div style="background-color: yellow;"><h1>这是标题3</h1><h1>这是标题4</h1></div><script>require(['dojo/query', 'dojo/domReady!'], function (query) {// 获取body下所有的divquery('body div').forEach(function (div) {console.log('背景色：' + div.style.backgroundColor);})console.log('--------');// 获取body下所有的h1query('body h1').forEach(function (title) {console.log(title.innerHTML);})});</script>
</body>
</html>

运行结果如下所示：

背景色：red
背景色：yellow
--------
这是标题1
这是标题2
这是标题3
这是标题4

3.2、父子关系

父子关系与祖先后代关系略有不同，祖先后代关系可以向下无限层级查询，而父子关系只能向下查询一级。例如body与div是父子关系，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 style="background-color: red;"><h1>这是标题1</h1><h1>这是标题2</h1></div><div style="background-color: yellow;"><h1>这是标题3</h1><h1>这是标题4</h1></div><script>require(['dojo/query', 'dojo/domReady!'], function (query) {// body与div为父子关系query('body>div').forEach(function (div) {console.log('背景色：' + div.style.backgroundColor);})console.log('--------');// div与h1为父子关系query('div>h1').forEach(function (title) {console.log(title.innerHTML);})console.log('--------');// body与h1不是父子关系，因此无法获取h1文本query('body>h1').forEach(function (title) {console.log(title.innerHTML);})});</script>
</body>
</html>

运行结果如下所示：

背景色：red
背景色：yellow
--------
这是标题1
这是标题2
这是标题3
这是标题4
--------

3.3、相邻兄弟关系

dojo/query也支持相邻兄弟关系的查询。该关系指的是某个元素相邻的下一个dom元素，在下面的代码中，box1与box2为相邻兄弟关系，box2与box3为相邻兄弟关系：

<!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="box1" style="background-color: red;"></div><div id="box2" style="background-color: yellow;"></div><div id="box3" style="background-color: green;"></div><script>require(['dojo/query', 'dojo/domReady!'], function (query) {// box1的相邻兄弟为box2query('#box1+div').forEach(function (div) {console.log('背景色：' + div.style.backgroundColor);})console.log('--------');// box2的相邻兄弟为box3query('#box2+div').forEach(function (div) {console.log('背景色：' + div.style.backgroundColor);})});</script>
</body>
</html>

运行结果如下所示：

背景色：yellow
--------
背景色：green

3.4、对层级关系做一定限制

在实际开发过程中，一个页面往往包含众多的的dom元素，因此很多情况下我们只希望只在特定的dom元素下执行层次查询。下面代码演示了在id="box1"的div内执行层次查询：

<!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="box1"><h1>这是标题1</h1><h1>这是标题2</h1><p>这是段落1</p><p>这是段落2</p><div id="child1" style="background-color:red;"></div><div id="child2" style="background-color:blue;"></div></div><div id="box2"><h1>这是标题3</h1><h1>这是标题4</h1><p>这是段落3</p><p>这是段落4</p><div id="child3" style="background-color:red;"></div><div id="child4" style="background-color:blue;"></div></div><script>require(['dojo/query', 'dojo/domReady!'], function (query) {// box1下执行祖先后代查询query('#box1 h1').forEach(function (item) {console.log(item.innerHTML);})console.log('--------');// box1下执行父子查询query('#box1>p').forEach(function (item) {console.log(item.innerHTML);})console.log('--------');// box1下执行相邻兄弟查询query('#box1 #child1+div').forEach(function (item) {console.log('背景色：' + item.style.backgroundColor);})});</script>
</body>
</html>

运行结果如下所示：

这是标题1
这是标题2
--------
这是段落1
这是段落2
--------
背景色：blue

4、属性查询器

在针对form表单进行查询时，我们常常需要根据某些属性进行定位。

4.1、查询包含某个属性的表单元素

下面代码演示了查询包含type属性的表单元素：

<!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><input type="text" name="userName" value="admin" /><input type="password" name="password" value="12345" /></div><script>require(['dojo/query', 'dojo/domReady!'], function (query) {query('input[type]').forEach(function (item) {console.log(item.value);})});</script>
</body>
</html>

运行结果如下所示：

admin
12345

4.2、查询等于特定属性值的表单元素

下面代码演示了查询type=text和type=password的表单元素：

<!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><input type="text" name="userName" value="admin" /><input type="password" name="password" value="12345" /></div><script>require(['dojo/query', 'dojo/domReady!'], function (query) {query('input[type=text]').forEach(function (item) {console.log(item.value);})query('input[type=password]').forEach(function (item) {console.log(item.value);})});</script>
</body>
</html>

运行结果如下所示：

admin
12345

4.3、查询以某属性值开头的表单元素

Dojo中使用通配符^=表示以某个值开头，下面代码演示了查询name属性以user和pass开头的表单元素：

<!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><input type="text" name="userName" value="admin" /><input type="password" name="password" value="12345" /></div><script>require(['dojo/query', 'dojo/domReady!'], function (query) {query('input[name^=user]').forEach(function (item) {console.log(item.value);})query('input[name^=pass]').forEach(function (item) {console.log(item.value);})});</script>
</body>
</html>

运行结果如下所示：

admin
12345

4.4、查询以某属性值结尾的表单元素

Dojo中使用通配符$=表示以某个值结尾，下面代码演示了查询name属性以Name和word结尾的表单元素：

<!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><input type="text" name="userName" value="admin" /><input type="password" name="password" value="12345" /></div><script>require(['dojo/query', 'dojo/domReady!'], function (query) {query('input[name$=Name]').forEach(function (item) {console.log(item.value);})query('input[name$=word]').forEach(function (item) {console.log(item.value);})});</script>
</body>
</html>

运行结果如下所示：

admin
12345

4.5、查询包含某属性值的表单元素

Dojo中使用通配符*表示包含某个值，下面代码演示了查询name属性包含userN和passw的表单元素：

<!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><input type="text" name="userName" value="admin" /><input type="password" name="password" value="12345" /></div><script>require(['dojo/query', 'dojo/domReady!'], function (query) {query('input[name*=userN]').forEach(function (item) {console.log(item.value);})query('input[name*=passw]').forEach(function (item) {console.log(item.value);})});</script>
</body>
</html>

运行结果如下所示：

admin
12345

4.6、表单属性查询的一些代码

我在这里列举了一些Dojo中的表单属性查询方法，代码如下：

<!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><input type="text" disabled value="123" /><input type="text" readonly="readonly" value="456" /></div><div><input type="radio" name="gender" value="男" checked />男<input type="radio" name="gender" value="女" />女</div><div><input type="checkbox" name="city" value="上海" checked />上海<input type="checkbox" name="city" value="杭州" checked />杭州<input type="checkbox" name="city" value="南京" />南京<input type="checkbox" name="city" value="合肥" />合肥</div><div><select id="fruit"><option value="橘子" selected="selected">橘子</option><option value="菠萝">菠萝</option><option value="西瓜">西瓜</option></select></div><script>require(['dojo/query', 'dojo/domReady!'], function (query) {// 查询不可用的文本框query('input[type=text]:disabled').forEach(function (item) {console.log(item.value);})// 查询只读的文本框query('input[type=text][readonly=readonly]').forEach(function (item) {console.log(item.value);})// 查询单选按钮radio选中的值query('input[name=gender]:checked').forEach(function (item) {console.log(item.value);})// 查询复选框checkbox选中的值query('input[name=city]:checked').forEach(function (item) {console.log(item.value);})// 查询下拉框select选中的值query('#fruit>option[selected=selected]').forEach(function (item) {console.log(item.value);})});</script>
</body>
</html>

运行结果如下所示：

123
456
男
上海
杭州
橘子

5、结语

本文主要介绍了Dojo中的query查询器，主要涉及到基础查询、层次查询、属性查询三块内容。在实际开发过程中，在合适的场景下选择合适的查询方式可以让你的开发工作事半功倍。


http://www.ppmy.cn/news/24579.html

相关文章

软件工程(4)--螺旋模型

软件工程(4)--螺旋模型

前言 这是基于我所学习的软件工程课程总结的第四篇文章。 在软件开发过程中必须及时识别和分析风险&#xff0c;并且采取适当措施以消除或减少风险的危害。构建原型是一种能使某些类型的风险降至最低的方法。为了降低交付给用户的产品不能满足用户需要的风险&#xff0c;一种行…
阅读更多...
linux的三权分立设计思路和用户创建（安全管理员、系统管理员和审计管理员）

linux的三权分立设计思路和用户创建（安全管理员、系统管理员和审计管理员）

目录 一、三权分立设计思路 1、什么是三权 2、三员及权限的理解 3、三员之三权 4、权限划分 5、“三员”职责 6、“三员”配置要求 二、linux三权分立的用户创建 1、系统管理员 2、安全管理员 3、审计管理员 一、三权分立设计思路 1、什么是三权 三权指的是配置、…
阅读更多...
Python|每日一练|数组|回溯|哈希表|全排列|单选记录：全排列 II|插入区间|存在重复元素

Python|每日一练|数组|回溯|哈希表|全排列|单选记录：全排列 II|插入区间|存在重复元素

1、全排列 II&#xff08;数组&#xff0c;回溯&#xff09; 给定一个可包含重复数字的序列 nums &#xff0c;按任意顺序 返回所有不重复的全排列。 示例 1&#xff1a; 输入&#xff1a;nums [1,1,2]输出&#xff1a;[[1,1,2], [1,2,1], [2,1,1]] 示例 2&#xff1a; 输…
阅读更多...
Linux多线程

Linux多线程

目录 一、认识线程 1.1 线程概念 1.2 页表 1.3 线程的优缺点 1.3.1 优点 1.3.2 缺点 1.4 线程异常 二、进程 VS 线程 三、Linux线程控制 3.1 POSIX线程库 3.1 线程创建 3.3 线程等待 3.4 线程终止 3.4.1 return退出 3.4.2 pthread_exit() 3.4.3 pthread_cancel…
阅读更多...
【DSP视频教程】第11期：插补算法，曲线拟合丝滑顺畅，统计函数和基础函数加速实现，汇集SIMD，饱和和MAC乘累加应用实战(2023-02-12)

【DSP视频教程】第11期：插补算法，曲线拟合丝滑顺畅，统计函数和基础函数加速实现，汇集SIMD，饱和和MAC乘累加应用实战(2023-02-12)

视频教程汇总帖&#xff1a;https://www.armbbs.cn/forum.php?modviewthread&tid110519 DSP视频教程有段时间没有更新了。 当前DSP库从CMSIS软件包里面独立出来&#xff0c;并且更新非常频繁&#xff0c;所以本期视频教程优先给大家简单介绍下新版DSP&#xff0c; 然后为…
阅读更多...
AXI-Lite 学习笔记

AXI-Lite 学习笔记

AXI-Lite 学习笔记 参考 FPGA&#xff1a;AXI_Lite总线基础2-1]、第二节 AXI总线介绍、ZYNQ PL与PS交互专题_哔哩哔哩_bilibili AXI-Lite总线系列1 - 基础知识_哔哩哔哩_bilibili AXI4 介绍 AXI4 是ARM公司提出的一种片内总线&#xff0c;描述了主从设备之间的数据传输方式。主…
阅读更多...
移动设备安全管理基础指南

移动设备安全管理基础指南

什么是移动安全管理 &#xff08;MSM&#xff09; 移动安全管理是指为保护企业中的移动设备和企业数据而采取的行动。这些操作可以进一步被归类为反应性的或主动的&#xff0c;基于该操作是在数据和设备被破坏之前还是之后执行的。除了管理移动设备外&#xff0c;大多数MDM解决…
阅读更多...
3分钟，学会了一个调试CSS的小妙招

3分钟，学会了一个调试CSS的小妙招

Ⅰ. 作用 用于调试CSS , 比控制台添更加方便&#xff0c;不需要寻找 &#xff1b;边添加样式&#xff0c;边可以查看效果&#xff0c;适合初学者对CSS 的理解和学习&#xff1b; Ⅱ. 快速实现&#xff08;两边&#xff09; ① 显示这个样式眶 给 head 和 style 标签添加一个…
阅读更多...
最新文章

Copyright @ 2022~2023