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 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
JavaScript对象之间的转换 jQuery对象和原声DOM
Mar 07 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
JavaScript实现的选择排序算法实例分析
Apr 14 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
js+css3实现炫酷时钟
Aug 18 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
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
javascript 写类方式之八
2009/07/05 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
2019/04/17 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
Vue程序调试的方法
2019/06/17 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
基于python select.select模块通信的实例讲解
2017/09/21 Python
Numpy掩码式数组详解
2018/04/17 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
解决PySide+Python子线程更新UI线程的问题
2019/01/11 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
医院办公室主任职责
2013/12/29 职场文书
现场活动策划方案
2014/08/22 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
六一儿童节致辞
2015/07/31 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js