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简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
jQuery使用fadein方法实现渐出效果实例
Mar 27 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
vue购物车插件编写代码
Nov 27 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 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生成4位数字验证码的实现代码
2015/11/23 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
srcElement表格样式
2006/09/03 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
给easyui的datebox控件添加清空按钮的实现方法
2016/11/09 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python 控制语句
2011/11/03 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
python判断正负数方式
2020/06/03 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
Python的collections模块真的很好用
2021/03/01 Python
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
函授本科个人自我鉴定
2014/03/25 职场文书
家长会学生演讲稿
2014/04/26 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
单位介绍信格式
2015/01/31 职场文书
兵马俑导游词
2015/02/02 职场文书
总经理检讨书范文
2015/02/16 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
基石观后感
2015/06/12 职场文书
谢师宴学生致辞
2015/07/27 职场文书
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技