Javascript中DOM技術的的簡單學習

本文轉載自查看原文 2016-08-13 15:58 2390 Javascript

第十四課
DOM技術概述
1：DOM概述

　 文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標准方法。DOM 將HTML文檔呈現為帶有元素、屬性和文本的樹結構（節點樹）。
   DOM是一種與瀏覽器，平台及語言無關的接口，能夠以編程方式
   訪問和操作文檔
   1、DOM是Document Object Model(文檔對象模型)的簡稱
   2、提供了訪問，操作該模型的API

2:DOM的分層結構
   在DOM中，文檔的層次結構被表示為樹形結構。樹是倒立的，樹根在上
   樹葉在下面，樹的節點表示文檔的內容

   子節點：   在樹形結構中，直接位於一個節點之下的節點被稱為該節點的子節點
   父節點：   直接位於一個節點之上的節點被稱為該節點的父節點
   兄弟節點：具有相同父節點的節點是兄弟節點
   后代：     一個節點的下一個層次的節點集合石該節點的后代
   祖先：     一個節點的父節點，祖先節點以及其他所有位於它之上的節點都是該節點的祖先

3：HTML文檔可以說由節點構成的集合，三種常見的DOM節點:

　　　3.1. 元素節點：上圖中<html>、<body>、<p>等都是元素節點，即標簽。

　　　3.2. 文本節點:向用戶展示的內容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

　　　3.3. 屬性節點:元素屬性，如<a>標簽的鏈接屬性href="http://www.imooc.com"。

案例代碼如下

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <title>初識DOM</title>
 5 
 6 </head>
 7 <body>
 8     <p id="p1">我的第一段文字</p>
 9     
10     <p id="p2">我的第二段文字</p>
11     <script language="javascript">
12         document.write("hello");
13         document.getElementById("p1").style.color="blue";
14         document.getElementById("p2").style.color="red";
15     </script>
16 </body>
17 </html>

案例運行結果如下

1：通過ID獲取元素 document.getElementById();的用法

學過HTML/CSS樣式，都知道，網頁由標簽將信息組織起來，而標簽的id屬性值是唯一的，就像是每人有一個身份證號一樣，只要通過身份證號就可以找到相對應的人。那么在網頁中，我們通過id先找到標簽，然后進行操作。

案例1源碼如下

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <title>初識DOM</title>
 5         
 6 </head>
 7 <body>
 8     
 9     <p id="p1">鋤禾日當午，汗滴禾下土</p>    
10         <script language="javascript">
11             var v=document.getElementById("p1");
12             document.write(v);
13         </script>
14 </body>
15 </html>

案例1運行結果如下

2：innerHTML 屬性

語法 Object.innerHTML

innerHTML 屬性用於獲取或替換 HTML 元素的內容。

注意:

1.Object是獲取的元素對象，如通過document.getElementById("ID")獲取的元素。

2.注意書寫，innerHTML區分大小寫。

案例如下（獲取元素）

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <title>初識DOM</title>
 5         
 6 </head>
 7 <body>
 8     
 9     <p id="p1">鋤禾日當午，汗滴禾下土</p>    
10         <script language="javascript">
11             var v=document.getElementById("p1").innerHTML;
12             document.write(v);
13         </script>
14 </body>
15 </html>

案例代碼運行如下

案例2源碼如下（替換元素）

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <title>初識DOM</title>
 5         
 6 </head>
 7 <body>
 8     
 9     <p id="p1">鋤禾日當午，汗滴禾下土</p>    
10         <script language="javascript">
11             var v=document.getElementById("p1");
12             document.write("原始的元素:"+v.innerHTML+"<br/>");
13             v.innerHTML="窗前明月光，疑似地上霜";
14             document.write("替換后的元素:"+v.innerHTML+"<br/>");
15         </script>
16 </body>
17 </html>

案例2運行如下

3：改變 HTML 樣式

HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。如何改變 HTML 元素的樣式呢？

語法:

Object.style.property=new style;

注意:Object是獲取的元素對象，如通過document.getElementById("id")獲取的元素。

基本屬性表（property）:

案例代碼如下

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <title>初識DOM</title>
 5         
 6 </head>
 7 <body>
 8     
 9     <p id="p1">鋤禾日當午，汗滴禾下土</p>    
10         <script language="javascript">
11             var v=document.getElementById("p1");
12             v.style.color="blue";
13             v.style.fontFamily="楷體";
14             v.style.fontSize=50;
15             v.style.backgroundColor="red";
16         </script>
17 </body>
18 </html>

案例運行如下

4：顯示和隱藏（display屬性）

網頁中經常會看到顯示和隱藏的效果，可通過display屬性來設置。

語法：

Object.style.display = value

注意:Object是獲取的元素對象，如通過document.getElementById("id")獲取的元素。

value的取值

案例代碼如下

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <title>初識DOM</title>
 5         <script language="javascript">
 6             function dis1(){
 7                 document.getElementById("p1").style.display="block";
 8             }
 9             function dis2(){
10                 document.getElementById("p1").style.display="none";
11             }
12             
13         </script>
14 </head>
15 <body>
16     <p>顯示和隱藏功能</p>
17     <p id="p1">鋤禾日當午，汗滴禾下土,誰知盤中餐，粒粒皆辛苦</p>    
18     <from>
19         <input type="button" value="顯示內容" onclick="dis1()">
20         <input type="button" value="隱藏內容" onclick="dis2()">
21     </from>
22 </body>
23 </html>

案例運行結果如下

5:控制類名（className 屬性）

className 屬性設置或返回元素的class 屬性。

語法：

object.className = classname

作用:

1.獲取元素的class 屬性

2. 為網頁內的某個元素指定一個css樣式來更改該元素的外觀

案例代碼如下

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 4 <title>初識DOM</title>
 5     <style type="text/css">
 6         .one{
 7             border:1px solid red;
 8             width:300px;
 9             height:100px;
10             background:blue;
11             color:green;
12         }
13         .two{
14             border:2px solid blink;
15             width:300px;
16             height:100px;
17             background:green;
18             color:blue;
19         }
20     </style>
21 </head>
22     <p id="p1" class="one">JavaScript使網頁顯示動態效果並實現與用戶交互功能。</p>    
23 
24     <form>
25         <input type="button" value="更改樣式" onclick="modify()"/>
26     </form>
27     
28     <p id="p2">JavaScript使網頁顯示動態效果並實現與用戶交互功能。</p>
29     
30     <form>
31         <input type="button" value="添加樣式" onclick="add()"/>
32     </form>
33     <script language="javascript">
34     function modify(){
35         var v1=document.getElementById("p1");
36         v1.className="two";
37     }
38     function add(){
39         var v2=document.getElementById("p2");
40         v2.className="two";
41     }
42     </script>
43 </html>

案例運行結果如下

綜合練習源碼如下

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
 5 <title>javascript</title>
 6     
 7     <style type="text/css">
 8         body{font-size:12px;}
 9         #txt{
10             height:400px;
11             width:600px;
12             border:#333 solid 1px;
13             padding:5px;}
14         p{
15             line-height:18px;
16             text-indent:2em;}
17     </style>
18 </head>
19 <body>
20   <h2 id="con">JavaScript課程</H2>
21   
22   <div id="txt"> 
23         <h5>JavaScript為網頁添加動態效果並實現與用戶交互的功能。</h5>
24         <p>1. JavaScript入門篇，讓不懂JS的你，快速了解JS。</p>
25         <p>2. JavaScript進階篇，讓你掌握JS的基礎語法、函數、數組、事件、內置對象、BOM瀏覽器、DOM操作。</p>
26         <p>3. 學完以上兩門基礎課后，在深入學習JavaScript的變量作用域、事件、對象、運動、cookie、正則表達式、ajax等課程。</p>
27   </div>
28  
29  <form>
30   <!--當點擊相應按鈕，執行相應操作，為按鈕添加相應事件-->
31     <input type="button" value="改變顏色" onclick="changeColor()">  
32     <input type="button" value="改變寬高" onclick="changeHeight()">
33     <input type="button" value="隱藏內容" onclick="changeNone()">
34     <input type="button" value="顯示內容" onclick="changeDisplay()">
35     <input type="button" value="取消設置" onclick="changeStart()">
36   </form>
37   
38   <script type="text/javascript">
39     //定義"改變顏色"的函數
40     function changeColor()
41     {
42         var mychar=document.getElementById("txt");
43         mychar.style.color="red";
44     }
45 
46     //定義"改變寬高"的函數
47      function changeHeight()
48     {
49         var mychar=document.getElementById("txt");
50         mychar.style.height="150px";
51     }
52 
53     //定義"隱藏內容"的函數
54      function changeNone()
55     {
56         var mychar=document.getElementById("txt");
57         mychar.style.display="none";
58     }
59 
60     //定義"顯示內容"的函數
61       function changeDisplay()
62     {
63         var mychar=document.getElementById("txt");
64         mychar.style.display="block";
65     }
66 
67     //定義"取消設置"的函數
68     function changeStart()
69     {
70         var start=confirm("你是否取消設置?");
71         if(start==true){
72             var start=document.getElementById("txt");
73             start.style.color="";
74             start.style.width="600px";
75             start.style.height="400px";
76             start.style.background="";
77         }else{
78             alert("你沒有取消設置");
79         }
80     }
81     
82 
83   </script>
84 </body>
85 </html>

綜合練習運行結果如下

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 《JavaScript DOM編程藝術》學習整理 JavaScript 的簡單學習2 JavaScript中DOM的概念及作用 javascript中獲取dom元素高度和寬度 jQuery學習筆記(二)jQuery中DOM操作 Javascript | DOM\DOM樹淺析 JavaScript中DOM操作之設定標簽屬性 javascript中獲取dom元素高度和寬度的方法 javascript中DOM獲取和設置元素的內容、樣式及效果 javaScript知識體系（中）- DOM、BOM、其它內置對象-總結