Dom对象的方法应用一getElementById技巧、getElementsByName() IE，firefox兼容
在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兼容的更多相关文章
- Javascript学习，DOM对象，方法的使用
JavaScript: ECMAScript: BOM: DOM: 事件 DOM的简单学习 功能:控制html文档内容 代码:获取页面标签(元素)对象和Element document.getElem ...
- jquery 获取多个dom对象的方法
$("[name=trade]").each(function(){ for(j=0;j<info.trade.length;j++){ if( $(this).val() ...
- jquery对象与dom对象之间互相转换的方法
本文主要讲述jquery对象和js里的dom对象之间互相转换的方法,使jquery对象可以直接使用js里的方法,或js里的dom对象使用jquery里的方法. jquery对象和dom对象是不一样的, ...
- jQuery对象和DOM对象的区别
jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...
- JQuery对象与DOM对象的区别与转换
1.jQuery对象和DOM对象的区别 DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象; eg: var domObj ...
- DOM对象与jquery对象有什么不同
jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...
- JavaScript 对象、DOM对象、jquery对象的区别、转换详解
一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...
- 区别 Jquery对象和Dom对象
在讨论之前,先约定好定义变量的风格. 如果获取的对象是jQuery对象,那么在变量前加上$,例如: var $variable = jQuery对象; 如果获取的是DOM对象,则定义如下: var v ...
- DOM对象与jquery对象的区别
jQuery对象和DOM对象使用说明,需要的朋友可以参考下. 1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQue ...
随机推荐
- POJ 3696 The Luckiest number （欧拉函数，好题）
该题没思路,参考了网上各种题解.... 注意到凡是那种11111..... 22222..... 33333.....之类的序列都可用这个式子来表示:k*(10^x-1)/9进而简化:8 * (10^ ...
- iOS16进制设置颜色
UIColor+Hex.h // // UIColor+Hex.h // 16进制颜色类别 // // Created by apple on 15-4-3. // Copyright (c) 201 ...
- C# WinForm窗口最小化到系统托盘
* C# WinForm窗口最小化到系统托盘http://hi.baidu.com/kfxtgtqyapouyze/item/8ccfdcd5a174a7312a35c7c3 主要功能:(1).程序启 ...
- http://linuxme.blog.51cto.com/1850814/372960
http://linuxme.blog.51cto.com/1850814/372960 http://os.51cto.com/art/201404/435129.htm
- STL erase函数
1 各种迭代器erase实现 析构的基本工具 Template <class T> inline void destroy(T* pointer){ pointer->~T(); } ...
- 8 simple things that will make you sexy
8 simple things that will make you sexy8种方法教你不动声色的性感What makes a women sexy? Is it her body? Is it t ...
- sql server2008禁用远程连接
1.打开SQL Server 配置管理器,双击左边 SQL Server 网络配置,点击TCP/IP协议,在协议一栏中,找到 全部侦听,修改为否,然后点击IP地址,将IP地址为127.0.0.1(IP ...
- VCC、VDD、VEE、VSS等有关电源标注的区别
Almost all integrated circuits (ICs) have at least two pins which connect to the power rails of the ...
- linux shell 命令学习(4) cut - remove sections from each line of files
之前写了split命令,split主要是按照行来进行文件的分割,而cut 是按照列来进行文件内容的选取 cut OPTION... [FILE]... 描述: 按列选取FILE的内容进行输出 -d : ...
- mongo中查询Array类型的字段中元素个数
I have a MongoDB collection with documents in the following format: { "_id" : ObjectId(&qu ...