javascript dom編程藝術學習筆記之動態建立標記

---

[TOC]

---

1.傳統方法

1.1document.write

document對象的write方法能夠方便便捷地把字符串插入文檔 最大的缺點是違背了「行爲與表現分離」的原則 容易致使驗證錯誤 避免使用document.write方法

1.2 innerHTML屬性方法

如今包含到HTML5規範中，innerHTML毫無細節而言 DOM像手術刀，innerHTML像大錘 須要把一大段HTML內容插入網頁，innerHTML屬性更加使用。支持讀取和寫入 innerHTML屬性比document.write更加值得推薦，它是HTML的專有屬性，沒法用於其餘任何標記語言

2. DOM方法

動態方法建立標記：你不是在建立標記，而是在改變節點樹

2.1 creatElemlent方法

語法以下

document.creatElement(nodeName)

建立的元素已經存在，只是否是任何DOM節點樹的組成部分，遊蕩在javascript世界的孤兒，稱之爲文檔碎片

2.2 appendChild方法

讓建立的元素成爲父節點的子節點 語法以下

parent.appendChild(child)

例

var para = document.creatElement("p");
var testdiv = getElementById("testdiv");
testdiv.appendChild(para);

等同於以下代碼

document.getElementById("testdiv").appendChild(document.creatElement("p"));

2.3 creatTextNode方法

語法以下

document.creatTextNode(text);

例

window.onload = function(){
	var para = document.creatElement("p");
	var txt = document.creatTextNode("Hello world");
	para.appendChild(txt);
	var testdiv = getElementById("testdiv");
	testdiv.appendChild(para);
}

2.4更復雜的組合

3. 動態建立HTML內容

有一個圖片和一段文字僅僅是爲了showPic腳本服務的。既然這些元素存在是爲了DOM服務的，用DOM的方法建立是最合適的選擇

• 建立img元素節點
• 設置節點的id屬性
• 設置節點的src屬性
• 設置節點的alt屬性
• 建立p元素節點
• 設置p的id屬性
• 建立文本節點
• 把文本節點加到p上
• 把p元素和img加入到文檔

var placeholder = document.creatElement("img");
placeholder.setAttribute(id", "placeholder");
placeholder.setAttribute("src", "image/placeholder.gif");
placeholder.setAttribute("alt", "my image gallery");
var description = document.creatElement("p");
description.setAttribute("id", "description")
var desctext = document.creatTextNode("Choose an image");
description.appendChild(desctext);

插入文檔，很湊巧圖片清單恰好是文檔最後一個元素

document.getElementByTagName("body")[0].appendChild(placeholder);
document.getElementByTagName("body")[0].appendChild(description);

3.1 在已有元素前插入一個元素

insertBefore()方法

• 新元素：你想插入的元素（newElement）
• 目標元素：要插哪一個元素以前（targetElement）
• 父元素：目標元素的父元素（parentElement）

調用語法

parentElement.insertBefore(newElement, targetElement);

在使用中咱們沒必要知道他的父元素是睡，由於targetElement的parentNode屬性值就是

var gallery = document.getElementById("imagegallery");
gallery.parentNode.insertBefore(placeholder, gallery);

3.2 在已有元素後插入一個元素 insertAfter()方法 DOM自己並無提供insertAfter方法，咱們能夠用已知DOM方法和屬性編寫方法

function insertAfter(newElement, targetElement){
	var parent = targetElement.parentNoder;
	if (parent.lastChilde == targetName){
		parent.appendChilde(newElement);
	}else {
		parent.insertBefore(newElement,targetname.nextSibling);
	}
}

最終javascript和html

function showPic(whichpic) {
  if (!document.getElementById("placeholder")) return true;
  var source = whichpic.getAttribute("href");
  var placeholder = document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
  if (!document.getElementById("description")) return false;
  if (whichpic.getAttribute("title")) {
    var text = whichpic.getAttribute("title");
  } else {
    var text = "";
  }
  var description = document.getElementById("description");
  if (description.firstChild.nodeType == 3) {
    description.firstChild.nodeValue = text;
  }
  return false;
}

function prepareGallery() {
  if (!document.getElementsByTagName) return false;
  if (!document.getElementById) return false;
  if (!document.getElementById("imagegallery")) return false;
  var gallery = document.getElementById("imagegallery");
  var links = gallery.getElementsByTagName("a");
  for ( var i=0; i < links.length; i++) {
    links[i].onclick = function() {
      return showPic(this);
	}
    links[i].onkeypress = links[i].onclick;
  }
}

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function preparePlaceholder() {
  if (!document.createElement) return false;
  if (!document.createTextNode) return false;
  var placeholder = document.createElement("img");
  placeholder.setAttribute("id","placeholder");
  placeholder.setAttribute("src","images/placeholder.gif");
  placeholder.setAttribute("alt","my image gallery");
  var description = document.createElement("p");
  description.setAttribute("id","description");
  var desctext = document.createTextNode("Choose an image");
  description.appendChild(desctext);
  var gallery = document.getElementById("imagegallery");
  gallery.parentNode.insertBefore(placeholder,gallery);
  gallery.parentNode.insertBefore(description,gallery);
}

addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);

html清單

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Image Gallery</title>
	<script type="text/javascript" src="scripts/showPic.js"></script>
	<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
</head>
<body>
  <h1>Snapshots</h1>
  <ul id="imagegallery">
    <li>
      <a href="images/fireworks.jpg" title="A fireworks display">
        <img src="images/thumbnail_fireworks.jpg" alt="Fireworks" />
      </a>
    </li>
    <li>
      <a href="images/coffee.jpg" title="A cup of black coffee" >
        <img src="images/thumbnail_coffee.jpg" alt="Coffee" />
      </a>
    </li>
    <li>
      <a href="images/rose.jpg" title="A red, red rose">
        <img src="images/thumbnail_rose.jpg" alt="Rose" />
      </a>
    </li>
    <li>
      <a href="images/bigben.jpg" title="The famous clock">
        <img src="images/thumbnail_bigben.jpg" alt="Big Ben" />
      </a>
    </li>
  </ul>
</body>
</html>

4. Ajax

Ajax指異步加載頁面技術 使用Ajax只更新頁面一小部份內容，其餘內容不用加載

4.1XMLHttpRequest對象

Ajax的核心技術就是XMLHttpRequest對象，充當着中間人的角色 微軟最先在IE5中以ActiveX對象的形式實現一個名叫XMLHTTP的對象，IE建立新的對象要使用如下代碼

var request = new ActiveXObject("Msxml2.XMLHTTP.3.0");

其餘瀏覽器基於XMLHttpRequest來建立對象

var request = new XMLHttpRequest();

getHTTPObject函數

function getHTTPObject(){
	if (typeof XMLHttpRequest == "undefined")
		XMLHttpRequest = function(){
		try{ return new ActiveXobject("Msxml2.XMLHTTP.6..0");}
			catch (e) {}
		try{ return new ActiveXobject("Msxml2.XMLHTTP.3..0");}
			catch (e) {}
		try{ return new ActiveXobject("Msxml2.XMLHTTP");}
			catch (e) {}
		return false;
		}
		retuen new XMLHttpRequest();
}

XMLHttpRequest對象有不少中方法。最有用的是open方法，指定服務器上要訪問的文件。指定請求類型有GET,POST或SEND。第三個參數用於指定請求是否以異步方式發送和處理。 getNewContent函數

function getNewContent(){
	var request = getHTTPObject(){
	if (request){
		request.open("get", "exeample.txt", true);
		request.onreadystatechage = function(){
			if(request.readyState == 4)
			{
			var para = document.creatElement("p");
			var txt = document.creatTextNode("request.responseText");
			para.appendChild(txt);
			document.getElementById('new').appendChild(para)
			}
		    };
		    request.send(null);
		}else {
		alert('Sorry, your browser doesn\'t support XMLHttpRequest');
	}
}
addLoadEvent(getNewConent);

onreadystatechage是一個事件處理函數。它會在服務區XMLHttpRequest對象送回響應時被觸發執行。在這個函數中根據服務器的響應作相應的處理。 也能夠引用一個函數 瀏覽器會在不一樣階段更新readyState屬性值

• 0表示未初始化
• 1表示正在加載
• 2表示加載完畢
• 3表示正在交互
• 4表示完成 異步請求在發送XMLHttpRequest請求後，仍會繼續執行 AJax的一些挑戰
• 與瀏覽器使用慣例衝突
• 每次操做都應獲得明確的結果，在響應時要給用戶明確的提示

4.2Hijax

指漸進加強地使用Ajax 12章詳細介紹如何使用Hijax技術