JavaScript 高級(jí)篇之DOM文檔,簡(jiǎn)單封裝及調(diào)用、動(dòng)態(tài)添加、刪除樣式（六）
更新時(shí)間：2012年04月07日 02:20:09 作者：
學(xué)習(xí)是有趣的,但有過(guò)濾的學(xué)習(xí)內(nèi)容就更好,本博主就專門為剛接觸javascript客戶端編程的朋友提供及分享個(gè)人學(xué)習(xí)經(jīng)歷!建議大家看看：(湯姆大叔的博客)
http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html , 在回來(lái)看這里文章,你一定會(huì)有更深刻的認(rèn)識(shí)。因?yàn)槲以谶@里介紹概念上的東西比較少,看下面的例子,對(duì)初學(xué)的朋友可能會(huì)有些吃力!
1、DOM的架構(gòu)
<html>
<head>
<title>document</title>
</head>
<body>
<h1>CSS Demo</h1>
<p>我喜歡美女,特別是高個(gè)的美女</p>
</body>
</html>
<style type="text/css">
body{ margin:0px; padding:0px; }
#container{font-family:tahoma;font-size:14px;border:solid 1px #99ffcc; width:200px;height:140px; float:left; }
#container ul{list-style:none;padding:1px 0px 0px 0px; margin:0px;}
#container ul li{ border-bottom:solid 1px #99ffcc; margin:0px;height:27px;}
#container ul li a{background-color:gray;text-decoration:none;display:block; border-left:solid 10px red;margin:0px; padding:5px 0px 5px 10px;}
#container ul li a:hover{background-color:red; color:#000000; }
</style>
2、加一個(gè)div 元素.
<div id="container">
<ul id="list">
<li><a href="#">Home</a></li>
<li id="myblog"><a href="#">MyBlog</a></li>
<li><a href="#">Sport</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contane</a></li>
</ul>
</div>
3、你現(xiàn)在應(yīng)該看到如下圖：
var Tools = {};
Tools.getElementCount = function(e){
var count =0;
elementTotal(e);
document.table.txt.value = "element:"+ count;
function elementTotal(e)
{
if(e.nodeType == 1) count++;
var children = e.childNodes;
for(var i = 0;i<children.length;i++)
{
elementTotal(children[i]);
}
}
};
備注：大家使用可以再body加入<button type ="button" onclick = "alert(Tools.getElementCount(document))">獲取元素個(gè)數(shù)</button>
5、將文本全部大寫(xiě)
Tools.ModifyElement = function modify(e){
if(e.nodeType == 3)
e.data = e.data.toUpperCase();
else
{
for(var i = e.firstChild;i!=null;i=i.nextSibling)
modify(i);
}
};
備注：大家使用可以再body加入<button type ="button" onclick = "Tools.ModifyElement(document)">大寫(xiě)</button>
效果：
Tools.documentSort = function(e){
var textArray = [];
if(typeof e =="string") e = document.getElementById(e);
for(var x = e.firstChild; x!= null;x=x.nextSibling)
if(x.nodeType == 1) textArray.push(x);
textArray.sort(function(n,m){
var s = n.firstChild.firstChild.data;
var t = m.firstChild.firstChild.data;
if(s>t) return -1;
else if(s<t) return 1;
else return 0;
});
備注：大家使用可以再body加入<button type ="button" onclick = "Tools.documentSort('list')">排序</button>
效果：
Tools.insertElement = function(n,e){
if(typeof n == "string") n = document.getElementById(n);
var li = document.createElement(e);
var a = document.createElement("a");
a.setAttribute("href","#");
var txt = document.createTextNode("HotBlog");
a.appendChild(txt);
li.appendChild(a);
var parent = n.parentNode;
parent.insertBefore(li,n);
};
備注：大家使用可以再body加入<button type ="button" onclick="Tools.insertElement('myblog','li');">插入</button>
效果：
1、樣式表
.tooltip{background:url('2.jpg'); border:solid 1px #99ffcc; width:200px;height:200px;}//這里的圖片大家要該一下
.toolcontent{background-color:#ffffff; border:solid 1px #99ff00; padding:5px; font:tahoma 12px; color:#000000;}
2、javascript類
function Tooltip()
{
this.tooltip = document.createElement("div");
this.tooltip.style.position = "absolute";
this.tooltip.className = "tooltip";
this.content = document.createElement("div");
this.content.style.position = "relative";
this.content.className = "toolcontent";
this.tooltip.appendChild(this.content);
}
Tooltip.prototype.show = function(text,x,y)
{
this.content.innerHTML = text;
this.tooltip.style.left = x+"px";
this.tooltip.style.top = y+"px";
this.tooltip.style.visibility = "visible";
if(this.tooltip.parentNode != document.body)
document.body.appendChild(this.tooltip);
};
Tooltip.prototype.hide = function(){ this.tooltip.style.visibility ="hidden";};
var t = new Tooltip();
function hide()
{
t.hide();
}
function show()
{
t.show("hello ",300,0);
}
function init()
{
document.operator.show.onclick = show;
document.operator.hide.onclick = hide;
}
備注：配合上面使用必須還完成以下步驟：1、將body中的onload=init();2 在body中添加 :
<form name = "operator">
<input type = "button" value = "隱藏" name = "hide"/>
<input type = "button" value = "顯示" name = "show">
</form>
效果：（隱藏看到什么了)
1、樣式表
.container{font-family:tahoma;font-size:14px;border:solid 1px #99ffcc; width:200px;height:140px;float:left;}
.container ul{list-style:none;padding:1px 0px 0px 0px; margin:0px;}
.container ul li{ border-bottom:solid 1px #99ffcc; margin:0px;height:27px;}
.container ul li a{background-color:gray;text-decoration:none;display:block; border-left:solid 10px red;margin:0px; padding:5px 0px 5px 10px;}
.container ul li a:hover{background-color:red; color:#ffffff; }
2、工具函數(shù)（動(dòng)態(tài)添加、刪除樣式）
var CSSclass = {};
CSSclass.is = function(e,c){
if(typeof e == "string") e = document.getElementById(e);
var classes = e.className;
if(!classes) return false;
if(classes == c) return true;
return e.className.search("\\b" +c +"\\b*") != -1;
};
CSSclass.add = function(e,c){
if(typeof e == "string") e = document.getElementById(e);
if(CSSclass.is(e,c))return;
//if(e.className) c=""+c;
e.className += c;
};
CSSclass.remove = function(e,c){
if(typeof e == "string") e = document.getElementById(e);
//e.id = e.id.replace(new RegExp("\\b" +e.id +"\\b\\s*","g"),"");
e.className = e.className.replace(new RegExp("\\b"+c+"\\b\\s*","g"),"");
};
3、在body中加入如下元素
<div id="con">
<ul id="list">
<li><a href="#">Home</a></li>
<li id="myblog"><a href="#">MyBlog</a></li>
<li><a href="#">Sport</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Content</a></li>
</ul>
<button type="button" name ="add" onclick = "CSSclass.add('con','container');">動(dòng)態(tài)添加樣式</button>
<button type="button" name ="remove" onclick ="CSSclass.remove('con','container');">動(dòng)態(tài)刪除樣式</button>
效果：
（很多沒(méi)有備注，大家有問(wèn)題可以給我留言!)
1、DOM的架構(gòu)
復(fù)制代碼 代碼如下:
<html>
<head>
<title>document</title>
</head>
<body>
<h1>CSS Demo</h1>
<p>我喜歡美女,特別是高個(gè)的美女</p>
</body>
</html>
這個(gè)文檔的DOM表示如下圖：
圖片表示一個(gè)HTML文檔的樹(shù).
所有DOM樹(shù)結(jié)構(gòu)表現(xiàn)為不同種類的Node對(duì)象的一個(gè)數(shù),firstChild,lastChild,nextSibling,previousSibling和ParentNode屬性提供遍歷節(jié)點(diǎn)的樹(shù)的一種辦法,appendChild,removeChild,replaceChildh和insertBefore這樣的方法可以像文檔中添加節(jié)點(diǎn)或者從文檔中刪除節(jié)點(diǎn)。不明白沒(méi)關(guān)系接下來(lái)我將用大量的例子讓你明白。
1、先創(chuàng)建一個(gè)使用CSS美化的列表復(fù)制代碼 代碼如下:
<style type="text/css">
body{ margin:0px; padding:0px; }
#container{font-family:tahoma;font-size:14px;border:solid 1px #99ffcc; width:200px;height:140px; float:left; }
#container ul{list-style:none;padding:1px 0px 0px 0px; margin:0px;}
#container ul li{ border-bottom:solid 1px #99ffcc; margin:0px;height:27px;}
#container ul li a{background-color:gray;text-decoration:none;display:block; border-left:solid 10px red;margin:0px; padding:5px 0px 5px 10px;}
#container ul li a:hover{background-color:red; color:#000000; }
</style>
2、加一個(gè)div 元素.
復(fù)制代碼 代碼如下:
<div id="container">
<ul id="list">
<li><a href="#">Home</a></li>
<li id="myblog"><a href="#">MyBlog</a></li>
<li><a href="#">Sport</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contane</a></li>
</ul>
</div>
3、你現(xiàn)在應(yīng)該看到如下圖：
復(fù)制代碼 代碼如下:
var Tools = {};
Tools.getElementCount = function(e){
var count =0;
elementTotal(e);
document.table.txt.value = "element:"+ count;
function elementTotal(e)
{
if(e.nodeType == 1) count++;
var children = e.childNodes;
for(var i = 0;i<children.length;i++)
{
elementTotal(children[i]);
}
}
};
備注：大家使用可以再body加入<button type ="button" onclick = "alert(Tools.getElementCount(document))">獲取元素個(gè)數(shù)</button>
5、將文本全部大寫(xiě)
復(fù)制代碼 代碼如下:
Tools.ModifyElement = function modify(e){
if(e.nodeType == 3)
e.data = e.data.toUpperCase();
else
{
for(var i = e.firstChild;i!=null;i=i.nextSibling)
modify(i);
}
};
備注：大家使用可以再body加入<button type ="button" onclick = "Tools.ModifyElement(document)">大寫(xiě)</button>
效果：
復(fù)制代碼 代碼如下:
Tools.documentSort = function(e){
var textArray = [];
if(typeof e =="string") e = document.getElementById(e);
for(var x = e.firstChild; x!= null;x=x.nextSibling)
if(x.nodeType == 1) textArray.push(x);
textArray.sort(function(n,m){
var s = n.firstChild.firstChild.data;
var t = m.firstChild.firstChild.data;
if(s>t) return -1;
else if(s<t) return 1;
else return 0;
});
備注：大家使用可以再body加入<button type ="button" onclick = "Tools.documentSort('list')">排序</button>
效果：
復(fù)制代碼 代碼如下:
Tools.insertElement = function(n,e){
if(typeof n == "string") n = document.getElementById(n);
var li = document.createElement(e);
var a = document.createElement("a");
a.setAttribute("href","#");
var txt = document.createTextNode("HotBlog");
a.appendChild(txt);
li.appendChild(a);
var parent = n.parentNode;
parent.insertBefore(li,n);
};
備注：大家使用可以再body加入<button type ="button" onclick="Tools.insertElement('myblog','li');">插入</button>
效果：
1、樣式表
復(fù)制代碼 代碼如下:
.tooltip{background:url('2.jpg'); border:solid 1px #99ffcc; width:200px;height:200px;}//這里的圖片大家要該一下
.toolcontent{background-color:#ffffff; border:solid 1px #99ff00; padding:5px; font:tahoma 12px; color:#000000;}
2、javascript類
復(fù)制代碼 代碼如下:
function Tooltip()
{
this.tooltip = document.createElement("div");
this.tooltip.style.position = "absolute";
this.tooltip.className = "tooltip";
this.content = document.createElement("div");
this.content.style.position = "relative";
this.content.className = "toolcontent";
this.tooltip.appendChild(this.content);
}
Tooltip.prototype.show = function(text,x,y)
{
this.content.innerHTML = text;
this.tooltip.style.left = x+"px";
this.tooltip.style.top = y+"px";
this.tooltip.style.visibility = "visible";
if(this.tooltip.parentNode != document.body)
document.body.appendChild(this.tooltip);
};
Tooltip.prototype.hide = function(){ this.tooltip.style.visibility ="hidden";};
var t = new Tooltip();
function hide()
{
t.hide();
}
function show()
{
t.show("hello ",300,0);
}
function init()
{
document.operator.show.onclick = show;
document.operator.hide.onclick = hide;
}
備注：配合上面使用必須還完成以下步驟：1、將body中的onload=init();2 在body中添加 :
<form name = "operator">
<input type = "button" value = "隱藏" name = "hide"/>
<input type = "button" value = "顯示" name = "show">
</form>
效果：（隱藏看到什么了)
1、樣式表
復(fù)制代碼 代碼如下:
.container{font-family:tahoma;font-size:14px;border:solid 1px #99ffcc; width:200px;height:140px;float:left;}
.container ul{list-style:none;padding:1px 0px 0px 0px; margin:0px;}
.container ul li{ border-bottom:solid 1px #99ffcc; margin:0px;height:27px;}
.container ul li a{background-color:gray;text-decoration:none;display:block; border-left:solid 10px red;margin:0px; padding:5px 0px 5px 10px;}
.container ul li a:hover{background-color:red; color:#ffffff; }
2、工具函數(shù)（動(dòng)態(tài)添加、刪除樣式）
復(fù)制代碼 代碼如下:
var CSSclass = {};
CSSclass.is = function(e,c){
if(typeof e == "string") e = document.getElementById(e);
var classes = e.className;
if(!classes) return false;
if(classes == c) return true;
return e.className.search("\\b" +c +"\\b*") != -1;
};
CSSclass.add = function(e,c){
if(typeof e == "string") e = document.getElementById(e);
if(CSSclass.is(e,c))return;
//if(e.className) c=""+c;
e.className += c;
};
CSSclass.remove = function(e,c){
if(typeof e == "string") e = document.getElementById(e);
//e.id = e.id.replace(new RegExp("\\b" +e.id +"\\b\\s*","g"),"");
e.className = e.className.replace(new RegExp("\\b"+c+"\\b\\s*","g"),"");
};
3、在body中加入如下元素
復(fù)制代碼 代碼如下:
<div id="con">
<ul id="list">
<li><a href="#">Home</a></li>
<li id="myblog"><a href="#">MyBlog</a></li>
<li><a href="#">Sport</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Content</a></li>
</ul>
<button type="button" name ="add" onclick = "CSSclass.add('con','container');">動(dòng)態(tài)添加樣式</button>
<button type="button" name ="remove" onclick ="CSSclass.remove('con','container');">動(dòng)態(tài)刪除樣式</button>
效果：
沒(méi)添加樣式的樣子
加了樣式之后。
（很多沒(méi)有備注，大家有問(wèn)題可以給我留言!)
相關(guān)文章
關(guān)于uni-app頁(yè)面Page和組件Component生命周期執(zhí)行的先后順序
這篇文章主要介紹了關(guān)于uni-app頁(yè)面Page和組件Component生命周期執(zhí)行的先后順序,文中提供了具體的代碼,還不清楚的朋友可以來(lái)學(xué)習(xí)一下2023-04-04
JavaScript ES6箭頭函數(shù)是一個(gè)來(lái)自ECMAScript 2015（又稱ES6）的全新特性,有傳聞?wù)f，箭頭函數(shù)的語(yǔ)法=>，是受到了CoffeeScript 的影響，并且它與CoffeeScript中的=>語(yǔ)法一樣，共享this上下文2018-12-12
深入理解JavaScript系列（42）：設(shè)計(jì)模式之原型模式詳解
這篇文章主要介紹了深入理解JavaScript系列（42）：設(shè)計(jì)模式之原型模式詳解,原型模式（prototype）是指用原型實(shí)例指向創(chuàng)建對(duì)象的種類,并且通過(guò)拷貝這些原型創(chuàng)建新的對(duì)象,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了javascript中return的作用，有需要的朋友可以參考一下2013-12-12
javascript 數(shù)組的正態(tài)分布排序的問(wèn)題
這篇文章主要介紹了javascript 數(shù)組的正態(tài)分布排序的問(wèn)題的相關(guān)資料,需要的朋友可以參考下2016-07-07
JS判斷瀏覽器之Navigator對(duì)象...2007-01-01
緩動(dòng)函數(shù)requestAnimationFrame 更好的實(shí)現(xiàn)瀏覽器經(jīng)動(dòng)畫(huà)
requestAnimationFrame是什么?一直是我們大家所疑惑的，緩動(dòng)函數(shù)requestAnimationFrame 更好的實(shí)現(xiàn)瀏覽器經(jīng)動(dòng)畫(huà),接下來(lái)將為大家詳細(xì)介紹2012-12-12
JavaScript 判斷判斷某個(gè)對(duì)象是Object還是一個(gè)Array
在開(kāi)發(fā)中，我們經(jīng)常需要判斷某個(gè)對(duì)象是否為數(shù)組類型，在Js中檢測(cè)對(duì)象類型的常見(jiàn)方法都有哪些呢？2010-01-01
詳解在網(wǎng)頁(yè)上通過(guò)JS實(shí)現(xiàn)文本的語(yǔ)音朗讀
這篇文章主要介紹了在網(wǎng)頁(yè)上通過(guò)JS實(shí)現(xiàn)文本的語(yǔ)音朗讀，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
javascript中神奇的 Date對(duì)象小結(jié)
日常生活中，各種形式的時(shí)間字符到處都是。時(shí)間觀念的產(chǎn)生，時(shí)間單位、計(jì)時(shí)工具的發(fā)明，給人類帶來(lái)的變化實(shí)在一言難盡。今天就來(lái)談?wù)勅掌谀切┦聝骸Ｒ黄饋?lái)看看 JavaScript 中的日期對(duì)象 Date。2017-10-10