`
flashdream8
  • 浏览: 678713 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

document.getElementById详解

IEJavaScriptASP.netASPFirefox 
阅读更多

注意：

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"   onchange="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

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

 

 

① document.getElementById 有时会抓name放过了id ，据说是IE的一个BUG；

http://community.csdn.net/Expert/topic/4223/4223888.xml?temp=.1947443

页面中有
<input type="hidden" id="hello8" name="category_id" value="2" />

<select id="category_id" onchange="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資料

下面这段代码可以验证这个结果



<HTML>
<HEAD>
<TITLE> getElementById </TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function chkacc(){
alert(document.getElementById("tbxuid1").value);
alert(document.getElementById("tbxpwd1").value);
alert(document.getElementById("tbxuid").value);
alert(document.getElementById("tbxpwd").value);
}
//-->
</SCRIPT>
<BODY>
<FORM METHOD=POST ACTION="" name="frm1">
<INPUT TYPE="text" NAME="tbxuid" id="tbxuid1">
<INPUT TYPE="text" NAME="tbxpwd" id="tbxpwd1">
</FORM>
<FORM METHOD=POST ACTION="" name="frm2">
<INPUT TYPE="text" NAME="tbxuid" id="tbxuid">
<INPUT TYPE="text" NAME="tbxpwd" id="tbxpwd">
<INPUT TYPE="button" value="檢查" name="btnchk" onclick="chkacc();">
</FORM>
</BODY>
</HTML
② javascript中的getElementbyId使用

<!-- -->

网页中的元素必须有id属性，才能通过这个方法得到，比如

<input type=text name="content" id="content">


③获取html标记主要有两种方法，一种是通过ID值，一种是通过name属性

name属性主要用于form表单内的input标记

 

分享到：
| 八皇后问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JS中关于document.all的详解

    ### JS中关于`document.all`的详解 #### 一、`document.all`简介 `document.all` 是一个只读属性，它返回一个包含文档中所有元素的类数组对象。这个特性最初是为 Internet Explorer 设计的，并且在早期版本的 IE 中...

    document.getElementsByName()的用法

    ### document.getElementsByName() 的用法详解 在Web开发中，JavaScript提供了多种方法来选取HTML文档中的元素，以便开发者能够实现对页面动态操作的需求。其中`document.getElementsByName()`与`document....

    js document对象详解

    JS 的 document 对象详解 作为 JavaScript 脚本语言中最重要的对象之一，document 对象提供了大量的属性和方法来操作和控制 HTML 文档。下面是对 document 对象的详细介绍。 document 对象属性 1. document.title...

    JavaScript中document.referrer的用法详解

    var back = document.getElementById('back'); back.onclick = function() { history.back(); // 返回上一个页面 }; ``` 或者使用HTML的`&lt;a&gt;`标签，直接绑定`javascript:history.back()`来创建返回按钮： ```html...

    javasxript_document对象详解.txt

    ### JavaScript Document 对象详解 #### 一、Document 对象简介 在JavaScript中，`Document`对象是构成浏览器文档对象模型（DOM）的核心部分之一。它提供了对网页文档结构的访问和控制能力，允许开发者通过脚本...

    javascript-document对象详解(下).zip

    例如，我们可以使用`document.getElementById`来获取指定ID的元素，`document.createElement`来创建新的HTML元素，`document.appendChild`将新元素添加到现有元素的子节点中，以及`document.write`在文档加载时写入...

    iframe局部刷新.txt

    ### iframe局部刷新技术详解 #### 一、概述 在网页开发中，为了提高用户体验和页面加载效率，有时候我们需要实现页面的局部刷新功能。局部刷新是指只更新页面的一部分内容，而不是整个页面重新加载。这种方式可以...

    document 文挡对象详解

    - `document.getElementById()`：根据ID查找文档中的元素。 - `document.getElementsByTagName()`：根据标签名查找文档中的元素集合。 - `document.querySelector()`：返回匹配CSS选择器的第一个元素。 - `...

    JS document对象简单用法完整示例

    var element = document.getElementById('sid'); ``` - `getElementsByName()`：根据元素的`name`属性获取一组元素（通常用于表单元素）。返回的是一个`NodeList`对象，表示一个动态集合： ```javascript var ...

    document属性和方法.txt

    ### Document属性和方法详解 #### 一、Document对象概述 `Document`对象是浏览器中一个非常重要的对象，它表示整个HTML文档。通过`Document`对象，开发者可以访问页面中的所有元素，实现对网页内容的动态操作。下面...

    JQuery document详解大全

    在jQuery中，操作`document`对象通常更简洁，例如使用`$(document).ready()`来确保在页面加载完成后执行代码，或者使用`$("#id")`来选择具有特定ID的元素，这比原生JavaScript的`getElementById`更加方便。...

    98-382JavaScript编程应用.pdf

    例如，若要在指定的段落`&lt;p&gt;`中插入内容，可以使用`document.getElementById("para").innerHTML += "新内容";`。在提供的题目中，应该在第09行使用正确的代码来动态地向`&lt;p&gt;`元素中添加房间类型，正确的方式可能是`...

    javascript document对象详细介绍

    ### JavaScript Document对象详解 #### 一、概述 在Web开发中，`document`对象是浏览器提供的核心对象之一，它代表了当前加载的HTML文档，并且提供了访问和操作文档中的元素和内容的方法。通过`document`对象，...

    js+div实现图片滚动效果代码.docx

    document.getElementById('demo').scrollLeft = document.getElementById('demo').scrollLeft + 1; } function doScroll() { var sc = setInterval(doMarquee, 20); } function stopScroll() { clearInterval...

    document对象总结

    ### Document对象总结与属性方法详解 在Web开发中，`Document`对象是浏览器解析HTML文档后形成的一个核心对象，它代表了整个HTML页面，并提供了访问和操作页面元素的方法和属性。下面将对`Document`对象的属性和...

    javascript的document对象

    ### JavaScript的Document对象详解 在Web开发中，`Document`对象是浏览器提供的核心对象之一，它代表了当前加载的HTML文档，并提供了与该文档交互的方法和属性。掌握`Document`对象的基本用法对于进行前端开发至关...

Magicbox
Global site tag (gtag.js) - Google Analytics