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 相关文章推荐
从JavaScript的函数重名看其初始化方式
Mar 08 Javascript
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
jQuery实现文档树效果
Feb 20 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 Javascript
使用vue实现各类弹出框组件
Jul 03 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
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
python处理json数据中的中文
2014/03/06 Python
Python中列表的一些基本操作知识汇总
2015/05/20 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
windows下python和pip安装教程
2018/05/25 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
python dict 相同key 合并value的实例
2019/01/21 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
python requests证书问题解决
2019/09/05 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
卫校毕业生自我鉴定
2013/10/31 职场文书
校长竞聘演讲稿
2014/05/16 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书