005_01文檔對象模型DOM

時間  2019-11-16
標籤 文檔 對象 模型 dom 欄目 HTML 简体版
原文   原文鏈接

　　DOM:document object model  文檔對象模型。是W3C織制訂的一套用於訪問XML和HTML文檔的標準。容許腳本動態地訪問和更新文檔的內容、結構和樣式。html

　　W3C DOM 標準被分爲 3 個不一樣的部分：node

　　　　核心 DOM - 針對任何結構化文檔的標準模型app

　　　　XML DOM - 針對 XML 文檔的標準模型this

　　　　HTML DOM - 針對 HTML 文檔的標準模型spa

　　

　　左邊爲HTML文檔樹，右邊爲結構樹示意圖3d

　　　　　　

 

　　XML DOM 定義了訪問和處理 XML 文檔的標準方法。　code

　　HTML文檔格式 符合XML語法標準，因此可使用XML DOM APIhtm

　　在XML DOM每一個元素 都會被解析爲一個節點Node，而經常使用的節點類型又分爲：對象

　　　　元素節點 Elementblog

　　　　屬性節點 Attr

　　　　文本節點 Text

　　　　文檔節點 Document

　　HTML DOM定義了針對HTML文檔的對象，能夠說是一套更加適用於JavaScript 技術開發 的API

　　HTML DOM是對XML DOM的擴展

　　進行 JavaScript DOM開發，能夠同時使用XML DOM和HTML DOM

 

　　Node接口的特性和方法：

 

　　Document對象經常使用方法：

　  　　 getElementById()返回對擁有指定 id 的第一個對象的引用

　　　　getElementsByName()返回帶有指定名稱的對象集合

　　　　getElementsByTagName()返回帶有指定標籤名的對象集合

　　DOM 節點經常使用屬性：

　　　　nodeName

　　　　　　若是節點是元素節點，nodeName返回這個元素的名稱

　　　　　　若是是屬性節點，nodeName返回這個屬性的名稱

　　　　　　若是是文本節點，nodeName返回一個內容爲#text 的字符串

　　　　nodeType

　　　　　　Node.ELEMENT_NODE  --1 -- 元素節點

　　　　　　Node.ATTRIBUTE_NODE  --2 -- 屬性節點

　　　　　　Node.TEXT_NODE  --3 -- 文本節點

　　　　nodeValue

　　　　　　若是給定節點是一個屬性節點，返回值是這個屬性的值

　　　　　　若是給定節點是一個文本節點，返回值是這個文本節點內容

　　　　　　若是給定節點是一個元素節點，返回值是 null

　　DOM節點常見操做：

　　　　DOM 獲取節點

　　　　DOM 改變節點

　　　　DOM 刪除節點

　　　　DOM 替換節點

　　　　DOM 建立節點

　　　　DOM 添加節點

 

實例1:打印ul裏面的li子節點信息

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>打印ul裏面的li子節點信息</title>
10 
11   <script>
12       function getLi(){
13         var bjNode= document.getElementById("bj");
14         var childnum = bjNode.childNodes.length;
15         for(var i=0;i<childnum ;i++)
16           alert( bjNode.childNodes[i].nodeName+","+bjNode.childNodes[i].nodeType+","+
17                  bjNode.childNodes[i].nodeValue  );
18                  //#text  3  北京
19                  //h1 1 
20                  //#text  3  水立方
21       }
22   </script>
23  </head>
24  <body>
25    <ul>
26         <li id="bj" value="beijing">
27             北京
28             <h1>海淀</h1>
29             水立方
30         </li>
31         <li id="sh" value="shanghai">
32             上海
33         </li>
34         <br/>
35         <input type="button" value="li取值" onclick="getLi()"/>
36     </ul>
37  </body>
38 </html>

運行代碼，點擊「li取值」，得以下結果：

　　　　

 

實例2:替換節點

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>替換節點</title>
10   <script>
11          function changeNode(){
12            //1.找到父親節點
13             var bjNode   =   document.getElementById("bj")
14            //3.找到game節點
15             var gameNode =    document.getElementById("game")
16             var newnode  =    gameNode.cloneNode(true); 
17            //4.替換節點
18              bjNode.removeChild(bjNode.lastChild);  
19              bjNode.appendChild(newnode.firstChild); 
20              bjNode.appendChild(newnode.lastChild); 
21          }
22   </script>
23  </head>
24  <body>
25     <ul >
26         <li id="bj" onclick="changeNode()">北京</li>
27         <li>湖南</li>
28         <li>山東</li>
29     </ul>
30     <ul>
31         <li  id="game">打<p>灰機</p></li>
32         <li>抓泥鰍</li>
33         <li>鬥地主</li>
34     </ul>
35  </body>
36 </html>

初始界面效果及點擊文本」北京「後：

　　　　　　　　　

至於爲何屢次點擊以後，文本」打「出現屢次而文本」灰機「仍然只出現一次，是由於替換節點過程當中每次都刪掉lastChild，代碼中黃色標註。

 

實例3:增長option菜單

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>Document</title>
10   <script>
11      function addOptions(){
12          //思路        
13 //         //1.找到select節點
14 //        var select =     document.getElementsByTagName("select")[0]
15 //        //2.新建一個節點 
16 //        var newoption  = document.createElement("option");
17 //        var newoptionText = document.createTextNode("小學");
18 //         //3.插入到select節點的子節點
19 //        select.appendChild(newoption);
20 //        newoption.appendChild(newoptionText);
21        var select =  document.getElementsByTagName("select")[0];
22        select.add(new Option("小學","小學"), null);
23      }
24   </script>
25  </head>
26  <body>  
27   <input type="button" value="添加選項" onclick="addOptions()"/>
28     <select>
29         <option>本科</option>
30         <option>專科</option>
31         <option>高中</option>
32         <option>初中</option>
33     </select>
34  </body>
35 </html>

界面初始化和點擊」添加選項「以後效果：

　　

 

實例4:全選或者反選

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>Document</title>
10   <script>
11     function checkAll( booleanValue )
12     {
13         //找到全部的check box
14         //根據傳入的參數，修改其屬性值
15         var checkboxset= document.getElementsByName("hobby");
16         for(var i =0;i<checkboxset.length; i++ )
17         {
18             checkboxset[i].checked = booleanValue;    
19         }
20     }
21 
22     function reverseCheck(){     
23          //找到全部的checkbox
24          //針對每個checkbox，判斷其當前的checked屬性，而且置反
25         var checkboxset= document.getElementsByName("hobby");
26         for(var i =0;i<checkboxset.length; i++ )
27         {
28             checkboxset[i].checked = !checkboxset[i].checked;               
29         }
30     }
31  </head>
32  <body> 
33   <h1>請選擇你的愛好：</h1>
34   全選/全不選<input type="checkbox" name="hobbys" onclick="checkAll(this.checked)" /><br/>
35 
36   <input type="checkbox" name="hobby" value="football" onclick=""/>足球
37   <input type="checkbox" name="hobby" value="basketball" onclick=""/>籃球
38   <input type="checkbox" name="hobby" value="swim" onclick=""/>游泳
39   <input type="checkbox" name="hobby" value="singing" onclick=""/>唱歌<br/>
40 
41   <input type="button" value="全選" onclick="checkAll(true)"/> <input type="button" value="全不選" onclick="checkAll(false)"/>
42   <input type="button" value="反選" onclick="reverseCheck()"/> </body>
43 
44  </body>
45 </html>

界面效果圖：

實例5:選項的左右移動

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>Document</title>
10 
11   <script>
12     function removeLeft(){
13          //找到當前選中的option
14          var lefeSelect = document.getElementById("left");
15          var selectedIndex = lefeSelect.selectedIndex;
16          var selectedOption =    lefeSelect.options[selectedIndex];
17 
18          //找到右邊的select
19          var rightSelect = document.getElementById("right");
20          rightSelect.add(selectedOption,null);
21     }
22 
23     function removeLeftAll(){
24          //left的全部option，都移動right
25           var lefeSelect = document.getElementById("left");
26 
27          //找到右邊的select
28          var rightSelect = document.getElementById("right");
29           var length =lefeSelect.options.length;
30 
31           for(var i=0;i<length;i++){
32                rightSelect.add(lefeSelect.options[0]);          
33           } 
34     }
35   </script>
36  </head>
37  <body>
38   
39   <table align="center">
40         <tr>
41             <td>
42                 <select size="10" id="left">
43                     <option>選項1</option>
44                     <option>選項2</option>
45                     <option>選項3</option>
46                     <option>選項4</option>
47                     <option>選項5</option>
48                     <option>選項6</option>
49                     <option>選項7</option>
50                     <option>選項8</option>
51 
52                 </select>
53             </td>
54             <td>
55                 <input type="button" value="--->" onclick="removeLeft()"/><br/>
56                 <input type="button" value="===>" onclick="removeLeftAll()"/><br/>
57                 <input type="button" value="<---" onclick=""/><br/>
58                 <input type="button" value="<===" onclick=""/><br/>
59             </td>
60             <td>
61                 <select size="10" id="right">
62                     <option>選項9</option>
63                 </select>
64             </td>
65         </tr>
66     </table>
67 
68  </body>
69 </html>

界面初始化效果及操做：

　　　　

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程