1. 什么是DOM?
"DOM是一套对文档的内容进行抽象和概念化的方法。"
"DOM定义了访问HTML和XML文档的接口"
"文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。"
"文档对象模型(DOM)是HTML和XML文档的编程接口。"
"W3C文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态访问和更新文档的内容、结构和样式。"
W3C DOM标准被分为3个不同的部分:
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对XML文档的标准模型
HTML DOM - 针对HTML文档的标准模型
2. DOM怎么用
在HTML DOM中,所有的事物都是节点。DOM被视为节点树。
DOM节点:
整个文档是一个文档节点
整个HTML元素是元素节点
HTML内的文本是文本节点
每个HTML属性是属性节点
注释是注释节点
DOM Tree
通过DOM中提供的方法可以操控DOM树,使我们对文档的内容、结构、样式进行修改。
3. DOM 和 JavaScript关系
DOM不是一种编程语言,但如果没有DOM,JavaScript语言不会有任何网页。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。
通过JavaScript,您可以重构整个HTML项目,您可以添加、移除、改变或者重排页面上的项目。要改变页面的某个东西,JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口,连同对HTML元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。JavaScript主要是利用HTML DOM去获得、改变、创建HTML元素,从未达到美化页面、操作页面的目的。因此,在JavaScript中最常见的就是各种各样的HTML DOM元素以及它们各自的属性。除了这些DOM元素外,JavaScript有自己的对象,如数组。
4. DOM 的API
创建型API:
主要包括createElement、createTextNode、cloneNode和createDocumentFragment四个方法。
页面修改型API:
appendChild、insertBefore、removeChild、replaceChild
节点查询型API:
document.getElementById()
document.getElementsByTagName()
document.getElementsByName()
document.getElementsByClassName()
document.querySelector()
document.querySelectorAll()
节点关系型API:
parentNode: Element的父节点可能是Element、Document、DocumentFragment
parentElement: 与parentNode的区别在于,其父节点必须是一个Element,如果不是,返回null
previousSibling: 节点的前一个节点,如果该节点是第一个节点,则为null。注意有可能拿到的节点是文本节点或注释节点,与预期的不符,要进行处理一下。
previousElementSibling: 返回前一个元素节点,前一个节点必须是Element,注意IE9以下浏览器不支持。
nextSibling: 节点的后一个节点,如果该节点是最后一个节点,则为null。注意有可能拿到的节点是文本节点,与预期的不符,要进行处理一下。
nextElementSibling: 返回后一个元素节点,后一个节点必须是Element,注意IE9以下浏览器不支持
子关系型API:
childNodes、children、firstChild、lastChild、hasChildNodes等
元素属性型API:
setAttribute、getAttribute
元素样式型API:
window.getComputedStyle是用来获取应用到元素后的样式,假设某个元素并未设置高度而是通过其内容将其高度撑开,这时候要获取它的高度就要用到getComputedStyle。getBoundingClientReact是用来返回元素的大小以及相对浏览器可视窗口的位置。
5. DOM的加载
浏览器地址栏输入URL地址,浏览器开始加载页面时,有以下几个过程:
1. 浏览器开始解析HTML文档
2. 浏览器遇到HTML中的<script>与<link>时暂停解析,开始执行脚本和CSS样式(非异步加载的情况)
3. HTML文档解析完成
4. 浏览器等待图片、样式表、字体文件等外部资源加载完成
在jQuery中有ready方法,它在页面HTML文档解析完成但图片等媒体加载完成前执行。
$(document).ready(function(){
//
alert('all done enjoy!');
})
这个jQuery ready()的方法就是DOM Ready。
传统DOM的加载:
//传统DOM加载
window.onload= function() {
var box = document.getElementById("box");
alert(box.innerHTML);
};
//如果有图片,需要等到图片加载完毕才执行onload里面的内容
非IE浏览器提供了一种加载事件:DOMContentLoadeds事件,这个事件可以在完成HTML DOM结构之后就触发,不会等图像音频、JS文件、CSS文件或其他资源是否已经下载完毕。
//DOMContentLoaded事件加载
if (document.addEventListener) { //DOM结构加载完毕
addEvent(document, 'DOMContentLoaded', function () {
var box = document.getElementById('box');
alert(box.innerHTML);
});
}
IE8不支持DOMContentLoaded事件,因此在较低的版本中,可以使用readystatechange事件,可以达到同样的效果。
document.onreadystatechange = function() {
if(document.readyState == "complete") {
//logical code
alert("OK, all done enjoy!");
}
}
document.readyState共有三种可能的值:
loading: 加载HTML代码阶段
interactive: 加载外部资源阶段
complete: 加载完成