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 1422
#include <iostream> #define MAXN 350 using namespace std; int mat[MAXN][MAXN]; bool mark[MAXN] ...
- ZOJ 1610 Count the Colors （线段树区间更新）
题目链接 题意 : 一根木棍,长8000,然后分别在不同的区间涂上不同的颜色,问你最后能够看到多少颜色,然后每个颜色有多少段,颜色大小从头到尾输出. 思路 :线段树区间更新一下,然后标记一下,最后从头 ...
- OnClientClick="return confirm('确定要删除吗？')"
OnClientClick="return confirm('确定要删除吗?')" -----------------------前台代码 OnClientClick用于执行客 ...
- 矩阵快速幂 POJ 3070 Fibonacci
题目传送门 /* 矩阵快速幂:求第n项的Fibonacci数,转置矩阵都给出,套个模板就可以了.效率很高啊 */ #include <cstdio> #include <algori ...
- 添加dubbo xsd的支持
使用dubbo时遇到问题: org.xml.sax.SAXParseException: schema_reference.4: Failed to read schema document 'htt ...
- Struts2笔记——struts.xml配置详解
访问HelloWorld应用的路径的设置 * 在struts1中,通过<action path=“/primer/helloWorldAction.action”>节点的path属性指定访 ...
- JS解析json数据
JS解析json数据(如何将json字符串转化为数组) 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN&q ...
- 使用 tar 命令管理存档文件
tar命令用于将大型文件集汇集为一个文件(存档) tar的三种操作:c(创建存档).t(列出存档的内容).x提取存档 tar的常用选项:f(要操作的存档文件名).v(可视化操作) 创建压缩的tar存档 ...
- 怎样做出优秀的扁平化设计风格 PPT 或 Keynote 幻灯片演示文稿？（装）
不知道你有没有想过,为什么很人多的扁平化 PPT 是这个样子: 或者是这样: 然而,还有一小撮人的扁平化 PPT 却拥有那么高颜值: 为什么会产生这么大的差距呢?丑逼 PPT 应该如何逆袭成为帅逼呢? ...
- GitHub 教程 in Ubuntu
Follow these steps to configure github if you are the first time to use Github 1. Sign up a username ...