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 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
JQuery优缺点分析说明
Jun 09 Javascript
JS读取cookies信息(记录用户名)
Jan 10 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序
Feb 19 Javascript
解读ES6中class关键字
Nov 20 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 Javascript
深入学习JavaScript中的bom
May 27 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 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基于redis计数器类定义与用法示例
2018/02/08 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
原生JS+Canvas实现五子棋游戏实例
2017/06/19 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
Python中属性和描述符的正确使用
2016/08/23 Python
python中异常捕获方法详解
2017/03/03 Python
Python自动生产表情包
2017/03/17 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
小学教师的个人自我鉴定
2013/10/24 职场文书
培训主管的岗位职责
2013/11/23 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
网络营销计划
2015/01/17 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android