在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 2311

    Cutting Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2844   Accepted: 1036 Desc ...

  2. swift循环

    ..< {     println(... {     println( ":"lala"] for (key,value)in dic {     println ...

  3. Android中的Adapter总结

    一.Adapter的介绍 An Adapter object acts as a bridge between an AdapterView and the underlying data for t ...

  4. <?php $sql = <<<EOF 。。。。EOF;?>这种写法是什么意思

    php里$sql = <<<EOF //有这样的语法??????//sql语句EOF;运行mysql_query($sql)?>这是什么语法?变量声明可以这样的结构?请解答,谢 ...

  5. java控制反转与依赖注入

    1.简介 依赖注入和控制反转,目的是为了使类与类之间解耦合,提高系统的可扩展性和可维护性,下面通过一个例子来引入这一概念. 2.案例 1)一般情况下的类耦合 Main.java public clas ...

  6. 使用RockMongo管理MongoDB

    http://blog.csdn.net/mydeman/article/details/7082730

  7. 如何在github上展示作品——为你的项目生成一个快速访问的网址如（DaisyWang88.github.io）

      (这里值针对Windos系统的,因为本人用的是Window系统,暂时没有条件在其他平台上测试)   1.创建命名为 <userName>.github.io的仓库.      这里的u ...

  8. 浅析CSS负边距

    本文主要讨论两点,1.左右负边距对元素宽度的影响:2.负边距对浮动元素的影响. 在讨论这两点前,首先要理解盒模型.文档流. 盒模型,见下图,简单明了. 文档流,将窗体自上而下分成一行行, 并在每行中按 ...

  9. 易犯的PHP小错误及相应分析

    变量声明如果在一条语句中声明一个变量,如下所示:$var = 'value'; 编译器首先会求出语句右半部分的值,恰恰正是语句的这一部分常常会引发错误.如果使用的语法不正确,就会出现解析错误. 解析错 ...

  10. nginx之location配置

    语法规则: location [=|~|~*|^~] /uri/ { … } = 开头表示精确匹配 ^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可.nginx不对url做编码,因 ...