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 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
jquery 问答知识整理
Feb 11 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
JS实现商品筛选功能
Aug 19 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
用node.js写一个jenkins发版脚本
May 21 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
模仿OSO的论坛(一)
2006/10/09 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
python协程之动态添加任务的方法
2019/02/19 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
3种python调用其他脚本的方法
2020/01/06 Python
Python无损压缩图片的示例代码
2020/08/06 Python
Footshop法国:购买运动鞋
2020/01/19 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
制药工程专业职业生涯规划范文
2014/03/10 职场文书
法人授权委托书范本
2014/09/17 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
政协委员个人总结
2015/03/03 职场文书
未中标通知书
2015/04/17 职场文书
英文辞职信范文
2015/05/13 职场文书
Go 语言结构实例分析
2021/07/04 Golang