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-12-12
  • 禁止弹窗中蒙层底部页面跟随滚动的几种方法

    禁止弹窗中蒙层底部页面跟随滚动的几种方法

    我们大家在做弹出层的时候,必不可少的一个元素就是蒙层,也就是遮罩层,当弹出层滚动的时候,蒙层底部的页面一般是要求固定不动的,所以这篇文章就来给大家介绍了如何禁止弹窗中蒙层底部页面跟随滚动的几种方法,需要的朋友可以参考下。
    2017-12-12
  • Javascript var变量隐式声明方法

    Javascript var变量隐式声明方法

    在JavaScript中,var用来声明变量,但是这个语法并不严格要求,很多时修改,我们可以直接使用一个变量而不用var声明它。
    2009-10-10
  • JavaScript中16进制颜色与rgb颜色互相转换的示例代码

    JavaScript中16进制颜色与rgb颜色互相转换的示例代码

    这篇文章主要介绍了JavaScript中16进制颜色与rgb颜色互相转换的示例代码,通过示例代码介绍了JS 颜色16进制、rgba相互转换问题,感兴趣的朋友一起看看吧
    2024-01-01
  • 用JavaScript和jQuery实现瀑布流

    用JavaScript和jQuery实现瀑布流

    本篇文章主要介绍了用JavaScript和jQuery实现瀑布流的方法,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript ES6常用基础知识总结

    JavaScript ES6常用基础知识总结

    ES6中为我们提供了很多好用的新特性,其中包括let,箭头函数以及扩展运算符…等,以下就是总结的常用基础知识
    2019-02-02
  • js对象数组根据对象属性删除对象

    js对象数组根据对象属性删除对象

    这篇文章主要介绍了js对象数组根据对象属性删除对象,需要的朋友可以参考下
    2023-07-07
  • Bootstrap每天必学之警告框插件

    Bootstrap每天必学之警告框插件

    Bootstrap每天必学之警告框插件,使用警告框(Alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • 微信小程序网络请求封装示例

    微信小程序网络请求封装示例

    这篇文章主要介绍了微信小程序网络请求封装示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • JavaScript程序员应该知道的45个实用技巧

    JavaScript程序员应该知道的45个实用技巧

    在这篇文章中,我将分享一组JavaScript的技巧、窍门和最佳实践,这些都是JavaScript程序员应该知晓的,不管他们是使用在浏览器/引擎上,还是服务器端(SSJS——Service Side JavaScript)JavaScript解释器上
    2014-03-03

最新评论