DOM中获得对象的方法
来源:互联网 发布:php 模拟发送post请求 编辑:程序博客网 时间:2024/05/29 07:38
Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。
在document对象中有以下三个方法,对于程序员来说,真可谓无人不知,无人不晓,他们分别是:
1.getElementById() 返回对拥有指定 id 的第一个对象的引用。
2.getElementsByName() 返回带有指定名称的对象集合。
3.getElementsByTagName() 返回带有指定标签名的对象集合。
在使用中要注意的是:
1.传入的参数为字符串。
2.返回值为对象(获得该对象后可通过“.“来定位到某属性),注意到第二和第三个方法的红色字没有,表示返回的对象是数组。
3.注意对象的value属性和innerHTML属性(这个要注意经常犯无谓的错误)。
这三个方法尤其是:getElementById() 的使用频率极高,故通过以下方法简化其调用:
代码
<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的元素数组。
<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的方法如下:
<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中获得对象的方法
- DOM中对象的方法
- DOM中对象的方法
- Spring中获得dataSurce对象的方法
- XSL函数二----DOM中对象的方法
- 关于js中dom对象不支持某些方法的处理
- dom编程中window对象的setInterval,setTimeout方法详解
- CMainFrame中获得CMyView对象的指针的方法
- DOM对象的常用方法
- Dom对象的常用方法
- Dom对象的常用方法:
- Dom对象方法的理解
- JCL中由接口获得对象的方法
- JCL中由接口获得对象的方法
- JCL中由接口获得对象的方法
- Action类中获得HttpServletResponse对象的四种方法
- Spring框架中获得DataSource对象的方法
- 在javascript中获得一个对象的所有方法
- shell教程
- 巧用border
- 10003--- Broadleaf电商系统开发(一) - Broadleaf介绍
- Oracle存储过程
- Android通用网络请求解析框架.11(总结)
- DOM中获得对象的方法
- 2017/1/10
- 用联合体判断大小端
- scrapy爬虫实战(四)--------------登陆51job并使用cookies进行爬取
- 般配数对
- 关于recycleview的item的布局问题
- 第三章 行转列 cast end while
- 237 Delete Node in a Linked List
- 级联分类器训练3