您的位置：首页 > Web前端 > JavaScript

DOM（0）什么是DOM

2016-08-18 14:15 134 查看

什么是DOM？

通过“节点树”这一模型（M）来描述文档(D)，树中每个节点代表着不同类型的节点对象（O），这些对象有一定数量的属性和方法（API）能够对节点和这课树的层次性进行操作。

DOM1定义了一个Node类型，所有的节点都继承这一类型，包括元素节点，也包含文本节点、注释节点、属性节点等等。

标准浏览器下，后台会根据HTML文档转化成DOM树，在 HTML 源代码中，位于标签之内以及标签之间的文本（包括空白字符换行，空格……）将被创建为文本节点。

IE6 IE7 IE8存在问题，在将一个文档转换为DOM树的过程中，会忽略大部分的空白符文本，可能最终生成的DOM树比起其他浏览器来说会少一些节点，这也影响了NodeList，childNodes等操作。

一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>testDOM</title>
</head>
<body>
<!-- 每个元素之间都有空格-->
<div id="a"> <div>div</div> <div id="b"></div> <span>span</span> </div>
<script>
var $a = document.getElementById('a'),
nodeList = $a.childNodes,
string = '';
/*测试childNodes*/
for(var i = 0; i < nodeList.length; i++){
string += nodeList[i].nodeType;
}
document.writeln("nodeList: "+string);
/*标准下：nodeList: 3131313
IE678:nodeList: 1113
*/
/*测试firstChild*/
document.writeln("firstChild: "+$a.firstChild.nodeType);
/*标准下：firstChild: 3
IE678：firstChild: 1
*/
var $b = document.getElementById('b');
/*测试nextSibling*/
document.writeln("nxtSibling: "+$b.nextSibling.nodeType);

/*标准下：nxtSibling: 3
IE678：nxtSibling: 1
*/
/*测试innerHTML*/
alert('|'+$a.innerHTML+'|');

/*标准下：| <div>div</div> <span id="b">span</span> <span>span</span> |
IE678：|<DIV>div</DIV><SPAN id=b>span</SPAN> <SPAN>span</SPAN> |
*/
</script>
</body>
</html>

可见：IE 在生成 DOM 树时，忽略了一些空白字符，从而比其他浏览器少创建了一些文本节点。这导致在使用 nodeList、chileNodes，firstChild、lastChild、previousSibling 或 nextSibling 方法时，在 IE 和其他浏览器中得到的结果不一致。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 什么是DOM

相关文章推荐

新的分享

章节导航