在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. iOS工程预编译文件的创建

    在搜索 添加工程名/自己的pch文件名记住加后缀  

  2. java基础知识回顾之抽象类

    /* 抽象类: 抽象:笼统,模糊,看不懂!不具体. 特点: 1,方法只有声明没有实现时,该方法就是抽象方法,需要被abstract修饰. 抽象方法必须定义在抽象类中.该类必须也被abstract修饰. ...

  3. 【转载】 硬盘主引导记录(MBR)及其结构详解

    硬盘的0柱面.0磁头.1扇区称为主引导扇区,FDISK程序写到该扇区的内容称为主引导记录(MBR).该记录占用512个字节,它用于硬盘启动时将系统控制权交给用户指定的,并在分区表中登记了的某个操作系统 ...

  4. [RM HA3] Zookeeper在RM HA的应用

    [RM HA3] Zookeeper在RM HA的应用 RM HA(ResourceManager  HighAvailability)中使用Zookeeper的地方在ZKRMStateStore和Z ...

  5. Android安卓开发环境搭建详细教程

    安装目录:步骤1 安装JDK步骤2 安装 Android SDK ----http://www.androiddevtools.cn/ 步骤3 安装Tomcat步骤4 安装Ant步骤5 安装Eclip ...

  6. cojs QAQ的图论题 题解报告

    话说这个题目应该叫做 斯特林数的逆袭 QAQ 先说一说部分分的算法 1.n<=5 直接暴力搜索就可以了 2.k=0的时候不难发现任意一张图的价值都是n,问题转化为计算有多少种图,显然是2^C(n ...

  7. Linux问题定位工具大放送

    我们在程序定位问题时,经常不知所错,但是在linux有很多强大的工具,只要我们合理利用,一定见奇效. 主要会遇到以下问题: 1 mem高 2 cpu高 3 io高 4 网络延迟高 vargrind:h ...

  8. ps小技巧

    一.加色与减色 电脑显示器和电视是加色法最常见的形式,而在油漆.颜料和彩色滤光片会用减色. 二.怎么把背景变成透明:其实就是抠图. 1.魔术棒+delete,缺点:应用于边界明显的图片,否则容差不好控 ...

  9. VCL设计方法概论（自己总结了9条），以及10个值得研究的控件 good

    VCL设计方法概论 1. 把Delphi对象改造成一个Windows窗口,主要是要设置Handle和回调函数.在创建一个Windows窗口后,将其句柄赋值给Delphi对象的属性,这个并不难,相当于从 ...

  10. JAVA字符串格式化String.format()的使用

    JAVA字符串格式化-String.format()的使用常规类型的格式化 String类的format()方法用于创建格式化的字符串以及连接多个字符串对象.熟悉C语言的同学应该记得C语言的sprin ...