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脚本
Feb 02 Javascript
alert和confirm功能介绍
May 21 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
AngularJS入门教程之Scope(作用域)
Jul 27 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
axios学习教程全攻略
Mar 26 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 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 DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
php使用百度天气接口示例
2014/04/22 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
jquery之empty()与remove()区别说明
2010/09/10 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
js上下视差滚动简单实现代码
2017/03/07 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
解决option标签selected="selected"属性失效的问题
2017/11/06 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
Python的设计模式编程入门指南
2015/04/02 Python
python cs架构实现简单文件传输
2020/03/20 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
保安员岗位职责
2013/11/17 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书