在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. CodeIgniter 常量ENVIRONMENT设置要注意的地方

    http://bbs.phpchina.com/thread-274514-1-1.html index.php ,这是CodeIgniter的入口文件,做开发是,都会设置一下define('ENVI ...

  2. 深入浅出ES6（八）：Symbols

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 你是否知道ES6中的Symbols是什么,它有什么作用呢?我相信你很可能不知道, ...

  3. [网页设计]Ajax、Comet与Websocket--转

    从http协议说起 1996年IETF  HTTP工作组发布了HTTP协议的1.0版本 ,到现在普遍使用的版本1.1,HTTP协议经历了17 年的发展.这种分布式.无状态.基于TCP的请求/响应式.在 ...

  4. Visual Studio 2010 快捷键

    Visual Studio 2010 快捷键: CTRL + SHIFT + B 生成解决方案CTRL + F7 生成编译CTRL + O 打开文件CTRL + SHIFT + O 打开项目CTRL ...

  5. Grub命令行

    今天电脑无缘无故无法正常启动,只提示 GRUB> 看来是GRUB引导出问题了,要解决下. 先 想到用制作U盘启动盘来启动,参照网上的方法,很简单用USBBOOT软件做了一个U盘启动盘,按F11在 ...

  6. STM32的GPIO口的输出开漏输出和推挽输出

    本文来自cairang45的博客,讲述了STM32的GPIO口的输出开漏输出和推挽输出, 作者博客:http://blog.ednchina.com/cairang45 本文来自: 高校自动化网(Ww ...

  7. iOS 限制UITextField输入字符

    开篇 之前做过一个即时通信的项目,需要限制输入框文本的字符个数,当时从网络上搜寻了几个方法,解决了需求,但是网络上的解决办法不是很全面:今天又遇到一个限制搜索框UISearchBar输入字符个数的问题 ...

  8. swift：入门知识之控制流

    1.swift语句中的控制流和其他语言大致相同,使用if和switch作为条件控制.使用 for-in.for.while.do-while作为循环. 2.区别之处:小括号不是必须的,但是主体的大括号 ...

  9. mysql代码里面有中文注释导致语法错误

    一个简单的创建表的代码 DROP database IF exists reg_login; CREATE database reg_login; use reg_login --用户表 create ...

  10. ubuntu下安装与测试mysql

    1.在决定安装mysql之前,要先确定系统是否已经安装mysql. 输入: 1 mysql 结果:说明尚未安装mysql The program 'mysql' is currently notins ...