posts - 297, 
comments - 1618, 
trackbacks - 0


          
	

          


          

          
	
					


          
	
	
          蜜果私塾：DOM，黑色藝術的終結者（3）
          

          ——使用DOM動態創建HTML內容
          

          文：阿蜜果/2011-11-2
          

          轉載請注明出處
          

          1、 不使用DOM的做法
          

          網頁的結構由HTML文檔負責創建，JavaScript函數只用來改變HTML文檔的某些細節而不改變其底層結構，JavaScript也可以用來改變網頁的結構和內容。
          

          創建HTML內容的“老”技巧是使用document.write()方法和innerHTML屬性。
          

          1.1 使用document.write()方法
          

          document的write()方法可以方便快捷的將字符串插入到文檔中，如下面示例中在網頁上使用該方法顯示“使用write()方法輸出的內容”：
          

          <html>
                        <head>
                            <title>document.write()方法測試</title>
                        </head>
                        <body>
                            <script type="text/javascript">
                      document.write(          "<p>使用write()方法輸出的內容</p>");
                            </script>
                        </body>
          <html>
          

          使用document.write()方法的最大缺點是違背了“分離JavaScript”原則，當然也可以將這一句提供一個公用的JS方法，放在一個獨立的js文件中，例如在example.js中編寫如下js方法：
          

          function insertPara(content) {
              var str = "          <p>" + content + "</p>";
              document.write(str);
          }
          

          將之前的HTML文件修改為如下內容：
          

          <html>
                        <head>
                            <title>document.write()方法測試</title>
                            <script type="text/javascript" src="example.js">
                            </script>
                        </head>
                        <body>
                            <script type="text/javascript">
                      insertPara(          "使用write()方法輸出的內容");
                            </script>
                        </body>
          <html>
          

          但就算這樣做還是沒有解決“分離JavaScript”的問題，需要在<body>元素中插入JS代碼，使用document.write()動態構建HTML內容的缺點如下：
          

          （1）將JavaScript和HTML代碼混雜在一起，使得HTML不容易編輯，也無法享受把行為和結構分離出來的好處；
          

          （2）這樣拼接HTML字符串很容易導致“數據/格式非法”的錯誤；
          

          （3）MIME類型設置為application/xhtml+xml與document.write()方法不兼容，瀏覽器在呈現xhtml文檔時不會執行document.write()方法。
          

          1.2 使用innerHTML屬性
          

                   現在幾乎所有的瀏覽器都支持屬性innerHTML，但這個屬性并不是W3C DOM標準的組成部分，他初見于IE 4瀏覽器，被被其它瀏覽器所接受。
          

                   該屬性可用于讀、寫給定元素的HTML內容，例如使用innerHTML屬性更新id為testdiv元素的HTML內容為：“<p>測試<em>innerHTML</em>屬性</p>”，innerHtmlExample.js文件中的JS代碼如下：
          

          window.onload = function() {
                        var testdiv = document.getElementById("testdiv");
              testdiv.innerHTML           = "<p>測試<em>innerHTML</em>屬性</p>";
          }
          

                對應的HTML的代碼如下所示：
          

          <html>
                        <head>
                            <title>innerHTML測試</title>
                            <script type="text/javascript" src="innerHtmlExample.js">
                            </script>
                        </head>
                        <body>
                            <div id="testdiv">
                            </div>
                        </body>
          <html>
          

                innerHTML屬性比document.write()方法更值得推薦，使用該屬性還可以遵循“分離JavaScript”的原則。在需要將一大段HTML代碼插入一份文檔，使用innerHTML屬性設置既簡單又快速，但是使用該屬性的缺點也很明顯：
          

          （1）不會返回任何可以用來對剛插入的內容進行處理的內容，導致無法對剛插入的內容進行處理，無法提供DOM的眾多操作功能；
          

          （2）只使用于HTML文檔，在瀏覽器呈現xhtml文檔時不會執行該屬性；
          

          （3）是一項專利技術，而不是一項業界標準。
          

          2、 使用DOM動態創建HTML內容
          

          2.1 createElement()方法：創建元素
          

                   該方法用于創建一個元素節點，該方法返回一個Element對象，語法如下：
          

          createElement(name)
          

                其中name屬性是字符串值，用于為元素節點規定名稱。
          

          【提示】如果name參數中含有不合法的字符，該方法將拋出代碼DOMException 異常，代碼為INVALID_CHARACTER_ERR 。
          

               下面語句用于創建一個p元素：
          

          document.createElement(“p”);
          

              該方法常與而后說到的appendChild()和createTextNode()合作使用，這個方法單獨使用是沒有實際用處的，因為它并沒有將創建的元素插入到文檔中。使用該方法將創建出的元素賦予一個變量后，該變量指向剛創建出來的元素的引用指針。這個元素是具有自己的nodeType和nodeName，如下所示：
          

          <html>
                        <head>
                            <title>createElement()方法測試</title>
                            <script type="text/javascript">
                                var para = document.createElement("p");
                      alert(          "nodeName=" + para.nodeName + ", nodeType=" + para.nodeType);
                            </script>
                        </head>
                        <body>
                        </body>
          <html>
          

              測試時，提示框顯示信息為：
          

          nodeName=P, nodeType=1
          

              由此可知此時新節點已經存在，并且從nodeType為1，可看出它是一個元素節點。
          

          2.2 appendChild()方法：追加子節點
          

          該方法指定元素節點的最后一個子節點之后添加節點，該方法返回新的子節點，語法：
          

          parent.appendChild(node)
          

          其中node參數為必填參數，表示要添加的節點。
          

          例如我想將p元素添加到id為testdiv的div元素下去，參考代碼如下：
          

          

          <html>
                        <head>
                            <title>appendChild()測試</title>
                            <script type="text/javascript">
                      window.onload           = function() {
                                    var para = document.createElement("p");
                                    var testdiv = document.getElementById("testdiv");
                          testdiv.appendChild(para);
                      }
                            </script>
                        </head>
                        <body>
                            <div id="testdiv">
                            </div>
                        </body>
          <html>
          

           
          

          2.3 createTextNode()方法：創建文本節點
          

                   在2.2小節中我們創建的是一個空白的p元素，若需要為p元素設置文本，需要使用createTextNode()方法創建一個文本節點。該方法的語法與createElement()方法類似：
          

          document.createTextNode(text)
          

                  該方法返回Text對象，其中text參數為字符串值，可規定次節點的文本。例如創建“你好”的文本節點，語句如下：
          

          document.createTextNode(“你好”);
          

                  可以將該方法返回的值賦給一個變量，那么這個變量將指向那個文本節點的引用指針。與createElement()方法相似，該方法也只是負責創建新的節點，但并不會加入到文檔中，需要使用appendChild()等方法加入。
          

                   改造2.2小節中實例，給p元素加上“你好”的文本，代碼參考如下：
          

          <html>
                        <head>
                            <title>appendChild()測試</title>
                            <script type="text/javascript">
                      window.onload           = function() {
                                    var para = document.createElement("p");
                                    var txt = document.createTextNode("你好");
                                    var testdiv = document.getElementById("testdiv");
                          para.appendChild(txt);
                          testdiv.appendChild(para);
                      }
                            </script>
                        </head>
                        <body>
                            <div id="testdiv">
                            </div>
                        </body>
          <html>
          

              【提示】因為變量里存儲的是引用指針，所以將上述代碼的兩句appendChild對換一下，也不會影響頁面的顯示。
          

          2.4 insertBefore()方法：添加新節點到現有元素前
          

              該方法可在已有的子節點插入一個新的子節點，它返回新的子節點。語法如下：
          

          parentElement.inertBefore(newChild, refChild)
          

                其中：
          

          （1）parentElement：這兩個參數中指定的元素的父元素；
          

          （2）newChild參數：表示插入新的節點；
          

          （3）refChild參數：表示在此節點前插入新節點。
          

          在如下實例中，首先在id為testdiv的div元素內添加p元素，并設置其文本節點為“你好”，接著將另一個文本子節點為“Amigo,”的p元素添加到它的前面，參考代碼如下：
          

          <html>
                        <head>
                            <title>insertBefore()測試</title>
                            <script type="text/javascript">
                      window.onload           = function() {
                                    var para1 = document.createElement("p");
                                    var para2 = document.createElement("p");
                                    var txt1 = document.createTextNode("你好");
                                    var txt2 = document.createTextNode("Amigo,");
                                    var testdiv = document.getElementById("testdiv");
                          para1.appendChild(txt1);
                          para2.appendChild(txt2);
                          testdiv.appendChild(para1);
                         testdiv.insertBefore(para2, para1);
                      }
                            </script>
                        </head>
                        <body>
                            <div id="testdiv">
                            </div>
                        </body>
          <html>
          

          測試頁面顯示為：
          

          Amigo,
          你好
          

           
          

          

          3、 參考文檔
          

          （1）《XML DOM createElement()方法》
          

          http://www.w3school.com.cn/xmldom/met_document_createelement.asp
          

          （2）《XML DOM appendChild()方法》
          

          http://www.w3school.com.cn/xmldom/met_element_appendchild.asp
          

          （3）《XML DOM createTextNode()方法》
          

          http://www.w3school.com.cn/xmldom/met_document_createtextnode.asp
          

          （4）《JavaScript DOM編程藝術》 [英] Jeremy Keith 著，楊濤、王曉云等譯，人民郵電出版社出版
          

           
          

           
          
	
          posted on 2011-11-02 11:04 阿蜜果 閱讀(2065) 評論(3)  編輯  收藏  所屬分類: Javascript 
          

          







          
	    
    


          



          

          FeedBack:
          

          


		
          
			
          # re: 蜜果私塾：DOM，黑色藝術的終結者（3）
          
			
          
				2011-11-04 08:25 | tbw
          
				
          寫得很不錯   回復  更多評論
            
          
			
          		
			
		
          
	
		
          
			
          # re: 蜜果私塾：DOM，黑色藝術的終結者（3）[未登錄]
          
			
          
				2011-11-06 16:53 | alex
          
				
          （3）refChild參數：表示在此節點錢插入新節點。

          完美主義者 呵呵

          （3）refChild參數：表示在此節點（前）插入新節點。  回復  更多評論
            
          
			
          		
			
		
          
	
		
          
			
          # re: 蜜果私塾：DOM，黑色藝術的終結者（3）
          
			
          
				2011-11-06 17:46 | 阿蜜果
          
				
          @alex

          謝謝，看到很仔細，呵呵，已更正錯別字。  回復  更多評論
            
          
			
          		
			
		
          
	








          








          

				
	

          


          
	
		
          
			
          
	
          
		
          <2011年11月>
          
	
          日一二三四五六
          303112345
          6789101112
          13141516171819
          20212223242526
          27282930123
          45678910
          

          

          
			


          
	      生活將我們磨圓，是為了讓我們滾得更遠——“圓”來如此。
                我的作品：
                玩轉Axure RP  （2015年12月出版）
                

                Power Designer系統分析與建模實戰  （2015年7月出版）
                
               Struts2+Hibernate3+Spring2   （2010年5月出版）
                         

          

			

          留言簿(263)
          




		
          隨筆分類
          
		
				
			
	
		
          隨筆檔案
          
		
				
			
	
		
          文章分類
          
		
				
			
	
		
          相冊
          
		
				
			
	
		
          關注blog
          
		
				
			
	



          積分與排名
          

            
	
          • 
		積分 -
		2296322
	
          • 
		排名 -
		3
	
            • 

          


          最新評論
	
          

          
	
			
		

          


          閱讀排行榜
          



          評論排行榜
          


          
	

          

          

          


    







          
        
	




主站蜘蛛池模板：
昌黎县|
和顺县|
江孜县|
陈巴尔虎旗|
海晏县|
池州市|
德阳市|
冀州市|
深水埗区|
溧水县|
平阴县|
临清市|
百色市|
利津县|
洪湖市|
南阳市|
沂源县|
临汾市|
贵德县|
个旧市|
武城县|
芜湖县|
定边县|
宜昌市|
清河县|
盐津县|
武陟县|
潞城市|
焦作市|
平罗县|
临沭县|
南投市|
繁峙县|
普定县|
都安|
广平县|
原平市|
山西省|
灌云县|
巴彦淖尔市|
江油市|