196
AJAX入門---DOM操作HTML
AJAX入門---DOM操作HTML
一邊學習AJAX一邊坐著總結加深印象，上次寫的是如何簡單的使用XMLHttpRequest對象，今天寫的是DOM（文檔對象模型(Document Object Model)）操作HTML，希望我的博客對大家的學習能夠起到幫助作用。
一．什麼是DOM
文件對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展標誌語言的標準編程接口。DOM可以以一種獨立於平台和語言的方式訪問和修改一個文檔的內容和結構。換句話說，這是表示和處理一個HTML或XML文檔的常用方法。
二．簡單的操作HTML
今天的例子實現前我們先需要了解DOM的常用節點和常用API，例子中通過動態的向HTML中添加元素節點達到學習的目的。
最終效果
添加節點實現
//添加節點
var index = 0;
function appendnode() {
//找到body對應節點
var htmlNode = document.documentElement;
var bodyNode = htmlNode.lastChild;
//新建節點
var divNode = document.createElement("div");
var textNode = document.createTextNode("我是一個新加入的節點" +index++);
//建立節點之間的關係
divNode.appendChild(textNode);
bodyNode.appendChild(divNode);
}
插入節點實現
//插入節點
function insertnode() {
var removenode = document.getElementById("remove");
var firstdivnode = removenode.nextSibling;
while (firstdivnode) {
if (firstdivnode&& firstdivnode.nodeName == "DIV") {
var newnode =document.createElement("div");
var textnode =document.createTextNode("我是一個新加入的節點" + index++);
newnode.appendChild(textnode);
document.documentElement.childNodes[2].insertBefore(newnode,firstdivnode);
break;
}
firstdivnode =firstdivnode.nextSibling;
}
}
移除節點實現
function removenode() {
//1.找到body
//2.找到需要被移除的那個div
//3.調用remove方法移除節點
var bodynode = document.getElementById("remove").parentNode;
var removenode = document.getElementById("remove");
var firstdivnode = removenode.nextSibling;
while (firstdivnode) {
if (firstdivnode&& firstdivnode.nodeName == "DIV") {
bodynode.removeChild(firstdivnode);
break;
}
firstdivnode = firstdivnode.nextSibling;
}
}
總結
總記得以前有位老師總是在班裏提醒“好記性不如爛筆頭”，誠然編程有何嚐不是這樣，自己實現一遍抵得上自己看千萬遍源碼。需要完整的demo您可以通過下載免費源碼獲取（https://download.csdn.net/detail/senior_lee/7714311）
最後更新：2017-04-03 05:39:42