JavaScript中获取HTML元素值的三种方法

 更新时间:2016年06月20日 14:24:03   投稿:lijiao  
这篇文章主要为大家详细介绍了JavaScript中获取HTML元素值的三种方法,分享了JavaScript中取得元素的方法,感兴趣的小伙伴们可以参考一下

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;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 利用JS实现文字的聚合动画效果

    利用JS实现文字的聚合动画效果

    这篇文章主要给大家介绍了利用JS如何实现文字的聚合动画效果,实现的效果非常不错,类似粒子动画的效果,有需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-01-01
  • 微信小程序实现动态显示和隐藏某个控件功能示例

    微信小程序实现动态显示和隐藏某个控件功能示例

    这篇文章主要介绍了微信小程序实现动态显示和隐藏某个控件功能,涉及微信小程序事件响应及样式动态操作相关实现技巧,需要的朋友可以参考下
    2018-12-12
  • JS给元素注册事件的代码

    JS给元素注册事件的代码

    麦鸡的TAB切换功能代码
    2008-10-10
  • 利用不到200行代码写一款属于你自己的js类库

    利用不到200行代码写一款属于你自己的js类库

    这篇文章主要给大家介绍了如何利用不到200行代码写一款属于你自己的js类库,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-07-07
  • web基于浏览器的本地存储方法应用

    web基于浏览器的本地存储方法应用

    在客户端存储数据时,我们一般都用cookie(不敏感数据),但是在客户端越来越富的今天,cookie可存储的量(每个域最大4k)实在是小,已经满足不了我们的需求
    2012-11-11
  • JS操作select下拉框动态变动(创建/删除/获取)

    JS操作select下拉框动态变动(创建/删除/获取)

    动态创建及删除select、添加及删除选项option、获得选项option的值、获得选项option的文本等等,感兴趣的朋友可以参考下哈
    2013-06-06
  • Javascript的字符串方法详解

    Javascript的字符串方法详解

    这篇文章主要介绍了Javascript字符串方法详解的相关资料,在平时工作中经常会用到的,非常不错,需要的朋友可以参考下,希望能够给你带来帮助
    2021-09-09
  • HTML5开发Kinect体感游戏的实例应用

    HTML5开发Kinect体感游戏的实例应用

    这篇文章主要介绍了HTML5开发Kinect体感游戏的实例应用的相关资料,希望通过本文能够帮助到大家,需要的朋友可以参考下
    2017-09-09
  • 小程序页面onload(),onready()加载顺序详解

    小程序页面onload(),onready()加载顺序详解

    本文主要介绍了小程序页面onload(),onready()加载顺序,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • JS实现长图上下滚动效果

    JS实现长图上下滚动效果

    这篇文章主要为大家详细介绍了JS实现长图上下滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03

最新评论