document.getElementById使用[通俗易懂]

document.getElementById使用[通俗易懂]HTMLDOMgetElementById()方法HTMLDOMDocument对象参考手册定义和用法getElementById()方法可返回对拥有指定ID的第一个对象的引用。语法document.getElementById(id)说明HTMLDOM定义了多种查找元素的方法,除了getElementById()之外,还有get

大家好,又见面了,我是你们的朋友全栈君。

HTML DOM getElementById() 方法

定义和用法

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

语法

document.getElementById(id)

说明

HTML DOM 定义了多种查找元素的方法,除了 getElementById() 之外,还有 getElementsByName() 和 getElementsByTagName()。

不过,如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。

在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。

实例

例子 1

<html>
<head>
<script type="text/javascript">
function getValue()
  {
  var x=document.getElementById("myHeader")
  alert(x.innerHTML)
  }
</script>
</head>
<body>

<h1 id="myHeader" οnclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>

</body>
</html>

例子 2

getElementById() 是一个重要的方法,在 DOM 程序设计中,它的使用非常常见。我们为您定义了一个工具函数,这样您就可以通过一个较短的名字来使用 getElementById() 方法了:

function id(x) {
  if (typeof x == "string") return document.getElementById(x);
  return x;
  }

上面这个函数接受元素 ID 作为它们的参数。对于每个这样的参数,您只要在使用前编写 x = id(x) 就可以了。

 

 

 

 实例三:

<a id=”hdrPageHeader_lblTitle0″>aa</a>                            
 <a id=”hdrPageHeader_lblTitle”>bb</a>                             
 <a id=”hdrPageHeader_lblTitle1″>cc</a>
<input id =”a” value = “f111 you”></input>
 <script language=”javascript”>                                    
 <!–                                                              
  var idtext=document.getElementById(“a”).value;      
   alert(idtext)              

var idtext=document.getElementById(‘hdrPageHeader_lblTitle’);      
alert(idtext.innerText)  
 
   //–>                                                             
  </script>               

 

 

 

注意:

document.getElementById(” “) 得到的是一个对象,用 alert 显示得到的是

“ object ”,而不是具体的值,它有 value 和 length 等属性,加上 .value 得到的才

是具体的值!

 

参考资料:

1. document . getElementById 的用法和 DHTML.CHM 的下载地址

http://blog.sina.com.cn/u/4933092a010003k7

 

今天在网络上查找 document . getElementById 的用法,如下:

 A :     语法:
    oElement = document . getElementById ( sID )
     参数:
    sID  : 必选项。字符串 (String) 。

     返回值:
    oElement  : 对象 (Element) 。

     说明:
     根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象      ,则返回该组对象中的第一个。
     如果无符合条件的对象,则返回 null 。

 

B :有一个例子可以很好的说明:

 

  ****************************************************************************
  *                                                                          *
  *  这个函数中最关键的地方是 document.getElementById ,他是什么呢?       *
  *                                                                          *
  *  关于 document.getElementById ,是这样的:                             *
  *                                                                    *
  *  如: document.getElementById(‘hdrPageHeader_lblTitle’)              *
  *                                                                    *
  *  表示的意思是:获取 ID 为 :hdrPageHeader_lblTitle 的对象                 *
  *                                                                          *
  * <a id=”hdrPageHeader_lblTitle0″>aa</a>                             *
  * <a id=”hdrPageHeader_lblTitle”>bb</a>                              *
  * <a id=”hdrPageHeader_lblTitle1″>cc</a>                             *
  * <script language=”javascript”>                                     *
  * <!–                                                               *
  * var idtext=document.getElementById(‘hdrPageHeader_lblTitle’)       *
  * alert(idtext.innerText)                                            *
  * //–>                                                              *
  * </script>                                                          *
  *                                                                          *
  **************************************************************************** 

 

C :另外还得到一个细节:

http://bbs.cnitn.cn/dispbbs.asp?boardid=20&id=12957,内容是:

①   document.getElementById 有时会抓 name 放过了 id ,据说是 IE 的一个 BUG ;
页面中有
    <input type=”hidden” id=”hello8″ name=”category_id” value=”2″ />

         <select id=”category_id”   οnchange=”al();”>

一个是 name=”category_id” 一个是 id=”category_id”

用 document.getElementById 取第二个,可是,取到的却是第一个 name=category_id

在 IE 中 getElementById 竟然不是先抓 id 而是先找 name 相同的物件 …

兩個 form, 每個 form 有兩個 textbox, 兩個 form 中的 textbox 是相同的 name, 但 id 都不同 …
這樣在 Firefox 是沒問題的 … 但在 IE 卻只抓得到第一個出現的 name 資料

 

D :在得到答案后,同时也得到了两本好的手册工具,

1.DHTML.CHM —– 很全面的 DHTML 的参考手册

2.javascript 的参考手册

 

饮水思源,我还是不要把别人的成果直接放到这里,下面这个地址提供了下载连接:

http://www.xy72.com/bbs/dispbbs.asp?boardID=11&ID=71&page=1

 

2. document 对象

http://www.phpx.com/man/dhtmlcn/objects/obj_document.html

属性: title ; bgColor ; url; ( 使用: document.title)

方法:

focus

使得元素得到焦点并执行由 onfocus 事件指定的代码。

getElementById

获取对 ID 标签属性为指定值的第一个对象的引用。

getElementsByName

根据 NAME 标签属性的值获取对象的集合。

getElementsByTagName

获取基于指定元素名称的对象集合。

 

 

 

 

  

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/159595.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • web安全书籍_web安全书单

    web安全书籍_web安全书单基础书籍《信息安全标准和法律法规(第二版)》(注:武汉大学出版社)《HTTP权威指南》《HTML5权威指南》《JavaScript权威指南(第6版)》《TCP/IP详解卷1:协议》《SQL编程基础(原书第3版)》《PHP和MySQLWeb开发(第四版)》《PHP安全基础》《PHP应用程序安全编程》《高级PHP应用程序漏洞审核技术》《精通正则表达式(第

    2022年9月16日
    0
  • 百度识图解析_蒙眼识字是什么原理

    百度识图解析_蒙眼识字是什么原理百度识图原理分析推测其发展方向    2010年12月13日,百度推出相似图片搜索功能—百度识图(shitu.baidu.com),常规的图片搜索,是通过输入关键词的形式搜索到互联网上相关的图片资源,而百度识图则能实现用户通过上传图片或输入图片的url地址,从而搜索到互联网上与这张图片相似的其他图片资源,同时也能找到这张图片相关的信息。     百度的相似图片搜索识图

    2022年9月11日
    0
  • android插件化资源_android 插件化

    android插件化资源_android 插件化AndroidEagleEye是一个基于Xposed的应用,可以实现对Android系统API与应用自身方法的Hook,最终会将Hook的API或方法的信息以Log的形式输出,包括应用的uid、API或方法的名称、参数信息等。在使用AndroidEagleEye过程中对设备造成的任何风险自负特色可实现对Android系统API以及应用自身方法的Hook可根据配置

    2022年8月16日
    4
  • 深度学习之:什么是流形(manifold)?流形空间,流形学习

    深度学习之:什么是流形(manifold)?流形空间,流形学习作者:麋路链接:https://www.zhihu.com/question/24015486/answer/194284643来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。流形学习的观点是认为,我们所能观察到的数据实际上是由一个低维流形映射到高维空间上的。由于数据内部特征的限制,一些高维中的数据会产生维度上的冗余,实际上只需要比较低的维度就能唯一地表示。举个例子,比如说我们在平面上有个圆,如何表示这个圆呢?如果我们把圆放在一个平面直角坐标系中,那一个圆实际.

    2022年10月29日
    0
  • arduino连接ps2手柄控制智能小车实践记录-续

    arduino连接ps2手柄控制智能小车实践记录-续首先感谢参考链接:感谢参考链接:https://www.cnblogs.com/hxxhdaily/p/12592043.html前篇链接-arduino连接ps2手柄控制智能小车实践记录本篇主要任务:接电机根据控制调整电机旋转方向解决初始化时手柄检测问题(每次启动未必能找到手柄)任务一:接电机电机控制芯片:L298N(淘宝购)电机供电:9V电池(淘宝购电池盒)L298N-电池接线电池电极L298N插口正极12V负极GNDL298N-ard

    2022年6月3日
    33
  • layui弹出层html页面,layui弹出层

    layui弹出层html页面,layui弹出层利用layui框架layer部分执行的弹出层,这样比起普通alert的弹出层更美观首先,写一个按钮点击试试js部分$(document).ready(function(){$(‘.btn’).on(‘click’,function(){layer.confirm(‘你好吗?’,{btn:[‘好’,’不好’]},function(){layer.msg(‘hao’,{ico…

    2022年6月14日
    46

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号