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 相关文章推荐
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 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过滤危险html代码
2008/08/18 PHP
php查询操作实现投票功能
2016/05/09 PHP
PHP Cookie学习笔记
2016/08/23 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
浅谈PHP的exec()函数无返回值排查方法(必看)
2017/03/31 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
为数据添加append,remove功能
2006/10/03 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
2016/06/12 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
vue-loader教程介绍
2017/06/14 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
python 线程的五个状态
2020/09/22 Python
Javascript 高级手势使用介绍
2013/04/21 HTML / CSS
白宫黑市官网:White House Black Market
2016/11/17 全球购物
学生打架检讨书1000字
2014/01/16 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
霸气队列口号
2014/06/18 职场文书
大学生个人学习总结
2015/02/15 职场文书
爱心募捐通知范文
2015/04/27 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
导游词之张家界
2019/10/31 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang