关于javascript:Javascript-DOM封装方法汇总

34次阅读

共计 7563 个字符，预计需要花费 19 分钟才能阅读完成。

一：在页面上减少类和删除类的办法：

减少类：传两个参数节点和类名办法如下：

function addClass(obj,className){
obj.className+=” ” +className;
return obj;
}

删除类也是传两个参数节点和类名而后获取该节点的所有类名并且用正则表达式用空格把他们隔开而后一个 for 循环判断以后的任何一个类名是不是和我以后的传的参数类名是不是雷同如果是雷同的话就删掉最初返回该对象！代下：

function delClass(obj,className){
var s = obj.className.split(/s+/);// 正则把类名离开
for(var i=0;i<s.length;i++){
if(s[i]==className){
delete s[i];
}
}
obj.className = s.join(” “);
return obj;
}

二：简略的用 try{}catch(e){} 语句写个收藏夹：

代码如下：

<a href=”javascript:void(0)” onclick=”addFav()”>aaaaa
<script>
// 把相应网址增加到收藏夹外面去
//IE 的形式是：window.external.addFavorite(sUrl,sTitle);
// 火狐的形式是:window.sidebar.addPanel(sTitle,sUrl,””);
//IE 和火狐别离实现了本人的增加到收藏夹的形式其中 address 是页面的网址 name 是页面的题目
// 能够写个简略的函数来判断
function addFav(){
try{
window.sidebar.addPanel(“ 百度 ”,”http://www.baidu.com”,””); // 火狐的
}catch(e){
try{
window.external.addFavorite(“http://www.baidu.com”,” 百度 ”); //IE 的
}catch(e){
}
}
}
</script>

三跨游览器事件：

function addEvent(obj,evt,fn,userCape){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else{
obj.attachEvent(“on”+evt,function(){
fn.call(obj);
});
}
}
function delEvent(obj,evt,fn,userCape){
if(obj.removeEventListener){
obj.removeEventListener(evt,fn,false);
}else{
obj.detachEvent(“on”+evt,fn);
}
}
function fixEvt(evt){
evt = evt || window.event;
if(!evt.target){// IE 下
evt.target = evt.srcElement;
evt.layerX = evt.offsetX;
evt.layerY = evt.offsetY;
evt.stopPropagation = function(){
this.cancelBubble = true;
}
}
return evt;
}
</script>

特地留神下面的 attachEvent 这个办法千万不要写成这样的 attachEvent(obj,”on”+evt,fn), 如果写成这样的话那么函数 fn（如果你用 this 的话那么函数内的 this 就指向与 window）所以这也是个 IEbug 因为咱们是想要该函数 this 指向与以后实例化对象所以咱们要改成这样的形式:attachEvent(obj,”on”+evt,function(){fn.call(obj)}); 用以后的函数调用该对象那么该函数的指针就指向与该对象！这个中央要留神点！尽管改了后 this 也是指向与对象的！然而用这个函数也要留神一个中央如果用 attachEvent(obj,”on”+evt,function(){fn.call(obj)}); 这个办法在 IE 下注册三个同样的函数三个同样的事件的话那么在 IE 下你点击一下元素的话他们会同时触发三个事件而在火狐下只会触发一个事件所以用这个函数在 IE 下也并不是说没有 bug 然而用这个函数注册事件的话个别状况下是没有什么问题的然而这个也是咱们要留神的中央！如果要批改下这个 bug 话也并不是说不能改只是要写个更简单的函数来判断下就是在页面上判断以后函数及事件是不是在页面上曾经注册了如果注册了那么咱们就返回！然而这个函数比较复杂所以也没有去钻研！不过用下面的那种形式个别状况下足够了！

四：滚动的文字：

在有的网站上咱们常常看到 title 有文字滚动的成果：其实这个用 js 来实现也是一件非常简单的事件！其实这个和在页面上实现滚动是一样的情理首先咱们用 document.title 就能够获取该对象内容接着咱们只做两件事件第一用字符串离开第二把第一个文字放到最初去

代码如下：

<button id=”oStart”> 开始 </button>
<button id=”oEnd”> 完结 </button>
<!– <script>
function $(id){
return document.getElementById(id);
}
var start = $(“oStart”),
end = $(“oEnd”);
var flag; // 用 flag 有个问题就是不能革除缓存当我点击进行时候等一段时间后再点击开始文字会滚动的很快
addEvent(start,’click’,scroll);
addEvent(end,’click’,stop);
function scroll(){
flag = true;
var s = document.title.split(“”);
setInterval(function(){
if(flag){
s.push(s.shift());
document.title = s.join(“”);
}
},300);
this.disabled = true; // 点击后让按钮成为不能够点击的状态
end.disabled = false; // 让完结按钮成为能够点击的状态
}
function stop(){
flag = false;
start.disabled = false;
this.disabled = true;
}
function addEvent(obj,evt,fn,userCape){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else{
obj.attachEvent(“on” + evt,function(){
fn.call(obj);
})
}
}
</script> –>

下面代码在页面上给了两个按钮当我点击开始时候文字就开始滚动当点击完结时候文字就进行滚动！而后点击后在相应的按钮上设置成不可点击状态！下面的函数用了一个变量 flag 判断如果是 true 的话用 setInterval 执行这个函数然而用 flag 有个 bug 就是不能革除网站监控游览器的缓存就是当我点击进行按钮后再点击开始时候文字会滚动的很快！这样的成果并不是咱们想要的！

所以咱们能够接着持续写代码：

function $(id){
return document.getElementById(id);
}
var start = $(“oStart”),
end = $(“oEnd”);
var t;
addEvent(start,’click’,scroll);
addEvent(end,’click’,stop);
function scroll(){
var s = document.title.split(“”);
clearInterval(t);
t = setInterval(function(){
s.push(s.shift());
document.title = s.join(“”);
},300);
}
function stop(){
clearInterval(t); // 用这种形式就能够革除缓存然而还存在另一个问题就是说如果我点击屡次开始按钮时候它还会执行下面的代码 setInterval 这段代码
// 而当初我执行完结按钮时候完结不掉！所以咱们要做他们执行 setIvterval 之前要 clearInterval 革除一次
}
function addEvent(obj,evt,fn,userCape){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else{
obj.attachEvent(“on” + evt,function(){
fn.call(obj);
})
}
}
</script>

代码如上所示！

上面咱们就在文档中写个简略的文字滚动当然是用面向对象的形式来写个函数代码如下：

<!– 下面实现题目文字滚动没有多大意思上面实现段落或者 div 中的文字滚动 –>
<p id=”op”>aaaaaa</p>
<script>
function $(id){
return document.getElementById(id);
}
obj = $(“op”);
var oStart = $(“oStart”);
var oEnd = $(“oEnd”);
function addEvent(obj,evt,fn,userCape){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else{
obj.attachEvent(“on” + evt,function(){
fn.call(obj);
})
}
}
var test;
/* function scrollText(text,fn,t){
test = text.split(“”);
setInterval(function(){
test.push(test.shift());
fn(test.join(“”));
},t)
} */ // 这种形式能够然而如果我想要和下面一样能有管制按钮那么咱们当初能够应用上面面向对象办法来解决
function ScrollText(s,fn,t){
this.s = s.split(“”);
this.fn = fn;
tthis.t = t || 500;
}
ScrollText.prototype = {
start : function(){
clearInterval(this.interval);
var s = this.s,fn = this.fn;
this.interval = setInterval(function(){
s.push(s.shift());
fn(s.join(“”));
},this.t);
},
stop : function(){
clearInterval(this.interval);
}
}
var sss = new ScrollText(“ 要滚动的文字 ”,function(g){
obj.innerHTML = g;
},1000);
oStart.onclick = function(){
sss.start();
};
oEnd.onclick = function(){
sss.stop()
};

下面就是用了个简略的面向对象的形式写了个简略的函数！

五：获取类名封装 (getElementsByClassName)

在用 js 时候咱们常常要用到获取类名的办法！然而咱们原审 js 是没有这个办法的当然不必 js 框架状况下那么咱们能够简略的用函数封装一个！然而封装这个函数之前咱们要思考先写个简略的函数就是 hasClass() 这个办法这个办法就是判断以后的页面有没有这个类这个办法也是为获取类名做好筹备的首先咱们必定要判断以后的页面有没有这个类名如果有的话我就获取它！上面是 hasClass() 办法

// 查看有没有类
function hasClass(node,className){
var names = node.className.split(/s+/);// 正则表达式所有的类名用空格离开
// 遍历这个类名
for(var i=0;i<names.length;i++){
if(names[i]==className)
return true;
}
return false;
}

上面是获取类名的代码：

function getElementsByClassName(className,context){
context = context || document;
if(context.getElementsByClassName){
return context.getElementsByClassName(className);
}
var nodes = context.getElementsByTagName(“*”),ret=[];// 获取页面上的所有节点
for(var i=0;i<nodes.length;i++){// 遍历所有的节点
if(hasClass(nodes[i],className)) ret.push(nodes[i]);
}
return ret;
}

获取类名的代码和我那个相比简略很多只是传了两个参数一个是类名还有一个以后的上下文！默认状况下文档 document！代码也比拟简洁！

上面是所有代码一起贴上来吧！

<!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> 无标题文档 </title>
<style>
</style>
</head>
<body>
<div class=”oDiv”>
<p>aaa</p>
<div></div>
</div>
<script>
function getElementsByClassName(className,context){
contextcontext = context || document;
if(context.getElementsByClassName){
return context.getElementsByClassName(className);
}
var nodes = context.getElementsByTagName(“*”),ret=[];// 获取页面上的所有节点
for(var i=0;i<nodes.length;i++){// 遍历所有的节点
if(hasClass(nodes[i],className)) ret.push(nodes[i]);
}
return ret;
}
// 查看有没有类
function hasClass(node,className){
var names = node.className.split(/s+/);// 正则表达式所有的类名用空格离开
// 遍历这个类名
for(var i=0;i<names.length;i++){
if(names[i]==className)
return true;
}
return false;
}
// 获取元素的第一个子节点 js 原本是有获取第一个子节点的办法然而获取时候会把空白其余字符也当作节点此函数就是为了解决这样的办法
function firstNode(node){
if(node.firstChild){
if(node.firstChild.nodeType==1){
return node.firstChild;
}else{
var n = node.firstChild;
while(n.nextSibling){
if(n.nextSibling.nodeType==1) return n.nextSibling;
nn = n.nextSibling;
}
return null;
}
return null;
}
}
function next(node){// 返回 node 的下一个兄弟元素
if(node.nextSibling){
if(node.nextSibling.nodeType==1){
return node.nextSibling;
}else{
var n = node.nextSibling;
while(n.nextSibling){
if(n.nextSibling.nodeType==1) return n.nextSibling;
nn = n.nextSibling;
}
return null;
}
return null;
}
}
</script>
<script>
var ss = getElementsByClassName(“oDiv”)[0];
var kk = ss.childNodes;
var h = firstNode(ss);
alert(h.tagName)
</script>
</body>
</html>