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 URL传中文参数引发的乱码问题
Sep 02 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
Aug 14 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
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 COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
php使用session二维数组实例
2014/11/06 PHP
PHP实现文件下载详解
2014/11/27 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
js 上传图片预览问题
2010/12/06 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
zTree插件之多选下拉菜单实例代码
2013/11/06 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
小程序日历控件使用方法详解
2018/12/29 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
Python模块学习 re 正则表达式
2011/05/19 Python
Python写的贪吃蛇游戏例子
2014/06/16 Python
Python中的进程分支fork和exec详解
2015/04/11 Python
python连接数据库的方法
2017/10/19 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
IBatis持久层技术
2016/07/18 面试题
企业为何需要商业计划书
2013/12/26 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python