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进阶教程(第四课第一部分)
Apr 05 Javascript
js身份证验证超强脚本
Oct 26 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
Mar 01 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
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
Content-type 的说明
2006/10/09 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
php常用数组函数实例小结
2016/12/29 PHP
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
python try except 捕获所有异常的实例
2018/10/18 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
关于python3中setup.py小概念解析
2019/08/22 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
英国水族馆和池塘用品购物网站:Warehouse Aquatics
2019/08/29 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
机械专业应届生求职信
2013/12/12 职场文书
宿舍卫生检讨书
2014/01/16 职场文书
早会主持词
2014/03/17 职场文书
四年级学生评语大全
2014/04/21 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
公证书格式
2015/01/23 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
python 中yaml文件用法大全
2021/07/04 Python