JS基础11-DOM操作表单元素

最新推荐文章于 2022-11-07 17:13:40 发布
最新推荐文章于 2022-11-07 17:13:40 发布
阅读量169 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/LuckyGJX/p/8654692.html
版权

一、DOM访问表单控件的常用属性和方法如下：

 

action

返回该表单的提交地址

elements

返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件。

length

返回表单内表单域的个数

method

返回表单内的method属性，主要有get和post两个值

target

确定提交表单时的结果窗口，主要有_self、_blank、_top等

reset()、submit()

重置表单和确定表单方法

二、在elments返回的数组中访问具体的表单控件语法如下：

 

.elements[index]

返回该表单中第index个表单控件

.elements[elementName]

返回表单内id或name为elementName的表单控件

.elementName

返回表单内id或name为elementName的表单控件

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM操作表单元素</title>

</head>

<body>
<form  id="myform" action="https://www.baidu.com/" method="get" target="_blank">
    <input type="text" value="张三"><br>
    <input type="text" value="123" id="t2"><br>
    <select name="" id="t3">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="淄博">淄博</option>
        <option value="昆明" selected>昆明</option>
    </select>
    <br>
    <input type="button" value="获取表单内第一个控件" onClick="show(c.elements[0])">
    <input type="button" value="获取表单内第二个控件" onClick="show(c.elements['t2'])">
    <input type="button" value="获取表单内第三个控件" onClick="show(c.t3)">
    <input type="button" value="操作表单" onClick="show(c.reset())">
</form>

<!--从上往下执行，计算机先读取到id="myform",之后才能给声明的变量c赋值-->
<script type="text/javascript">
     var c=document.getElementById('myform');
    function show(curr){
        alert(curr.value);
    }
    
</script>
</body>
</html>

 

 

 

 

转载于:https://www.cnblogs.com/LuckyGJX/p/8654692.html

diajiu9420
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用DOM操作表单元素的属性-仿小米登录案例
weixin_43188011的博客
09-17 133
利用DOM操作表单元素的属性 表单元素的属性有：type,value,checked,selected,disabled 【仿小米登录案例】 点击按钮，将密码框切换为文本框，并可以查看密码明文 【案例分析】 1：核心思路：点击眼睛按钮，把密码类型改为文本框可以看到里面的密码。 2：一个按钮两个状态，点击一次，切换为文本框，继续点击一次切换为密码框。 3：算法：利用一个flag变量，来判断flag的值，如果是1就切换为文本框，然后将flag设置为0，如果是0就切换为密码框，flag设置为1。 【实战】
DOM：使用dom对表单元素的属性进行操作
weixin_46682277的博客
03-16 474
利用dom可以操作以下表单元素的属性： type value checked selected disabled 注意：innerHTML是对普通盒子，比如div标签里的内容起作用； 而表单里面的值，也就是文字内容是通过value来修改的。 如果想要某个表单被禁用，无法点击，将disabled的值等于true就可以了，false则解除禁用。 <button>点我</button> <input type="text" name="" id=""> <script
DOM——表单元素的属性操作
weixin_45328723的博客
07-20 177
DOM 表单属性操作
设计网页界面， 在JavaScript脚本中DOM控制HTML表单及表单元素
m0_61684063的博客
04-12 1041
设计网页界面， 在JavaScript脚本中DOM控制HTML表单及表单元素实验目的 （包含Document对象、document对象的属性、document对象的常用方法、DOM Element的常用方法、Form对象）
DOM和表单操作
zmmmm28qi的博客
05-29 227
DOM: 创建节点和插入节点 创建节点 方法 描述 createElement() 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象 createTextNode() 创建一个文本节点，可以传入文本内容 innerHTML ...
JS选取DOM元素常见操作方法实例分析
12-04
本文实例讲述了JS选取DOM元素常见操作方法。分享给大家供大家参考，具体如下： JS选取DOM元素的方法 注意：原生JS选取DOM元素比使用jQuery类库选取要快很多 1、通过ID选取元素 document.getElementById('myid'); 2...
JavaScript驾驭网页－DOM
12-03
DOM是一种编程接口，它是一套标准的API，允许开发者通过JavaScript等脚本语言来访问和操作HTML、XHTML以及XML文档中的各个元素。正如JDBC提供了与数据库交互的接口，DOM则提供了与网页内容互动的桥梁。 DOM的主要...
DOM基础教程之使用DOM控制表单
09-03
每个表单元素都有`name`属性，用于在提交表单时识别数据，而`id`属性则用于JavaScript中的引用和操作。 2. 访问表单对象 在JavaScript中，每个表单都会被解析为一个对象，可以通过`document.forms`集合来访问。例如...
14---JavaScript-and-DOM-Manipulation
04-28
此外，现代库和框架如 jQuery、React 和 Vue.js 进一步简化了 DOM 操作，提供了更高效和便捷的方法。 在 "14---JavaScript-and-DOM-Manipulation-master" 压缩包中，可能包含了示例代码、教程文档或练习项目，用于...
JavaScript-DOM-Injector:基于表单的自动化 HTML 构建器
06-05
JavaScript-DOM-注入器 基于表单的自动化 HTML 构建器。 依赖关系 支持 JavaScript 的浏览器（不需要 JQuery 或其他东西） 把它放在你的<body>底部 < script src =" js/injector.js " > </ script &...
DOM基础知识--操作元素
最新发布
weixin_66478060的博客
11-07 170
element.属性 获取属性值element.getAttribute('属性');element.属性 获取内置属性值（元素本身自带的属性）element.getAttribute('属性')；主要获得自定义的属性（标准）H5规定自定义属性data-开头做为属性名并赋值。比如 或者使用JS设置兼容性获取H5新增或者。
JS 使用DOM操作表单
a111111221的博客
07-28 503
JS 使用DOM操作表单的理解 1. 表单对象的理解 在HTML页面中一个表单对象由form>/form>标签对构成，一对标签代表一个HTML表单。JS会自动为每一个表单标签建立一个表单对象（form对象）。对表单对象的操作需要使用到对应的方法和属性。 常见的表单对象的属性如下： 属性 描述 elements 表示包含表单中所有表单元素的数组，使用索引引用其中的元素 length 返回表单中表单元素数目 method 设置或者返回将数据发送到服务器HTTP的方法 na
DOM 简介及相关操作
icemwj的博客
09-21 655
1、DOM 简介 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 对于JavaScript，为了能够使 JavaScript 操作 HTML，JavaScript 就有了一套自己的 dom 编程接口。 对于HTML，dom 使得 html 形成一棵 dom 树， 包含文档、元素、节点。 我们获取过来的
JS基础和DOM使用
weixin_48268485的博客
06-28 249
JS基础和DOM使用。
DOM深入学习 --- 表单属性和方法（五）
秋天，黄叶坠地，凉风有信。
03-11 420
表单属性和方法 表单（form）以及例如 <input> 的控件（control）元素有许多特殊的属性和事件。 当我们学习了这些相关内容后，处理表单会变得更加方便。 导航：表单和元素 文档中的表单是特殊集合 document.forms 的成员。 这就是所谓的“命名的集合”：既是被命名了的，也是有序的。我们既可以使用名字，也可以使用在文档中的编号来获取表单。 document.forms.my - name="my" 的表单 document.forms[0] - 文档中的第一个表单 当我们有
DOM 操作表单
jssd的博客
08-20 229
DOM操作表单 DOM操作表单, 对于一个后台程序员来说是很重要的 两个属性 readonly 故名思意, readonly属性只能看到数据, 但是不可以操作数据. <input type="text" readonly="readonly"/> disabled 不能使用, disabled也是不能操作属性. 不仅如此, 整个表单都会变成灰色. 而且在提交的时候, 具有disabl...
js-dom操作的属性及方法
碎语1992
08-14 505
1. 获取和设置属性 1）getAttribute
JS中DOM元素的操作
热门推荐
不想写代码的一天
05-23 4万+
一、DOM元素的获取 1）document.getElementsByClassName ( “class”) 返回集 htmlcollection ,用法和数组一致 说明: class为DOM元素上class属性的值 2）document.getElementById( “id” ) 功能:返回对拥有指定ID的第一个对象的引用 返回值: DOM对象 说明: id为DOM元素上id属性的值 3)...
JS中的DOM表单操作
张子又
01-18 1107
DOM表单操作 1.value属性 value - 设置或返回表单字段的值。 &lt;body&gt; 姓名：&lt;input type="text" id="user-name"&gt; &lt;button id="text-btn"&gt;设置文本输入框内容&lt;/button&gt; &lt;script&gt; //
jQuery基础教程：选择器、DOM操作与表单元素
"jQuery基础知识PPT涵盖了选择器、DOM元素操作、事件与应用、动画和特效、常用插件以及工具类函数等内容，旨在提供全面的jQuery入门教程。" 在jQuery中，选择器是核心功能之一，用于高效地定位网页中的DOM元素。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值