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 相关文章推荐
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
JS原型对象通俗"唱法"
Dec 27 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 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输出xml必须header的解决方法
2014/10/17 PHP
php树型类实例
2014/12/05 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
ECMAScript 基础知识
2007/06/29 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
js日期联动示例
2014/05/02 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
angularjs基础教程
2014/12/25 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
python实现百万答题自动百度搜索答案
2018/01/16 Python
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
Python3实现飞机大战游戏
2020/04/24 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
html5启动原生APP总结
2020/07/03 HTML / CSS
俄罗斯游戏商店:Buka
2020/03/01 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
会计自我鉴定范文
2013/10/06 职场文书
计算机应用专业推荐信
2013/11/13 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
中秋节慰问信
2015/02/15 职场文书
java泛型通配符详解
2021/07/25 Java/Android
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript