JS获取对象代码总结
作者:sunxiaobo2008 来源:经典论坛 发布时间:2011-03-07 16:14:00
如果不用类库(如jquery)来写,往往很多时候,都需要通过id或tag来获取html里的某一对象,然后对其进行操作。
为了节省代码,把常用的获取对象的方法集成到函数里,每次直接通过传递参数来调用,可以是代码更简洁。下面总结了一下常用的获取对象的方法,供参考。
function GetId(id){return document.getElementById(id)} //通过ID获取对象
function GetTag(tag){return document.getElementsByTagName(tag)} //通过Tag获取对象(html标签名称)
function GetChildTag(id,tag){return id.getElementsByTagName(tag)} //通过Tag获取某ID对象的子对象
function GetClass(className){return getElementsByClassName(className)} //通过className获取对象
var $c=function(array){var nArray = [];for (var i=0;i<array.length;i++) nArray.push(array[i]);return nArray;};
Array.prototype.each=function(func){for(var i=0,l=this.length;i<l;i++) {func(this[i],i);};};
var getElementsByClassName=function(cn){
var hasClass=function(w,Name){
var hasClass = false;
w.className.split(' ').each(function(s){
if (s == Name) hasClass = true;
});
return hasClass;
};
var elems =document.getElementsByTagName("*")||document.all;
var elemList = [];
$c(elems).each(function(e){
if(hasClass(e,cn)){elemList.push(e);}
})
return $c(elemList);
};
上面代码里通过className获取对象的代码参考了论坛的一篇帖子,在此表示感谢。
使用方法示例:
[提示:你可先修改部分代码,再按运行]
部分HTML代码:
<div id="test" title="这是id=test的div">
<ul title="div内第一个ul">
<li>ccontent1</li>
<li>ccontent2</li>
<li>ccontent3</li>
<li>ccontent4</li>
</ul>
<ul class="test2" title="div内第二个ul,class=test2">
<li>bcontent1</li>
<li>bcontent2</li>
<li>bcontent3</li>
</ul>
</div>
<ul class="test2" title="div外的ul,class=test2">
<li>content1</li>
<li>content2</li>
</ul>
<input type="button" value="通过id获取" />
<input type="button" value="通过tag获取" />
<input type="button" value="通过id内tag获取" />
<input type="button" value="通过className获取" />
JS绑定事件:
window.onload=function(){
GetTag("input")[0].onclick=function(){alert("id为test的div内容是:"+GetId("test").innerHTML)}
GetTag("input")[1].onclick=function(){alert("body里共有"+GetTag("li").length+"个li")}
GetTag("input")[2].onclick=function(){alert("DIV里共有"+GetChildTag(GetId("test"),"li").length+"个li")}
GetTag("input")[3].onclick=function(){alert("className为test2的内容是:"+GetClass("test2")[0].innerHTML+GetClass("test2")[1].innerHTML)}
}
当然上面的函数名你还可以再简写,比如百度里获取id对象的函数就是这样的:
function G(id){return document.getElementById(id)} //调用方式:G("test")
或者这样:function $(id){return document.getElementById(id)} //$("test")
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 如果一个数字能表示成 p^q,且p是一个素数,q为大于1的正整数,则此数字就是超级素数幂。 param number: 测试该数字是否是超级
- 前言现在最流行的本地存储莫过于 cookie 的应用,但浏览器对 cookie 有很多限制,最大的限制在于其对cookie 总大小
- 我们将要来学习python的重要概念迭代和迭代器,通过简单实用的例子如列表迭代器和xrange。可迭代一个对象,物理或者虚拟存储的序列。li
- 简单的小练习,实现将一个指定列表中的数值进行转化,对于其中的非负数不作处理,对于负数需要转化为制定的数值,很简单就不多说了,下面是具体的实现
- 例1、一个简单存储过程游标实例DELIMITER $$ DROP PROCEDURE IF EXISTS getUserInfo $$CRE
- 本文实例讲述了C#简单查询SQLite数据库是否存在数据的方法。分享给大家供大家参考,具体如下://sqlite数据库驱动组件using S
- 前言:通过端口扫描我们可以知道目标主机都开放了哪些服务,下面通过TCP connect来实现一个TCP全连接端口扫描器。一个简单的端口扫描器
- 1.MySQL官网下载压缩版文件,放至安装路径下载zip安装包MySQL :: Download MySQL Community Serve
- 这篇文章主要介绍了简单了解python字符串前面加r,u的含义,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,
- 这两天看了下某位大神的github,知道他对算法比较感兴趣,看了其中的一个计算数字的步数算法,感觉这个有点意思,所以就自己实现了一个。算法描
- 今天发现有一个备份的mysql数据文件夹异常变大,一查发现是多了三个文件:ibdata1 ib_logfile0 ib_logfile1,前
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML&nb
- 需要将字符串中的空格去掉的情况,可以使用下面几种解决方法:1、strip()方法:该方法只能把字符串头和尾的空格去掉,但是不能将字符串中间的
- 下面就来介绍下SQL Server 2008中使用的端口有哪些:首先,最常用最常见的就是1433端口。这个是数据库引擎的端口,如果我们要远程
- 一个模块可以在逻辑上组织Python代码。将相关的代码到一个模块中,使代码更容易理解和使用。模块是可以绑定和借鉴任意命名属性的P
- 1、切片使用切片来实现列表的倒序排序,mylist[start:end:step],不改变原列表。#!/usr/bin/env python
- 一、需求说明能够根据模板批量生成docx文档。具体而言,读取excel中的数据,然后使用python批量生成docx文档。二、实验准备准备e
- 链判断运算符(?.)非常好用、常用,搭配Null 判断运算符使用,效果更佳,完美!来,上代码:我们通常获取一个对象多层的属性值时,需要进行多
- 本文实例讲述了Python实现的文本简单可逆加密算法。分享给大家供大家参考,具体如下:其实很简单,就是把一段文本每个字符都通过某种方式改变(
- python之循环遍历关于循环遍历大家都知道,不外乎for和while,今天我在这写点不一样的循环和遍历。在实践中有时会遇到删除列表中的元素