首頁 > 開發者 > JavaScript
等待頁面所有內容載入完畢後，通過getElementsByTagName()方法擷取頁面中的li元素，然後迴圈改變li元素顏色為紅色。 再看第二個DOM例子，例子將把第二個li元素從頁面中刪除。<html>
<head>
<title>demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
/*
樣本操作DOM元素
*/
window.onload = function(){
//給Dom元素添加顏色
var li = document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].style.color = "red";
}
}
</script>
</head>
<body>
<ul>
<li>李老師-英語</li>
<li>張老師-數學</li>
<li>劉老師-物理</li>
</ul>
</body>
</html>
現擷取到li元素的父節點ul元素，然後使用removeChild() 方法刪除ul元素下 指定的li元素。 當然也可以直接使用 parentNode來直接擷取li元素的父節點。代碼如下：<html>
<head>
<title>demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
/*
樣本操作DOM元素
*/
window.onload = function(){
//給Dom元素添加顏色
var li = document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].style.color = "red";
}//刪除第二個li元素
var ul = document.getElementsByTagName("ul")[0]; //索引從0開始
ul.removeChild( li[1] ); //索引從0開始
}
</script>
</head>
<body>
<ul>
<li>李老師-英語</li>
<li>張老師-數學</li>
<li>劉老師-物理</li>
</ul>
</body>
</html>
2，事件 事件是黏合應用程式中所有使用者互動的膠水。DOM和事件的是JavaScript中的黃金搭檔（呵呵，來句廣告詞），它們決定著現代Web應用程式形態的根本所在。 看下面的例子：window.onload = function(){
//給Dom元素添加顏色
var li = document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].style.color = "red";
}//刪除第二個li元素
//var ul = document.getElementsByTagName("ul")[0]; //索引從0開始
//ul.removeChild( li[1] ); //索引從0開始
li[1].parentNode.removeChild( li[1] ); //索引從0開始，直接使用parentNode來擷取li元素的父節點
}
本例中，擷取的li元素後，然後迴圈給元素添加事件，添加了onmouseover和onmouseout事件。當滑入時，改變顏色，滑出時，恢複顏色。 事件是複雜多變的，上例是一個最簡單的例子，所以基本上沒遇到問題。在以後，我們將遇到 比如 事件冒泡，事件傳遞 ，取消事件等問題。 3，DOM和事件 在DOM和事件互動的基礎上產生了DHTML，它的實質就是JavaScript事件和DOM元素上CSS屬性之間的互動。DHTML存在的意思就是組合這兩個技術，然後做它的事情。 二，簡單的物件導向開發 我們先來感受一下JavaScript物件導向是怎麼一個寫法。下面代碼展示了學校中的課程名和老師的資訊。<html>
<head>
<title>demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
/*
樣本操作DOM元素
*/
window.onload = function(){
//給Dom元素添加顏色
var li = document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].style.color = "red";
li[i].onmouseover = function(){
this.style.color = "blue";
}
li[i].onmouseout = function(){
this.style.color = "red";
}
}
}
</script>
</head>
<body>
<ul>
<li>李老師-英語</li>
<li>張老師-數學</li>
<li>劉老師-物理</li>
</ul>
</body>
</html>
最終結果會輸出“李老師 是教 英語 的。” 在此例子的基礎上，我們再定義個函數，用來輸出所有的課程資訊。代碼如下所示：<script type="text/javascript">
/*
樣本用一個對象組合表示學校中的課程
‘Lecture’類
用name和teacher作為參數
*/
function Lecture(name,teacher){
this.name=name;
this.teacher=teacher;
}
//‘Lecture’類的一個方法，用於產生一條資訊
Lecture.prototype.display=function(){
return this.name + " 是教 "+this.teacher +" 的。" ;
}
//下面用new來構造一個新的函數，然後調用display方法
var L = new Lecture("李老師","英語");
var L_msg = L.display();
alert(L_msg);
</script>
<script type="text/javascript">
/*
樣本用一個對象組合表示學校中的課程
‘Lecture’類
用name和teacher作為參數
*/
function Lecture(name,teacher){
this.name=name;
this.teacher=teacher;
}
//‘Lecture’類的一個方法，用於產生一條資訊
Lecture.prototype.display=function(){
return this.name + " 是教 "+this.teacher +" 的。" ;
}
//下面用new來構造一個新的函數，然後調用display方法
var L = new Lecture("李老師","英語");
var L_msg = L.display();
//alert(L_msg);//新定義一個'AllLecture'類
//用'lec'作為參數，lec是一個數組
function AllLecture( lec ){
this.lec = lec;
}
//‘AllLecture’類的一個方法，用於產生所有的課程資訊
//需要迴圈輸出‘lec’
AllLecture.prototype.display=function(){
var str = "";
for(var i=0;i<this.lec.length;i++){
str += this.lec[i] + "\n";
}
return str;
}
//下面使用new來夠造一個新的函數，用於產生所有的資訊
//函數的參數是數組。
//使用'Lecture'類來產生數組的值。
var B = new AllLecture( [ new Lecture("李老師","英語").display() , new Lecture("張老師","數學").display() , new Lecture("劉老師","物理").display() ] );
var B_str = B.display();
alert(B_str);
</script>
最終結果會輸出：
本例中， 數組的值都調用了 display()方法。
改進如下：
在
AllLecture.prototype.display=function(){
var str = "";
for(var i=0;i<this.lec.length;i++){
str += this.lec[i] + "\n";
}
return str;
}
中的this.lec[i] 處，統一調用display()方法。然後去掉數組的值調用display()。修改後的代碼如下：
<script type="text/javascript">
/*
樣本用一個對象組合表示學校中的課程
‘Lecture’類
用name和teacher作為參數
*/
function Lecture(name,teacher){
this.name=name;
this.teacher=teacher;
}
//‘Lecture’類的一個方法，用於產生一條資訊
Lecture.prototype.display=function(){
return this.name + " 是教 "+this.teacher +" 的。" ;
}
//下面用new來構造一個新的函數，然後調用display方法
var L = new Lecture("李老師","英語");
var L_msg = L.display();
//alert(L_msg);//新定義一個'AllLecture'類
//用'lec'作為參數，lec是一個數組
function AllLecture( lec ){
this.lec = lec;
}
//‘AllLecture’類的一個方法，用於產生所有的課程資訊
//需要迴圈輸出‘lec’
AllLecture.prototype.display=function(){
var str = "";
for(var i=0;i<this.lec.length;i++){
//str += this.lec[i] + "\n";
str += this.lec[i].display() + "\n"; //把display()放到這裡調用
}
return str;
}
//下面使用new來夠造一個新的函數，用於產生所有的資訊
//函數的參數是數組。
//使用'Lecture'類來產生數組的值。
//var B = new AllLecture( [ new Lecture("李老師","英語").display() , new Lecture("張老師","數學").display() , new Lecture("劉老師","物理").display() ] );
var B = new AllLecture( [ new Lecture("李老師","英語") , new Lecture("張老師","數學") , new Lecture("劉老師","物理") ] );
var B_str = B.display();
alert(B_str);
</script>
同樣也可以輸出跟上例一樣的結果。
這是一個簡單的物件導向開發的例子，隨著JavaScript逐漸被程式員所接受，設計良好的物件導向代碼也日益普及。在後面的筆記中，你將會看到更多的物件導向程式碼。 三，小結Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
