JavaScript中获取HTML元素值的三种方法


Posted in Javascript onJune 20, 2016

JavaScript中取得元素的方法有三种:分别是:

1、getElementById() 方法:通过id取得HTML元素。

2、getElementsByName()方法:通过name取得元素,是一个数组。

3、getElementsByTagName()方法:通过HTML标签取得元素,是一个数组。

如果要取得值可以使用value,如:var x=document.getElementById("id").value;

方法一:getElementById() 方法
可返回对拥有指定 ID 的第一个对象的引用。

语法:document.getElementById(id)

在 DOM 程序设计中,它的使用非常常见。您可以定义一个工具函数,这样您就可以通过一个较短的名字来使用 getElementById() 方法了。

function id(x){

 if(typeof x == "string"){

 return document.getElementById(x);

 return x;

}

方法二:getElementsByName()方法
因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

例如,下面的代码可以获得form中第一个name为“inputText”的元素

var myParagragh = document.getElementsByName("inputText")[0].value;

方法三:getElementsByTagName()方法
如果您非常了解文档的结构,也可以使用 getElementsByTagName() 方法获取文档中的一个特定的元素。

例如,下面的代码可以获得文档中的第二个段落的值:

var myParagragh = document.getElementsByTagName("p")[1].value;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
B/S模式项目中常用的javascript汇总
Dec 17 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
jQuery EasyUI 布局之动态添加tabs标签页
Nov 18 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
基于Vuejs实现购物车功能
Aug 02 Javascript
详解js中call与apply关键字的作用
Nov 21 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
Jan 24 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
深入了解js原型模式
May 30 Javascript
BootStrap selectpicker
Jun 20 #Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 #Javascript
基于Turn.js 实现翻书效果实例解析
Jun 20 #Javascript
js 获取经纬度的实现方法
Jun 20 #Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 #Javascript
JS作为值的函数用法示例
Jun 20 #Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 #Javascript
You might like
编译问题
2006/10/09 PHP
无数据库的详细域名查询程序PHP版(1)
2006/10/09 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
事件绑定之小测试  onclick && addEventListener
2011/07/31 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
2014/04/12 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
Python引用传值概念与用法实例小结
2017/10/07 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
python动态文本进度条的实例代码
2020/01/22 Python
python二维图制作的实例代码
2020/12/03 Python
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
2014信息公开实施方案
2014/02/22 职场文书
食品安全汇报材料
2014/08/18 职场文书
四风问题个人对照检查剖析材料
2014/09/27 职场文书
单位实习鉴定评语
2015/01/04 职场文书
课文《燕子》教学反思
2016/02/17 职场文书
Mysql实现主从配置和多主多从配置
2021/06/02 MySQL