在document对象中有以下三个方法，对于程序员来说，真可谓无人不知，无人不晓，他们分别是：

1.getElementById()                  返回对拥有指定 id 的第一个对象的引用。

2.getElementsByName()           返回带有指定名称的对象集合。

3.getElementsByTagName()     返回带有指定标签名的对象集合。

这三个方法尤其是：getElementById() 的使用频率极高，故通过以下方法简化其调用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <title>test</title>

    <script type="text/javascript">

       function $(s){

        return document.getElementById(s);

    }

    function test3(){

        alert($("userName").value);

    }

    </script>

</head>

<body>

<input type="text" id="userName" value="你好！" /><br />

<input type="button" value=Test3 onclick="test3();"><br>

</p>

</body>

</html>

一个$()函数的定义大大简化了操作，代码变得多优雅啊 oh yeah!

最后要注意getElementsByName() 在IE下的一个BUG：

在IE中:      document.GetElementsByName(“jack”); 会返回name,id 属性值为jack的元素数组（如果只设置name并不能获得对象）。

但在FF中只会返回只会返回name 属性值为jack的元素数组。

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

    <title>Test</title>

<script language="javascript">

function func() {

    var channelset = document.getElementsByName("a");

    for (i = 0; i < channelset.length; i++) {

         if (channelset[i].style.display == 'none') {

             channelset[i].style.display = 'block';

         } else {

             channelset[i].style.display = 'none';

         }

    }

}

</script>

</head>

<body>

    <p onClick="func();">Menu Bar</p>

    <p name="a" style="display:none">item1</p>

    <p name="a" style="display:none">item2</p>

</body>

</html>

以上代码在FF正常，但在IE就有问题了，兼容ie的方法如下： 在使用name属性的地方须加上id属性。

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

    <title>Test</title>

<script language="javascript">

function func() {

    var channelset = document.getElementsByName("a");

    for (i = 0; i < channelset.length; i++) {

         if (channelset[i].style.display == 'none') {

             channelset[i].style.display = 'block';

         } else {

             channelset[i].style.display = 'none';

         }

    }

}

</script>

</head>

<body>

    <p onClick="func();">Menu Bar</p>

    <p name="a" style="display:none" id="a">item1</p>

    <p name="a" style="display:none" id="a">item2</p>

</body>

</html>

Dom对象的方法应用一getElementById技巧、getElementsByName() IE，firefox兼容的更多相关文章

  1. Javascript学习，DOM对象，方法的使用

    JavaScript: ECMAScript: BOM: DOM: 事件 DOM的简单学习 功能:控制html文档内容 代码:获取页面标签(元素)对象和Element document.getElem ...

  2. jquery 获取多个dom对象的方法

    $("[name=trade]").each(function(){ for(j=0;j<info.trade.length;j++){ if( $(this).val() ...

  3. jquery对象与dom对象之间互相转换的方法

    本文主要讲述jquery对象和js里的dom对象之间互相转换的方法,使jquery对象可以直接使用js里的方法,或js里的dom对象使用jquery里的方法. jquery对象和dom对象是不一样的, ...

  4. jQuery对象和DOM对象的区别

    jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...

  5. JQuery对象与DOM对象的区别与转换

      1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj ...

  6. DOM对象与jquery对象有什么不同

    jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...

  7. JavaScript 对象、DOM对象、jquery对象的区别、转换详解

    一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...

  8. 区别 Jquery对象和Dom对象

    在讨论之前,先约定好定义变量的风格. 如果获取的对象是jQuery对象,那么在变量前加上$,例如: var $variable = jQuery对象; 如果获取的是DOM对象,则定义如下: var v ...

  9. DOM对象与jquery对象的区别

    jQuery对象和DOM对象使用说明,需要的朋友可以参考下. 1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQue ...

随机推荐

  1. POJ 2041

    #include <iostream> #include <string> #include <algorithm> using namespace std; st ...

  2. Android ListVIew 详解（一）

    在android开发中ListView是比较常用的组件,它以列表的形式展示具体内容,并且能够根据数据的长度自适应显示.抽空把对ListView的使用做了整理,并写了个小例子,如下图. 列表的显示需要三 ...

  3. ＳＱＬ技术内幕－5 比较特殊 insert into 数据的写法

    ---比较特殊,第一次看到这种写法,记录下来 create table Student --学生成绩表 ( id int, --主键 Grade int, --班级 Score int --分数 ) ...

  4. Codeforces Round #335 (Div. 2) C. Sorting Railway Cars 连续LIS

    C. Sorting Railway Cars   An infinitely long railway has a train consisting of n cars, numbered from ...

  5. pku 1182(种类并查集)

    题目链接:http://poj.org/problem?id=1182 解题思路来自discuss:http://poj.org/showmessage?message_id=152847 #incl ...

  6. Android 基于Socket的聊天应用(二)

    很久没写BLOG了,之前在写Android聊天室的时候答应过要写一个客户(好友)之间的聊天demo,Android 基于Socket的聊天室已经实现了通过Socket广播形式的通信功能. 以下是我写的 ...

  7. C语言标准

    1,K&R C 1978年, Dennis Ritchie和Brian Wilson Kernighan合作出版了<The C Programming Language>的第一版. ...

  8. 一个简单的以User权限启动外部应用程序（用NetUserAdd函数和USER_INFO_1结构体动态添加用户，然后用CreateProcessWithLogonW启动程序）

    版权声明:本文为博主原创文章,未经博主允许不得转载. BOOL ExecuteAsUser(LPCWSTR lpszUserName, LPCWSTR lpszPassword, LPCWSTR lp ...

  9. LinuxMint使用中文输入法

    自从转战linux系统以来,最痛苦的事情就是没有一款能让我满意的中文输入法了 不过今天我终于发现了一个让我比较满意的输入法(小小输入法),真的很不错 我试过不少输入法,但是还是小小输入法最适合我: 搜 ...

  10. 关于utf8 unicode gbk 编码乱码汇总

    首先从一个问题说起: 插入一个中文到blob类型(mysql编码是utf-unicode-ci). insert into  blobtype(data) values('中文你好') 复制数据显示为 ...