Javascript访问html页面的控件的方法详细分析

2023-11-10

访问控件的主要对象是:document对象。分别对应当前文档所有的(子对象)个人观点。并且已经提供的几个主要方法来访问对象。
1. document.getElementById
2. document.getElementsByName
3 document.getElementsByTagName
4 document.all
下面我主要谈谈以上几个方法的具体用法:
一.首先我来谈谈document.getElementById的用法。
Var obj=document.getElementById(“ID”) 根据指定的ID属性值得到对象。返回id属性值等于ID的第一个对象的引用。假如对应的为一组对象,则返回该组对象中的第一个。
<input name=”a” type=”text” id=”b”/>
<input name=”b” type=”text” id=”a”/>
<input type=”button” name=”submint1” value=”text1” οnclick=:”alert(document.getElementById(“b”)/>)”<input type=”button” name=”submint2” value=”text2” οnclick=”alert(document.getElementById(“a”)/>)”我在IE中测试了上面代码,在第一个文本框中输入1,在第二个文本中输入2,然后点击两个按钮,大吃一斤。结果两个按钮都返回了第一个文本框的值。这说明了IE执行document.getElementById(elementName)的时候,返回的是第一个name或者id等于elementName的对象,并不是根据ID来查找的。
但相反我在firefox中就不存在这个问题。Firefox执行document.getElementById(elementName)的时候只能查找ID等于elementName对象,如果不存在在返回null.
二.下面看看document.getElementsByName的用法。
Var obj=document.getElementsByName(“Name”)根据Name属性的值获取对象集合。返回name等于指定Name对象的集合。注意这里返回的是一个集合,包括只有一个元素的情况也是一个集合。
document.getElementsByName("name")[0?1?2?3?....] 这样来获取某一个元素。注意javascript中的集合取一个值可以用[],也可以用(),(本人测试通过,但没有资料这么写)。
如:
<script>
function prop()
{
var objs=document.getElementsByName("a");
alert(objs(0).value);//或者可以alert(objs[0].value)也正确的。
}
</script>
<input type="text" name="a" id="b" value="this is textbox"/>
<input type="button" value="testing" οnclick="prop()"/>
三.Document.getElementsByTagName的用法:
Var ojbs=document.getElementsByTagName(“Tag”)根据基于指定元素名称对象的集合。返回Tag属性等于指定Tag标记的集合。这里也返回的是一个集合。(同上)
四.document.all用法。
document.all是页面内所有元素的一个集合。例如:
document.all(0)表示页面的第一个元素。
Document.all(“txt”)表示页面上id或name等于txt的所有对象的单个元素和集合元素。
如果页面上的id或name等于txt只有一个元素(包括name和id情况),那么document.all()的结果就只是一个元素,反之就是获取一个集合。(综合了document.getElementById和document.getElementsByName的各自的特点)。
也可以这样写:document.all.txt也是一样。
例如:
<input name=aaa value=aaa>
<input id=bbb value=bbb>
<script language=Jscript>
alert(document.all.aaa.value) //根据name取value
alert(document.all.bbb.value) //根据id取value
</script>
代码2:
但是常常name可以相同(如:用checkbox取用户的多项爱好的情况)
<input name=aaa value=a1>
<input name=aaa value=a2>
<input id=bbb value=bbb>
<script language=Jscript>
alert(document.all.aaa(0).value)//显示a1
alert(document.all.aaa(1).value)//显示a2
alert(document.all.bbb(0).value)//这行代码会失败
</script>
理论上一个页面中的ID是互不相同的,如果出现不同的tags而有相同的id的话,document.all.id就会失败,就象这样:<input id=aaa value=a1>
<input id=aaa value=a2>
<script language=Jscript>
alert(document.all.aaa.value)//显示undefined而不是a1或者a2
</script>
所以说遇到了这种情况的话用下面这种写法:
<input id=aaa value=aaa1>
<input id=aaa value=aaa2>
<input name=bbb value=bbb>
<input name=bbb value=bbb2>
<input id=ccc value=ccc>
<input name=ddd value=ddd>
<script language=Jscript>
alert(document.all("aaa",0).value)
alert(document.all("aaa",1).value)
alert(document.all("bbb",0).value)
alert(document.all("bbb",1).value)
alert(document.all("ccc",0).value)
alert(document.all("ddd",0).value)
</script>
另外document.all可以判断浏览器的种类是否是IE,
document.all---------针对IE
document.layers------------针对Netscape
这两个集合.all只在ie里面有效,layers只在nc里面有效
所以就可以通过这个方式来判断不同的浏览器。

最后我来说说getElementById和getElementsByName使用范围:
Id就像身份证号,是唯一的,name就像姓名一样可以同名。
一个元素定义了id,引用该元素时直接用id属性,而name通常用在form中,且必须由document.form.***而来,也就是说,name 属性定义的元素在脚本中是document 对象的子对象。
1. name用于form内元素,提交需要.
id用于form外元素好用因为 DOM 能直接取得单一元素
2.id 每页只能有一个
name 可以有多个 name 有些标签不推荐用它
3. 表单元素(form input textarea select)与框架元素(iframe frame) 用 name这些元素都与表单 (框架元素作用于form的target)提交有关, 在表单的接收页面只接收有name的元素 , 赋ID 的元素通过表单是接收不到值的, 你自己可以验证一下有一个例外A 可以赋 name 作为锚点, 也可以赋 ID;只能赋ID不能赋name的元素:(除去与表单相关的元素都只能赋 ID) body li table tr td th p div span pre dl dt dd font b 等等。
这里我引出另一个问题,既然有了ID那为什么还要name呢?
最直接答案:ID就像是一个人身份证号,而 name就像是他的名字,ID虽然是唯一的,但name是可以重复的。
具体来说:对于ID来说,它就是Client端HTML元素的Identity 。而Name 其实要复杂的多,因为 Name 有很多种的用途,所以它并不能完全由ID来代替,从而将其取消掉。
参考网站资料如下:具体用途有:
  用途 1: 作为可与服务器交互数据的 HTML 元素的服务器端的标示,比如 input 、 select 、 textarea 、和 button 等。我们可以在服务器端根据其 Name 通过 Request.Params 取得元素提交的值。   用途 2: HTML 元素 Input type= "radio " 分组,我们知道 radio button 控件在同一个分组类, check 操作是 mutex 的,同一时间只能选中一个 radio ,这个分组就是根据相同的 Name 属性来实现的。
用途 3: 建立页面中的锚点,我们知道 <a href="URL" >link </a > 是获得一个页面超级链接,如果不用 href 属性,而改用 Name ,如: <a name="PageBottom" > </a > ,我们就获得了一个页面锚点。
用途 4: 作为对象的 Identity ,如 Applet 、 Object 、 Embed 等元素。比如在 Applet 对象实例中,我们将使用其 Name 来引用该对象。
  用途 5: 在 IMG 元素和 MAP 元素之间关联的时候,如果要定义 IMG 的热点区域,需要使用其属性 usemap ,使 usemap="#name"( 被关联的 MAP 元素的 Name)
  用途 6: 某些特定元素的属性,如 attribute ,和 param 。例如为 Object 定义参数 <PARAM NAME = "appletParameter" VALUE = "value" > .
  显然这些用途都不是能简单的使用 ID来代替掉的,所以HTML元素的ID和 Name的却别并不是身份证号码和姓名这样的区别,它们更本就是不同作用的东西。 当然HTML元素的Name属性在页面中也可以起那么一点ID的作用,因为在 DHTML对象树中,我们可以使用 document.getElementsByName 来获取一个包含页面中所有指定Name元素的对象数组。
  在这里顺便说一下,要是页面中有n(n >1) 个 HTML 元素的 ID 都相同了怎么办?在 DHTML 对象中怎么引用他们呢?如果我们使用 ASPX 页面,这样的情况是不容易发生的,因为 aspnet进程在处理aspx 页面时根本就不允许有 ID 非唯一,这是页面会被抛出异常而不能被正常的render。要是不是动态页面,我们硬要让 ID 重复那 IE 怎么搞呢?
这个时候我们还是可以继续使用 document.getElementById 获取对象,只不过我们只能获取ID重复的那些对象中在HTML Render时第一个出现的对象。而这时重复的 ID会在引用时自动变成一个数组,ID重复的元素按 Render的顺序依次存在于数组中。
getElementById("xxx")返回第一个id属性为"xxx"或者特定表单元素name为"xxx"的元素
getElementsByName("xxx")返回所有id属性为"xxx"或者特定表单元素name为"xxx"的元素
这里要说明一下其实getElementById和getElementsByName取元素的范围是一样的,区别只是前者只返回第一个元素后者返回所有元素的集合
另外说明一下表单元素 表单元素指的是在<FORM >标签中数据可以被提交给服务器的标签
主要有 <INPUT > <SELECT > <TEXTAREA >三个标签 这三个标签只有在name属性不为空的时候才能将数据提交给服务器 所以这三种标签多定义了一个name属性 其实这个name属性和id属性是完全一样的都可以定位元素
如果不是表单元素 就算你加了name属性getElementsByName也取不到不信你自己试试.
由于本人能力有限,希望朋友们能够及时的指出不正确的地方并及时留言我好修正,本人万分感谢!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Javascript访问html页面的控件的方法详细分析 的相关文章

  • 匹配 JavaScript RegEx 中的不可见字符

    我有一些包含不可见字符的字符串 但它们位于可预测的位置 通常 围绕我想要提取的文本片段 然后在第二次出现之后我想保留文本的其余部分 我似乎不知道如何关闭隐形字符 and将它们从我的结果中排除 为了匹配隐形 我一直在使用这个正则表达式 xA0
  • 传单圆圈绘制/编辑问题

    我第一次制作传单 并面临绘制圆圈和编辑 更改圆圈位置 的问题 我面临的问题是 编辑 移动 圆从一个位置到另一位置会改变其半径 Note 请尝试在给定的小提琴中在地图顶部创建圆圈 然后通过单击编辑按钮将其移动到底部 如果我在地图的顶部创建圆圈
  • 如何在 JavaScript 中检查未定义的变量

    我想检查变量是否已定义 例如 以下内容会引发未定义的错误 alert x 我怎样才能捕获这个错误 在 JavaScript 中 null是一个对象 不存在的事物还有另一种价值 undefined DOM 返回null对于几乎所有无法在文档中
  • 如何在没有数据库的情况下创建AJAX分页?

    是否可以在没有 MySQL 帮助的情况下获取 AJAX 分页页面 难道我不能只添加一个包含我需要显示的文本和标记的 PHP 文件 然后通过单击页码将该内容提供给用户吗 那么可以用纯 jQuery 和 PHP 来实现吗 您会使用什么代码方法来
  • Express.js - 监听关闭

    我有一个使用 Express 的 Node js 应用程序 在该应用程序中 我有一个如下所示的块 const app require app const port process env PORT 8080 const server app
  • Bootstrap shown.bs.tab 事件不起作用

    我正在使用灵活的模板 http the8guild com themes html flexy v1 7 stylesPage html 使用引导程序 并且我无法让选项卡上的 shown bs tab 事件正常工作 我已经成功让它发挥作用J
  • 角度引导手风琴数据绑定问题

    我有 2 个相同型号的下拉菜单 一个位于手风琴内部 另一个位于外部 外部下拉菜单在 2 路数据绑定方面工作良好 但手风琴内部的下拉菜单似乎只有 1 路绑定 换句话说 在 UI 中选择并不会设置模型值 我找到了一个建议here https s
  • 如何将多个文件上传到Firebase?

    有没有办法将多个文件上传到 Firebase 存储 它可以在一次尝试内上传单个文件 如下所示 fileButton addEventListener change function e Get file var file e target
  • 有效地获取下拉列表中的选定选项(XHTML Select 元素)

    背景 使用 XHTML Select 元素的下拉列表中有大量选项 数十个 我需要使用 JavaScript 检索所选选项 Problem 目前我正在使用 jQuery selectedCSS 选择器并且它按预期工作 但这种方法效率不高 因为
  • 可点击的进度条

    我正在使用 Angular 并在 JavaScript 的帮助下开发了一个可点击的进度条 这是我能做到的最好的 有没有办法将滑块放置在进度条内但不干扰进度可视化 堆栈闪电战 https stackblitz com edit angular
  • jqPlot DateAxis tickInterval 不起作用

    我试图每月绘制一个包含单个数据点的图表 我会在每个月的第一天将其作为一个点发送到 jqPlot jqplot actualChart 2011 10 01 0 296 2011 11 01 0 682 title programSelect
  • Nuxt + Vuex - 如何将 Vuex 模块分解为单独的文件?

    在 Nuxt 文档中 here https nuxtjs org guide vuex store module files 它说 您可以选择将模块文件分解为单独的文件 state js actions js mutations js an
  • Struts html:text 标签内的 HTML5 占位符

    我在 Web 应用程序中使用 Struts 1 3 10 并且希望我的文本字段有一个占位符 不幸的是 当前的 Struts taglib 无法识别此属性 如果可能的话 我希望避免使用 javascript 你知道有什么解决办法吗 Strut
  • 如何设置 .eslintrc 来识别“require”?

    我是新来的ESLint http eslint org 并且我已经成功地将 ESLint 与IntelliJ https www jetbrains com idea 开箱即用 我的 ESLint 集成无法识别node 但对文档的基本审查表
  • 与 body 相比,将 css 规则应用于 html 有什么区别?

    我看不出以下之间的区别 html background f1f1f1 and body background f1f1f1 有什么解释吗 没有真正的区别 如果你只是谈论在哪里申请background 否则BoltClock 对另一个问题的回
  • angularjs 将 ngModel 从包装器指令传递到包装器指令

    我是 Angular 的新手 但仍然痛苦地纠结于自定义指令 我想重用这段 HTML
  • Django:单击按钮加载另一个模板

    我已经在 django 项目上工作了几个星期 只是玩玩以便掌握它的窍门 我有点困惑 我现在有一个名为 home html 的模板 我想知道是否可以将另一个名为 profile html 的模板设置为 home html 模板上的链接 我有一
  • 如何防止 Safari 滚动溢出:隐藏的 iframe?

    使用 Safari 您可以通过设置 style overflow hide 来禁用大多数 iframe 滚动 在 iframe 上 但是 如果您单击 iframe 并移动鼠标 内容无论如何都会滚动 Example 滚动内容 html
  • d3.js 更新视觉效果

    我有一个与 d3 js 放在一起的树形图 我通过 getJSON 填充数据 效果很好 但是 我在 setInterval 方法中具有此功能 并且它似乎并没有刷新自身 var treemap d3 layout treemap padding
  • CSS - 为什么我无法设置 元素的高度和宽度?

    我正在尝试使用以下 html 标记创建 css 按钮 a href access php class css button red Forgot password a 但它最终不会比中间的文本大 即使我已经设置了班级的高度和宽度 顺便说一句

随机推荐

  • 游戏开发物理引擎PhysX研究系列:示例项目SampleCustomGravity解读

    一 介绍 该示例项目的主要目的是模拟一个角色在行星上面移动时的模拟 主要对象有 行星 定义了质心 角色 使用CapsuleController 角色行为有 跳跃 重力 二 实现思路 物体朝向 每帧计算当前物体的朝向 计算物体质心与行星质心两
  • 将一个十六进制字符串转换为十进制数值的问题

    在程序中 我们有时需要将一个十六进制字符串转换为十进制数字 比如 char ptr 0x11 int n 0 我们想让n等于0x11 即17 通常我们在C中 想将一个字符串转换为一整形数字 通常会使用下面的方法 char ptr 123 i
  • 如何发送一个验证码到邮箱

    有时候经常会有一个网站注册时会发送一个验证码 然后通过这个验证这个验证码来确定这个邮箱不是不你的 你可能会觉得发送一个验证码到邮箱很高大上 看完这篇文章你一定会决定这件事不过如此 要发送验证码 首先我们要创建一个生成验证码的类 随机生成验证
  • seata1.3.0 系列学习(一、seata1.3.0 安装)

    下载seata 此处选用目前最新版本1 3 0 解压完成后 注 seata官方从1 0版本后不再提供sql脚本 以及nacos推送配置脚本 需要从0 9 0的版本复制 将红色框框的四个文件复制到1 3 0 conf目录下 执行db stor
  • Linux共享服务samba设置

    文章目录 一 Samba服务器介绍 1 samba是什么 2 Samba的应用环境 3 Samba的工作原理 二 Samba服务基础 三 Centos7 samba共享服务实验 1 安装共享服务 2 修改smb conf配置文件 设置共享
  • 基于jquery的自定义显示消息数量

    根据需求简单的实现一个小功能控件 暂时不支持扩展 xxxxxxx iconCountPlugin options start isOffset 三个参数 自定义样式 是否禁止图标位置随浏览器窗口变化而变化 是否禁用偏移量这个是调用 后面俩参
  • Android 悬浮于输入法软键盘顶部的输入框

    Android app 开发中经常会遇到一些输入框要悬浮到软键盘上方的需求 大致做法有做法如下 Android输入法软键盘悬浮 最常见的一种方法是通过给ViewTreeObserver添加ViewTreeObserver OnGlobalL
  • C++11 智能指针详解

    C 程序设计中使用堆内存是非常频繁的操作 堆内存的申请和释放都由程序员自己管理 程序员自己 管理堆内存可以提高了程序的效率 但是整体来说堆内存的管理是麻烦的 C 11 中引入了智能指针的 概念 方便管理堆内存 使用普通指针 容易造成堆内存泄
  • MS08-067 漏洞复现报告

    漏洞简介 MS08 067漏洞全称是 Windows Server服务RPC请求缓冲区溢出漏洞 攻击者利用受害者主机默认开放的SMB服务端口445 发送特殊RPC Remote Procedure Call 远程过程调用 请求 造成栈缓冲区
  • pluto实现分析(2)——代码函数调用关系

    本文档的Copyleft归yfydz所有 使用GPL发布 可以自由拷贝 转载 转载时请保持文档的完整性 严禁用于任何商业用途 msn yfydz no1 hotmail com 来源 http yfydz cublog cn 4 代码函数调
  • word 里文字对齐的4种方法。

    转自 微点阅读 https www weidianyuedu com 我们在用Word写论文 制作简历的时候 通常会遇到把word中某些特定文字对齐的情况 那么问题来了 你平时都是怎么对齐文字的 傻傻的用空格来对齐吗 在字符数不等的情况下
  • Android Studio检测内存泄露和性能

    http www jianshu com p 216b03c22bb8
  • Apollo代码学习(二)—车辆运动学模型

    Apollo代码学习 车辆运动学模型 前言 车辆模型 单车模型 Bicycle Model 车辆运动学模型 阿克曼转向几何 Ackerman turning geometry 小结 Apollo 阿波罗 是一个开放的 完整的 安全的自动驾驶
  • Python 使用pyinstaller打包后,print打印颜色乱码

    问题描述 Python 使用pyinstaller打包后 print打印颜色乱码 如图 代码如下 直接运行是正常的 使用pyinstaller打包后运行乱码 class bcolors OKRED 033 1 31m END 033 0m
  • 单片机 LCD1602液晶显示

    proteus 8 kile5 代码 include
  • 微机系统与接口——2.汇编语言

    目录 1 汇编 2 寻址方式 3 指令系统 3 1 数据传输指令 3 2 算数运算指令 3 3 逻辑运算和移位指令 3 4 串操作指令 3 5 控制转移指令 3 6 处理器控制指令 4 伪操作指令 5 DOS系统功能调用 6 汇编语言源程序
  • [21]有道翻译的那些事~

    2017 年最新有道翻译API 解析教程 从上面接口 大概可以推测一下 i 需要翻译的内容 from to 这两个key 都为AUTO 大概猜测一下应该为自动翻译 自动检测语言并翻译 smartresult client doctype v
  • react学习笔记-从井字棋开始(1)

    教程地址 https react docschina org tutorial tutorial html 新建工程 1 确保你安装了较新版本的 Node js 2 按照 Create React App 安装指南创建一个新的项目 npx
  • Kaldi知识点汇集

    我的书 淘宝购买链接 当当购买链接 京东购买链接 特征提取 MFCC compute mfcc feats cc Create MFCC feature files Usage compute mfcc feats options
  • Javascript访问html页面的控件的方法详细分析

    访问控件的主要对象是 document对象 分别对应当前文档所有的 子对象 个人观点 并且已经提供的几个主要方法来访问对象 1 document getElementById 2 document getElementsByName 3 d