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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
DIV菜单层实现代码
Nov 19 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 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 number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
JSON 教程 json入门学习笔记
2020/09/22 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
js实现延迟加载的方法
2015/06/24 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
JavaScript中的几种继承方法示例
2020/12/06 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
初三物理教学反思
2014/01/21 职场文书
小学生秋游活动方案
2014/02/23 职场文书
爱我中华教学反思
2014/04/28 职场文书
申报材料格式
2014/12/30 职场文书
小学生思想品德评语
2014/12/31 职场文书
离婚协议书范本
2015/01/26 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS