JavaScript 高級篇之DOM文檔,簡單封裝及調用、動態(tài)添加、刪除樣式（六）

更新時間：2012年04月07日 02:20:09 作者：

學習是有趣的,但有過濾的學習內容就更好,本博主就專門為剛接觸javascript客戶端編程的朋友提供及分享個人學習經歷!建議大家看看：(湯姆大叔的博客)

http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html , 在回來看這里文章,你一定會有更深刻的認識。因為我在這里介紹概念上的東西比較少,看下面的例子,對初學的朋友可能會有些吃力!

1、DOM的架構

復制代碼代碼如下:

 
<html> 
<head> 
<title>document</title> 
</head> 
<body> 
<h1>CSS Demo</h1> 
<p>我喜歡美女,特別是高個的美女</p> 
</body> 
</html> 

這個文檔的DOM表示如下圖：

圖片表示一個HTML文檔的樹.

所有DOM樹結構表現(xiàn)為不同種類的Node對象的一個數,firstChild,lastChild,nextSibling,previousSibling和ParentNode屬性提供遍歷節(jié)點的樹的一種辦法,appendChild,removeChild,replaceChildh和insertBefore這樣的方法可以像文檔中添加節(jié)點或者從文檔中刪除節(jié)點。不明白沒關系接下來我將用大量的例子讓你明白。

1、先創(chuàng)建一個使用CSS美化的列表

復制代碼代碼如下:

 
<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、加一個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)在應該看到如下圖：

4、根據上圖獲取元素總數

復制代碼代碼如下:

 
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))">獲取元素個數</button>
5、將文本全部大寫

復制代碼代碼如下:

 
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)">大寫</button>

效果：

6、給列表排序

復制代碼代碼如下:

 
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>

效果：

7、動態(tài)插入列表項（子節(jié)點)

復制代碼代碼如下:

 
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>

效果：

8、使用javascript類動態(tài)創(chuàng)建文檔
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>
效果：（隱藏看到什么了)

9、動態(tài)添加樣式和刪除樣式

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、工具函數（動態(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');">動態(tài)添加樣式</button> 
<button type="button" name ="remove" onclick ="CSSclass.remove('con','container');">動態(tài)刪除樣式</button> 

效果：

沒添加樣式的樣子

加了樣式之后。

小結：Dom文檔操作、內聯(lián)樣式、動態(tài)設置樣式等就給大家分享到這里吧！其實還有很多細節(jié)沒給大家呈現(xiàn)。下一篇我將分享我學習事件的歷程。

（很多沒有備注，大家有問題可以給我留言!)

您可能感興趣的文章:

總結JavaScript在IE9之前版本中內存泄露問題
本篇文章給大家總結了JavaScript在IE9之前版本中內存泄露問題，對此有興趣的朋友可以學習下。
2018-04-04
javascript中call apply 與 bind方法詳解
網上文章雖多，大多復制粘貼，且晦澀難懂，我希望能夠通過這篇文章，能夠清晰的提升對apply、call、bind的認識，并通過一些具體的示例給大家展示下這3個方法的用法，希望大家能夠喜歡。
2016-03-03
JavaScript基礎之對象
這篇文章主要介紹了如何理解JavaScript中的對象，幫助大家更好的學習JavaScript，感興趣的朋友可以了解下
2021-11-11
深入理解JavaScript 箭頭函數
ES6標準新增了一種新的函數：Arrow Function（箭頭函數）。為什么叫Arrow Function？因為它的定義用的就是一個箭頭。下面我們來一起學習一下吧
2019-05-05
JavaScript中的Document文檔對象
2008-01-01
Three.js源碼閱讀筆記(基礎的核心Core對象)
Three.js是一個比較偉大的webgl開源庫，它簡化了瀏覽器3D編程，使得使用JavaScript在瀏覽器中創(chuàng)建復雜的場景變得容易很多接下來先從最基礎的核心（Core）對象開始,感興趣的朋友可以參考下
2012-12-12
JavaScript While 循環(huán)基礎教程
只要指定條件為 true，循環(huán)就可以一直執(zhí)行代碼，
2007-04-04
詳解Javascript基礎之循環(huán)
這篇文章主要為大家介紹了Javascript基礎之循環(huán)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12
a標簽的href和onclick 的事件的區(qū)別介紹
a標簽的href與onclick事件，想必大家不陌生吧，至于它們有什么區(qū)別，你知道嗎？下面就為大家介紹下，感興趣的朋友可以學習下，希望對大家有所幫助
2013-07-07
JavaScript DOM 學習第三章內容表格
在這一章我會解釋我的網站上的所有頁面都在運行的內容表格的代碼。他會生產這個頁面的所有h3和h4的列表，然后給他們添加一個鏈接。
2010-02-02