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代码
Mar 10 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
VUE中使用MUI方法
Feb 12 Javascript
JavaScript中的类型检查
Feb 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
PHP简单处理表单输入的特殊字符的方法
2016/02/03 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
Vue2.0 从零开始_环境搭建操作步骤
2017/06/14 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
2018/02/23 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
Django 框架模型操作入门教程
2019/11/05 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
迪卡侬印度官网:购买所有体育用品
2017/06/24 全球购物
美国优质宠物用品购买网站:Muttropolis
2020/02/17 全球购物
如何高效率的查找一个月以内的数据
2012/04/15 面试题
2014年大学生党课心得体会范文
2014/03/29 职场文书
元旦联欢会策划方案
2014/06/11 职场文书
统计学教授推荐信
2014/09/18 职场文书
高中校园广播稿
2014/10/21 职场文书
临时用工协议书范本
2014/10/29 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
干部个人考察材料
2014/12/24 职场文书
入学证明
2015/06/23 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript