在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. ZOJ2929 Penalty Kick(概率)

    题目挺水的,但由于其独特的阅读量比赛的时候没发现这道水题,在此做一下翻译,如果有人搜到这翻译的话有帮助的话自然最好啦. 中国队平局进入最后的点球决胜局,首先抛硬币决定谁先罚球,然后先是罚五球,如果罚的 ...

  2. iOS富文本－NSAttributedString简单封装

    直接调用系统的写起来比较麻烦,封装一下 因为要简单所以就写类方法 WJAttributeStyle 基类 ) {         ; i < styles.count; i ++) {      ...

  3. 这个东西，写C++插件的可以用到。 RapidJSON —— C++ 快速 JSON 解析器和生成器

    点这里 原文: RapidJSON —— C++ 快速 JSON 解析器和生成器 时间 2015-04-05 07:33:33  开源中国新闻原文  http://www.oschina.net/p/ ...

  4. ==和equals的区别

    == :是判断两个变量或实例是不是指向同一个内存空间equals :是判断两个变量或实例所指向的内存空间的值是不是相同 结论:欲比较栈中数据是否相等,请用= =:欲比较堆中数据是否相等,请用equal ...

  5. UVALive 6187 Never Wait for Weights 带权并查集

    题意:每次给出每两个数之间的大小差值.在给出关系的过程中插入询问:数a和数b的差值,若不能确定,输出UNKNOWN 解法:相对大小关系的处理:并查集 1.给出两点的相对大小关系后,找到两个点的根节点, ...

  6. 矩阵快速幂 POJ 3735 Training little cats

    题目传送门 /* 题意:k次操作,g:i猫+1, e:i猫eat,s:swap 矩阵快速幂:写个转置矩阵,将k次操作写在第0行,定义A = {1,0, 0, 0...}除了第一个外其他是猫的初始值 自 ...

  7. sftp的安装和使用

    http://blog.srmklive.com/2013/04/24/how-to-setup-sftp-server-ftp-over-ssh-in-ubuntu/ In my previous ...

  8. CentOS 7:如何安装防火墙?

    对于纯净版的CentOS 7,您必须手动安装防火墙.但是你就算安装了防火墙还是不能马上运行它,你需要再做一些操作才能让它工作. 在CentOS 7中按照以下步骤来设置防火墙 第一步,通过yum安装sy ...

  9. yii2 增加新的目录结构

    搭建新的目录结构详细点击这里 搭建Restful API 点击这里 1.开发环境操作系统        Windows Server 2012 R2 DatacenterPHP架构        Ap ...

  10. 开发ProxyServer的时候如何在一台PC上调试

    为了测试在真实的网络环境下你的ProxyServer性能如何,而你手头又只有一台电脑,怎么办? 打开你的ProxyServer(我用java写的,因此ProxyServer的进程是javaw.exe) ...