javascript_DOM 編程藝術學習筆記（六）
一、元素節點的創建
var pElement = document.createElement("p");
創建了一個<p>標籤的元素節點，裏面沒有任何東西，也沒在DOM樹上。也就無法顯示。
二、元素節點的添加
var bodyElement = document.getElementsByTagName("body")[0];
bodyElement .appendChild(pElement );
將<p>節點添加到body元素節點中
三、文本節點的添加
var pText = document.createTextNode("my node");
pElement .appendChild(emText);
將文本節點添加到p節點中
四、例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>welcome to my first web!</p>
<script type="text/javascript">
var aNode = document.createElement("p");
var ptext = document.createTextNode("This is")
aNode.appendChild(ptext);
var emNode = document.createElement("em");
var emText = document.createTextNode("my");
emNode.appendChild(emText);
aNode.appendChild(emNode);
var pRightText = document.createTextNode(" content.");
aNode.appendChild(pRightText);
var pNode = document.getElementsByTagName("p")[0];
pNode.appendChild(aNode);
</script>
</html>五、插入一個新元素
1、在元素前插入一個新元素
DOM提供了insertBefore()方法，要使用他需要做三件事：
1）新元素：需要插入的元素（newElement）
2）目標元素：在那個元素前插入（targetElement）
3）父元素：目標元素的父元素（parentElement）
parentElement.insertBefore(newElement,targetElement);
上代碼：
var newElement = document.createElement("p");
var newElementText = document.createTextNode("呵呵");
newElement.appendChild(newElementText);
var targetElement = document.getElementsByTagName("h1")[0];
var parentElement = targetElement.parentNode;
parentElement.insertBefore(newElement,targetElement);2、在元素後面插入一個新元素（DOM沒有提供方法：）
上代碼：
/**
* 在已有元素後面插入一個新元素
* @param {[element]} newElement [新元素]
* @param {[element]} targetElement [目標元素]
*/
function insertAfter(newElement,targetElement) {
var parentElement = targetElement.parentElement;
if (parentElement.lastChild == targetElement) {
parentElement.appendChild(newElement);
}else{
parentElement.insertBefore(newElement,targetElement.nextSibling);
}
}3、示例：
addLoadEvent(appendElementToFooter);
addLoadEvent(showPicLibiary);
/**
* 追加元素到文檔結尾，實現js和html分離
* @return {[type]} [description]
*/
function appendElementToFooter () {
// 創建img標籤
var imgElement = document.createElement("img");
imgElement.setAttribute("src","images/5.gif");
imgElement.setAttribute("alt","屌絲男");
imgElement.setAttribute("id","placeholder");
// 創建p標籤
var pElement = document.createElement("p");
pElement.setAttribute("id","description");
pElement.setAttribute("name","description");
var pElementText = document.createTextNode("choose an image!");
pElement.appendChild(pElementText);
// 將節點加入到DOM樹
var scriptElement = document.getElementsByTagName("script")[0];
var bodyElement = scriptElement.parentNode;
bodyElement.insertBefore(imgElement, scriptElement);
insertAfter(pElement, imgElement);
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
/**
* 圖片庫顯示代碼
*/
function showPicLibiary () {
if (!document.getElementById) return false;
// 判斷哪個屬性是否存在，來確定瀏覽器是否支持這個js
if (!document.getElementsByTagName) return false;
if (!document.getElementById("imageGelley")) false;
var gelleryNode = document.getElementById("imageGelley");
var links = gelleryNode.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
return !showPic(this);
}
}
}
/**
* 在已有元素後面插入一個新元素
* @param {[element]} newElement [新元素]
* @param {[element]} targetElement [目標元素]
*/
function insertAfter(newElement,targetElement) {
var parentElement = targetElement.parentElement;
if (parentElement.lastChild == targetElement) {
parentElement.appendChild(newElement);
}else{
parentElement.insertBefore(newElement,targetElement.nextSibling);
}
}
function showPic(element) {
if(!document.getElementById("placeholder")) return false;
if(!document.getElementById("description")) return false;
var imgElement = document.getElementById("placeholder");
if(imgElement.nodeName != "IMG") return false;
imgElement.src = element.href;
var descriptionNode = document.getElementById("description");
if(description.firstChild.nodeType == 3){ // 確定是文本節點
description.firstChild.nodeValue = element.title;
}
return true;
}html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js example</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<h1>SnapShots</h1>
<ul id="imageGelley">
<li class="11"><a href="images/1.jpg" title="1"><img src="images/1.jpg"></a></li>
<li class="22"><a href="images/2.jpg" title="2"><img src="images/2.jpg"></a></li>
<li class="33"><a href="images/3.jpg" title="3"><img src="images/3.jpg"></a></li>
<li class="44"><a href="images/4.jpg" title="4"><img src="images/4.jpg"></a></li>
</ul>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
六、ajax
上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<script type="text/javascript" src="index.js"></script>
</body>
</html>addLoadEvent(getNewContent);
var request;
function getNewContent () {
request = getHTTPObject();
if(request){
request.open("GET","http://localhost/jstext/example.txt",true);
request.onreadystatechange = function(){
if(request.readyState == 4){
var para = document.createElement("p");
var txt = document.createTextNode(request.responseText);
para.appendChild(txt);
document.getElementsByTagName("body")[0].appendChild(para);
}
};
request.send(null);
}else{
alert("Sorry, your browser doesn\'t supoort XMLHttpRequest");
}
}
function getHTTPObject () {
if(typeof XMLHttpRequest == "undefined"){ // 判斷是否爲IE瀏覽器
// IE瀏覽器
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;
}
}
return new XMLHttpRequest();
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}this was loaded asynchronously!服務器在向XMLHttpRequest對象發回響應時，該對象有許多屬性可用，瀏覽器會在不同的階段更新readyState屬性的值，它有5個可能的值：
1）0表示未初始化
2）1表示正在加載
3）2表示加載完畢
4）3表示正在交互
5）4表示完成
只要readyState屬性的值變成了4，就可以訪問服務器發送回來的數據了。