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 相关文章推荐
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
JavaScript定义类的几种方式总结
Jan 06 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
JavaScript ES6中export、import与export default的用法和区别
Mar 14 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 Javascript
原生js实现购物车
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
用mysql内存表来代替php session的类
2009/02/01 PHP
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
php绘制一个扇形的方法
2015/01/24 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
Laravel实现表单提交
2017/05/07 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
js 实现碰撞检测的示例
2020/10/28 Javascript
Python中装饰器的一个妙用
2015/02/08 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
什么是事务?事务有哪些性质?
2012/03/11 面试题
党员公开承诺事项
2014/03/25 职场文书
财务负责人任命书
2014/06/06 职场文书
银行业务授权委托书
2014/10/10 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS