認識dom
是什麼：
文件物件模型
為什麼：
w3c推出，為了相容瀏覽器，替代dhtml
文件型別：
gml：通用標記語言
sgml：標準通用標記語言
html：超文字標記語言，用於顯示資料
xml：可擴充套件標記語言，用於描述資料
節點
節點型別：
基礎：元素節點1、屬性節點2、文字節點3
注釋節點8
文件：文件節點9、文件型別節點10、
文件片段節點11
節點屬性：
nodetype
nodename
nodevalue
元素節點型別的判斷：
iselement
判斷條件：
nodetype===1，物件例項於node，可新增刪除節點12
3456
78910
1112
1314
15vartestdiv = document.createelement('div');
variselement =function(obj)
trycatch(e)
}
returnfalse;
};
ishtml
判斷條件：
nodename一定是大寫12
34varishtml =function(doc) ;
console.log(ishtml(document));
isxml
判斷條件：
nodename區分大小寫12
34varisxml =function(doc) ;
console.log(isxml(document));
contains
判斷方法:
現代瀏覽器 支援contains，相容方法嘗試遞迴b.parentnode12
3456
78910
1112
functionfixcontains(a, b)
}
returnfalse;
}catch(e)
}
domready
渲染引擎的基本流程：
解析hmtl、構建dom樹 → 構建渲染樹 → 布局渲染樹 → 繪製渲染樹
domready實現策略：
window.load問題：
等所有元素載入完執行，例如， 不能立即執行
不支援多個函式
domready策略：
1.支援domcontentloaded事件就用domcontentloaded
2.不支援，就用hack相容，通過ie中的document.documentelement.doscroll('left') 來判斷dom樹是否建立完畢12
3456
78910
1112
1314
1516
1718
1920
2122
2324
2526
2728
2930
3132
3334
3536
3738
3940
41functionmyready(fn)else
//ie模擬domcontentloaded
functioniecontentloaded(fn)
fn();
};
(function()catch(e)
//沒有錯誤就表示dom樹建立完畢，然後立即執行使用者**
init();
})();
//監聽document的載入狀態
d.onreadystatechange =function()
}
}
}
DOM詳解 二 DOM查詢
1.三個元素不用找，可直接獲得 document.documentelement document.head document.body 2.節點間關係 2大類 不常用 何時 只要已經獲得了乙個節點，找周圍節點時 節點樹 包含所有節點 元素,文字 的完整的樹結構 1.父子關係 elem.parent...
DOM詳解 三 DOM修改
1.innerhtml 獲取或設定元素開始標籤到結束標籤之間的html 片段。2.textcontent 獲取或設定元素開始標籤到結束標籤之間的純文字內容。2件事 1.去掉了html標籤 2.將轉義字元轉換為正文 何時 如果希望去掉內容中的標籤，僅獲取文字內容時 textcontent有相容性問題 ...
DOM基礎 節點
一 定義 dom documentobject model 即文件物件模型。針對html和xml文件的api。d 文件 可以理解為整個web載入的網頁文件 o 物件 可以理解為類似window物件之類的東西，例如document，可以呼叫屬性和方法。m 模型 可以理解為網頁文件的屬性結構。1.節點 ...