DOM(文档对象模型,Document文档,Object对象,Model模型)
在开发中的地位和作用
1、解释下面名词
HTML XHTML DHTML XML:
HTML:超文本标记语言,专门编写网页内容的语言 --元素定义可大小写
XHTML:严格的HTML语言标准 --元素定义小写
DHTML:动态网页技术的统称 DHTML=HTML+CSS+JS
XML:可扩展的标记语言,可自定义标签,主要有配置文件和存储数据格式两种功能
专门用来存储/传输自描述的结构化数据,逐渐被json替代了
2、BOM 与 DOM 区别
BOM:浏览器对象模型(API),专门操作浏览器窗口的API,没有标准
DOM:文档对象模型(API),专门操作网页内容的API,可以对网页中任意对象,做任何修改,DOM是标准,90%以上浏览器都严格兼容
3、W3C DOM由以下三部分组成:
核心DOM - 针对任何结构化文档(XML,HTML)的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
HTML DOM不能完成所有功能,实际开发中都是核心DOM与HTML DOM配合使用。
HTML DOM:网页中一切都是对象(元素,属性,文字)
同一网页中的所有对象,在内存中父子相连,形成一棵DOM树。
4、DOM树:
文档中的每个元素,属性,文字,注释,都被看做一个节点对象——Node——所有节点对象的父类型
当网页被加载进内存时,浏览器会为网页创建一个document对象。所有节点对象都是document对象的子节点。
document,封装了对网页中所有子节点的增加,删除,查找
DOM节点树
5、七种常见的DOM节点类型(共12个)
例、
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<title>DocumentFragment文档片段节点</title>
</head>
<body> <!-- tip区域 -->
<div id="tip">test1</div>
<ul class="list-node">
<li>test2<li>
</ul>
<script>
var frag = document.createDocumentFragment();
for (var i = 0; i < 10; i++) {
var li = document.createElement("li");
li.innerHTML = "List item" + i;
frag.appendChild(li);
}
document.getElementById("list-node").appendChild(frag);
</script>
</body>
</html>
①Element(元素节点):
是组成文档树的重要部分,它表示了html、xml文档中的元素。通常元素因为有子元素、文本节点或者两者的结合,元素节点是唯一能够拥有属性的节点类型。
例子中的:html、heade、meta、title、body、div、ul、li、script都属于Element(元素节点);
②Attr(属性节点):
代表了元素中的属性,因为属性实际上是附属于元素的,因此属性节点不能被看做是元素的子节点。因而在DOM中属性没有被认为是文档树的一部分。换句话说,属性节点其实被看做是包含它的元素节点的一部分,它并不作为单独的一个节点在文档树中出现。
例子中的:lang、charset、id、class都属于Attr(属性节点);
③Text(文本节点):
是只包含文本内容的节点,在xml中称为字符数据,它可以由更多的信息组成,也可以只包含空白。在文档树中元素的文本内容和属性的文本内容都是由文本节点来表示的。
例子中的:DocumentFragment文档片段节点、test1、test2、元素节点之后的空白区域都属于Text(文本节点);
④Comment(注释节点):
表示注释的内容
例子中的<!-- -->都属于Comment(注释节点);
⑤Document(文档节点) :
是文档树的根节点,它是文档中其他所有节点的父节点。要注意的是,文档节点并不是html、xml文档的根元素,因为在xml文档中,处理指令、注释等内容可以出现在根元素之外,所以我们在构造DOM树的时候,根元素并不适合作为根节点,因此就有了文档节点,而根元素是作为文档节点的子节点出现的。