认识DOM
是什么：
文档对象模型
为什么：
W3C推出，为了兼容浏览器，替代DHTML
文档类型：
GML：通用标记语言
SGML：标准通用标记语言
HTML：超文本标记语言，用于显示数据
XML：可扩展标记语言，用于描述数据
节点
节点类型：
基础：
元素节点1、属性节点2、文本节点3
注释节点8
文档：
文档节点9、文档类型节点10、文档片段节点11
节点属性：
nodeType
nodeName
nodeValue
元素节点类型的判断：
isElement
判断条件：
nodeType===1，对象实例于Node，可添加删除节点
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var testDiv = document.createElement('div');
var isElement = function (obj) {
if (obj && obj.nodeType === 1) {
if (window.Node && (obj instanceof Node)) {
return true;
}
try {
testDiv.appendChild(obj);
testDiv.removeChild(obj);
} catch (e) {
return false;
}
}
return false;
}; |
isHTML
判断条件：
nodeName一定是大写
|
1
2
3
4
|
var isHtml = function (doc) {
return doc.createElement('p').nodeName === doc.createElement('P').nodeName;
};console.log(isHtml(document)); |
isXML
判断条件：
nodeName区分大小写
|
1
2
3
4
|
var isXML = function (doc) {
return doc.createElement('p').nodeName !== doc.createElement('P').nodeName;
};console.log(isXML(document)); |
contains
判断方法:
现代浏览器 支持contains，兼容方法尝试递归b.parentNode
|
1
2
3
4
5
6
7
8
9
10
11
12
|
function fixContains(a, b) {
try {
while ((b = b.parentNode)){
if (b === a) {
return true;
}
}
return false;
} catch (e) {
return false;
}
} |
domReady
渲染引擎的基本流程：
解析HMTL、构建DOM树 → 构建渲染树 → 布局渲染树 → 绘制渲染树
domReady实现策略：
window.load问题：
等所有元素加载完执行，例如图片， 不能立即执行
不支持多个函数
DOMReady策略：
1.支持DOMContentLoaded事件就用DOMContentLoaded
2.不支持，就用Hack兼容，通过IE中的document.documentElement.doScroll('left') 来判断DOM树是否创建完毕
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
function myReady(fn) {
//现代浏览器，对DOMContentLoaded事件标准处理事件绑定方式
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", fn, false);
} else {
IEContentloaded();
}
//IE模拟DOMContentLoaded
function IEContentloaded(fn) {
var d = window.document;
var done = false;
var init = function () {
if (!done) {
done = true
}
fn();
};
(function () {
try {
//Dom树未创建完之前调用doScroll会抛出错误
d.documentElement.doScroll('left');
} catch (e) {
//延迟递归尝试
setTimeout(arguments.callee, 50);
return;
}
//没有错误就表示DOM树创建完毕，然后立即执行用户回调
init();
})();
//监听document的加载状态
d.onreadystatechange = function () {
if (d.readyState == 'complete') {
d.onreadystatechange = null;
init();
}
}
}
} |