JavaScript 如何访问表单中的元素

问表单中的元素

每个表单中的元素,无论是文本框、单选按钮、下拉列表框或者其他的内容，都包含在form的elements集合中。

可以利用元素在集合中的位置或者元素的name属性来获得该元素的引用；

var oForm = document.forms["myform1"]; // 获取表单
var oTextName = oForm.elements[0]; // 获取第一个元素
var oTextPasswd = oForm.elements["passwd"]; // 获取name属性为passwd
var oTextComments = oForm.elements.comments; //获取name属性为comments的元素

访问表单中元素方法的汇总:

<form name="MyForm" id="MyForm">
<input type="text" name="MyTextA" id="MyTextA" value="Default Value A!"/>
<input type="text" name="MyTextB" id="MyTextB" value="Default Value B!"/>
</form>

var MyValue = document.MyForm.MyTextB.value; //最佳的方法
var MyValue = document.MyForm.elements[1].value;
var MyValue = document.forms["MyForm"].MyTextB.value;
var MyValue = document.forms["MyForm"].elements[1].value;
var MyValue = document.forms["index"].MyTextB.value;
var MyValue = document.forms["index"].elements[1].value;
var MyValue = document.getElementById("MyTextB").value; //最佳的方法,符合W3C标准
var MyValue = document.all.MyTextB.value; //经过测试等同于document.all.MyForm.MyTextB.value

表单是否加入<div></div>标签,都不影响上面的访问的方式

"MyForm"指的是表单name的值

form表单对象的属性和方法

action 表单所要提交到的URL地址

elements 数组,表单中所有表单域的集合

enctype 表单向服务器发送数据时,数据应该使用的编码方法,默认为application/x-www-form-urlencoded,

如果要上传文件,则应该使用multipart/form-data

length 表单域的数量

method 浏览器发送GET请求或者POST请求

name 表单的名称,即<form>标记中的name属性

submit() 提交表单到指定的页面,相当于单击submit按钮

reset() 重置表单中的各项到初始值,相当于单击reset按钮

节内容是"VBA信息获取与处理"教程中第八个专题"VBA与HTML文档"的第五节。，希望想掌握这方面知识的朋友能参考我的教程学习。

第五节 HTML文档的访问端口DOM (Document Object Model)

大家好，我们继续对HTML文档进行学习，在前几节中我们认识了网页文档上面的各种元素，那么我们又该怎么访问他们呢，是如何实现呢？其实，HTML文档，提供了访问其元素的端口，这就是HTML DOM，其定义了一套标准的针对 HTML 文档的对象访问或操作的机制。HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

1 HTML DOM (Document Object Model) 对象集合

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 HTML 文档的根节点。

特别注意：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

集合描述

all[] 提供对文档中所有 HTML 元素的访问。

anchors[] 返回对文档中所有 Anchor 对象的引用。

applets 返回对文档中所有 Applet 对象的引用。

forms[] 返回对文档中所有 Form 对象引用。

images[] 返回对文档中所有 Image 对象引用。

links[] 返回对文档中所有 Area 和 Link 对象引用。

VBA直接支持调用的对象有限，如下：

对象描述

Document 代表整个 HTML 文档，可被用来访问页面中的所有元素

Anchors 代表 <a> 元素集合

Body 代表 <body> 元素

Forms 代表 <form> 元素集合

Frames 代表 <frame> 元素或<iframe> 元素集合

Images 代表 <img> 元素集合

Links 代表 <link> 元素集合

Options 代表 <option> 元素集合（select元素里面可以直接使用）

Cells 代表 <td> 元素集合（table元素里面可以直接使用）

Rows 代表 <tr> 元素集合（table元素里面可以直接使用）

All 对象集合，提供对文档中所有 HTML 元素的访问。

上述VBA支持直接调用对象的元素，调用起来就非常方便了，可以用序号调用，例如forms(0)，也可以按名称/ID调用，例如forms("名称/ID")。其他没法直接调用对象的元素，可以间接从通用all对象集合中去调用该元素或该元素对应的dom对象。

2 HTML DOM 文档的节点及文档树

在HTML DOM中，所有事物都是节点。DOM 是被视为节点树的 HTML文档的每一部分都是节点，整个文档被定义为一个文档节点，每个标签是一个元素节点，包含在元素中的文本是文本节点，每一个元素的属性是一个属性节点。如下：

1）整个文档是一个文档节点

2）每个 HTML 元素是元素节点

3）HTML 元素内的文本是文本节点

4）每个 HTML 属性是属性节点

5）注释是注释节点

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树，这时一个非常形象的比喻，根节点就是html，主干就是body等，枝干就是body内含的各种元素节点，叶子和花就是元素节点关联的元素的属性（属性节点）或内含文本（文本节点）。

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。节点树中的节点彼此拥有层级关系。父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

网页文档，可以说是由元素组合而成的，也可以说是由节点连接而成的树构造的。节点是文档树结构中特有的名词，元素是节点，但是节点不一定是元素，节点还有文档节点、文本节点、属性节点等；元素是元素节点的扩展，元素可以拥有属性还有文本。初学者不是很必要纠结元素和节点的区别，这个需要甚至数据结构、类和继承等知识。可大致理解为，同一个html dom对象，提供的两个不同接口。如下的程序，你会发现，他既有支持node（节点）的相关属性和方法，也提供了element（元素）的相关属性和方法。

Sub MYNZ()

Dim ie, dmt, bd

Set ie = CreateObject("InternetExplorer.Application") '创建一个IE对象

With ie

.Visible = True '显示它

.navigate "http://www.baidu.com" '加载某个页面

Do Until .ReadyState = 4 '等待页面加载完毕

DoEvents

Loop

Set dmt = .document '将IE浏览器加载的页面文档，赋予dmt变量

Set bd = dmt.body '将文档的body赋予bd变量

End With

End Sub

代码截图：

按F8键运行截图：

3 HTML DOM 文档的对象属性

属性是节点（HTML 元素）的值，您能够获取或设置。所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。我们看看下面一些常见的属性：

1）innerHTML 属性对象内部的HTML代码，是获取元素内容的最简单方法。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

下面的代码获取 id="intro" 的 <p> 元素的 innerHTML：

var txt=document.getElementById("intro").innerHTML;

document.write(txt);

2）OuterHtml：对象的HTML代码，包括对象本身的HTML标签

3）innerText：对象内部的文本

4）OuterText：对象的文本，包括对象本身的文本

5）nodeName 属性 nodeName 属性规定节点的名称。

nodeName 是只读的

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 与属性名相同

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document

注释：nodeName 始终包含 HTML 元素的大写字母标签名。

6）nodeValue 属性 nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

7）nodeType 属性 nodeType 属性返回节点的类型。nodeType 是只读的。

比较重要的节点类型有：

元素类型 NodeType

元素 1

属性 2

文本 3

注释 8

文档 9

以上只是给出了属性值，大家在使用的时候要注意。

本节知识点回向：

什么是HTML DOM文档的属性，常用的属性有哪些。

本节参考文件：008工作表.xlsm

积木编程的思路内涵：

在我的系列书籍中一直在强调"搭积木"的编程思路，这也是学习利用VBA的主要方法，特别是职场人员，更是要采用这种方案。其主要的内涵：

1 代码不要自己全部的录入。你要做的是把积木放在合适的位置然后去修正代码，一定要拷贝，从你的积木库中去拷贝，然后修正代码，把时间利用到高效的思考上。

2 建立自己的"积木库"。平时在学习过程中，把自己认为有用的代码放在一起，多积累，在用到的时候，可以随时拿来。你的积木库资料越多，你做程序的思路就会越广。

VBA的应用界定

VBA是利用Office实现个人小型办公自动化的有效手段（工具）。这是我对VBA的应用界定。在取代OFFICE新的办公软件没有到来之前，谁能在数据处理方面做到极致，谁就是王者。其中登峰至极的技能非VBA莫属！

我记得20年前自己初学VBA时，那时的资料甚少，只能看源码自己琢磨,真的很难。20年过去了，为了不让学习VBA的朋友重复我之前的经历，我根据自己多年VBA实际利用经验，推出了六部VBA专门教程：

第一套：VBA代码解决方案 是VBA中各个知识点的讲解，教程共147讲，覆盖绝大多数的VBA知识点，初学必备；

第二套：VBA数据库解决方案 数据库是数据处理的专业利器，教程中详细介绍了利用ADO连接ACCDB和EXCEL的方法和实例操作，适合中级人员的学习。

第三套：VBA数组与字典解决方案 数组和字典是VBA的精华，字典是VBA代码水平提高的有效手段，值得深入的学习，是初级及中级人员代码精进的手段。

第四套：VBA代码解决方案之视频 是专门面向初学者的视频讲解，可以快速入门，更快的掌握这门技能。这套教程是第一套教程的视频讲解，听元音更易接受。

第五套：VBA中类的解读和利用这是一部高级教程，讲解类的虚无与肉身的度化，类的利用虽然较少，但仔细的学习可以促进自己VBA理论的提高。这套教程的领会主要是读者的领悟了，领悟一种佛学的哲理。

第六套教程：《VBA信息获取与处理》，这是一部高级教程，涉及范围更广，实用性更强，面向中高级人员。教程共二十个专题，包括：跨应用程序信息获得、随机信息的利用、电子邮件的发送、VBA互联网数据抓取、VBA延时操作，剪切板应用、Split函数扩展、工作表信息与其他应用交互，FSO对象的利用、工作表及文件夹信息的获取、图形信息的获取以及定制工作表信息函数等等内容。

大家可以根据以上资料1→3→2→6→5或者是4→3→2→6→5的顺序逐渐深入的逐渐学习。教程提供讲解的同时提供了大量的积木，如需要可以WeChat: NZ9668

学习VBA是个过程，也需要经历一种枯燥的感觉

如太白诗云：众鸟高飞尽，孤云独去闲。相看两不厌，只有敬亭山。学习的过程也是修心的过程，修一个平静的心。在代码的世界中，心平静了，心情好了，身体自然而然就好。心静则正，内心里没有那么多邪知邪见，也就没有那么多妄想。利人就是利己。这些教程也是为帮助大家起航，助上我自己之力，我的上述教程是我多的经验的传递，

"水善利万物而不争"，绵绵密密，微则无声，巨则汹涌。学习亦如此，知道什么是自己所需要的，不要蜷缩在一小块自认为天堂的世界里，待到暮年时再去做自欺欺人的言论。要努力提高自己，用一颗充满生机的心灵，把握现在，这才是进取。越是有意义的事情，困难会越多。愿力决定始终，智慧决定成败。不管遇到什么，都是风景。看淡纷争，看轻得失。茶，满也好，少也好，不要计较；浓也好，淡也好，其中自有值得品的味道。去感悟真实的时间，静下心，多学习，积累福报。而不是天天混日子，也不是天天熬日子。在后疫情更加严峻的存量残杀世界中，为自己的生存进行知识的储备，特别是新知识的储备。学习时微而无声，利用时则巨则汹涌。

每一分收获都是成长的记录，怎无凭，正是这种执着，成就了朝霞的灿烂。最后将一阙词送给致力于VBA学习的朋友,让大家感受一下学习过程的枯燥与执着：

浮云掠过，暗语无声，

唯有清风，惊了梦中啼莺。

望星，疏移北斗，

奈将往事雁同行。

阡陌人，昏灯明暗，

忍顾长亭。

多少VBA人，

暗夜中，悄声寻梦，盼却天明。

怎无凭！

回向学习利用VBA的历历往事，不胜感慨，谨以这些文字给大家，分享我多年工作实际经验的成果，随喜这些有用的东西，给确实需要利用VBA的同路人。

分享成果，随喜正能量

者：社会主义接班人cnblogs.com/5ishare/p/10461073.html

用户权限管理一般是对用户页面、按钮的访问权限管理。Shiro框架是一个强大且易用的Java安全框架，执行身份验证、授权、密码和会话管理，对于Shiro的介绍这里就不多说。本篇博客主要是了解Shiro的基础使用方法，在权限管理系统中集成Shiro实现登录、url和页面按钮的访问控制。

一、引入依赖

使用SpringBoot集成Shiro时，在pom.xml中可以引入shiro-spring-boot-web-starter。由于使用的是thymeleaf框架，thymeleaf与Shiro结合需要引入thymeleaf-extras-shiro。

二、增加Shiro配置

有哪些url是需要拦截的，哪些是不需要拦截的，登录页面、登录成功页面的url、自定义的Realm等这些信息需要设置到Shiro中，所以创建Configuration文件ShiroConfig。

ShiroDialect这个bean对象是在thymeleaf与Shiro结合，前端html访问Shiro时使用。

三、自定义Realm

在自定义的Realm中继承了AuthorizingRealm抽象类，重写了两个方法：doGetAuthorizationInfo和doGetAuthenticationInfo。doGetAuthorizationInfo主要是用来处理权限配置，doGetAuthenticationInfo主要处理身份认证。

这里在doGetAuthorizationInfo中，将role表的id和permission表的code分别设置到SimpleAuthorizationInfo对象中的role和permission中。

还有一个地方需要注意：@Component("authorizer")，刚开始我没设置，但报错提示需要一个authorizer的bean，查看AuthorizingRealm可以发现它implements了Authorizer，所以在自定义的realm上添加@Component("authorizer")就可以了。

四、登录认证

1.登录页面

这里做了一个非常丑的登录页面，主要是自己懒，不想在网上复制粘贴找登录页面了。

2.处理登录请求

在LoginController中通过登录名、密码获取到token实现登录。

五、Controller层访问控制

1.首先来数据库的数据，两张图是用户角色、和角色权限的数据。

2.设置权限

这里在用户页面点击编辑按钮时设置需要有id=002的角色，在点击选择角色按钮时需要有code=002的权限。

@RequestMapping(value = "/edit",method = RequestMethod.GET)
 @RequiresRoles("002")//权限管理;
 public String editGet(Model model,@RequestParam(value="id") String id) {
 model.addAttribute("id", id);
 return "/user/edit";
 }

@RequestMapping(value = "/selrole",method = RequestMethod.GET)
 @RequiresPermissions("002")//权限管理;
 public String selctRole(Model model,@RequestParam("id") String id,@RequestParam("type") Integer type) {
 model.addAttribute("id",id);
 model.addAttribute("type", type);
 return "/user/selrole";
 }

当使用用户001登录时，点击编辑，弹出框如下，提示没有002的角色

点击选择角色按钮时提示没有002的权限。

当使用用户002登录时，点击编辑按钮，显示正常，点击选择角色也是提示没002的权限，因为权限只有001。

六、前端页面层访问控制

有时为了不想像上面那样弹出错误页面，需要在按钮显示上进行不可见，这样用户也不会点击到。前面已经引入了依赖并配置了bean，这里测试下在html中使用shiro。

1.首先设置html标签引入shiro

<html xmlns:th="http://www.thymeleaf.org"
 xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

2.控制按钮可见

这里使用shiro:hasAnyRoles="002,003"判断用户角色是否是002或003，是则显示不是则不显示。

 <div class="layui-inline">
 <a shiro:hasAnyRoles="002,003" class="layui-btn layui-btn-normal newsAdd_btn" onclick="addUser('')">添加用户</a>
 </div>
 <div class="layui-inline">
 <a shiro:hasAnyRoles="002,003" class="layui-btn layui-btn-danger batchDel" onclick="getDatas();">批量删除</a>
 </div>

当001用户登录时，添加用户、批量删除按钮都不显示，只显示查询按钮。

当002用户登录时，添加用户、批量删除按钮都显示

七、小结

这里只是实现了Shiro的简单的功能，Shiro还有很多很强大的功能，比如session管理等，而且目前权限管理模块还有很多需要优化的功能，左侧导航栏的动态加载和权限控制、Shiro与Redis结合实现session共享、Shiro与Cas结合实现单点登录等。后续可以把项目做为开源项目，慢慢完善集成更多模块例如：Swagger2、Redis、Druid、RabbitMQ等供初学者参考。

在线咨询

上一篇：Python 函数合集：足足 68 个内置函数请收好
下一篇：简单小程序：登录页面（html）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商