1.什么是DOM?
DOM -- Dicument Object Model（文档对象模型）.DOM 是W3C的标准，DOM定义了访问HTML和XML文档的标准。在W3C的标准中，DOM是独立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容、结构和样式。
简单的来说，DOM就是脚本拿来操作HTML文档的。
DOM是针对xml经过扩展用于HTML的应用程序编程接口，应用程序编程接口（API）。DOM把整个页面映射为一个多层的节点结构，html或者xml页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。
2.DOM的初映象
这是一棵DOM树
这是该DOM树对应得代码
这是这个DOM树对应得代码
可以清楚的看到，代码之间的逻辑关系被DOM树很好的表现了出来，html的一切节点的根节点，而根节点有两个子节点，head和body，然后head和body也有各自的子节点，于是就这样形成了一棵树状结构。
而各种节点也有类型的分别
如上图的DOM树来说，总共有三种节点：
元素节点：<body>,<head>都是元素节点
文本节点：“文档标题”，“我的链接”等等，都是文本节点
属性节点：href就是属性节点
3.DOM的节点类型
刚刚的图，只显示出了三种DOM的节点类型，其实DOM有很多种节点类型，常用的节点类型图如下图所示：
这些事常用的节点类型
元素节点（element）：html,head,body,h1,ul,div这些都是元素节点
属性节点（attr）：id,class,href这些标签内的属性就是属性节点
文本节点（text）:元素节点内部的文本值，元素节点后面的空白区域都是text
注释节点（comment）://,<!-- -->文档中用的注释全是注释节点
文档节点（document）和文档类型节点:<!DOCTYPE html>只有这个是文档节点，html是文档节点的子节点
文档片段节点（documentFragment）:主要用于占位符，插入的时候插入文档类型节点的子节点
依照上述的文档类型，我们有了三个属性来查看获得节点：nodeType,nodeValue,nodeName
这是各种值对应的nodeName和nodeValue
所以在实际开发中，最常用的是文本节点的nodeValue,以此来获得text的值
现在我们已经明晰了理论知识，但是在叙述实际操作前，还要讲述一下DOM对应得浏览器渲染机制了。
4.domReady
1.什么是domReady?
html是一种标记语言，它告诉我们这个页面有什么内容，但行为交互式需要通过DOM操作来实现的。不要以为有两个尖括号了他就是一个DOM了，html需要浏览器解析才会实现DOM节点，当我们向地址栏传入一个url的时候，我们开始加载页面，就能看到内容，在这期间就有一个DOM节点构建的过程。节点是以树的形式组织的。当页面上所有的html都转化为节点的时候，就叫做DOM树构建完毕，此时简称domReady。
2.那么浏览器如何将html的标签解析变成DOM节点的呢？
实际上浏览器是通过渲染引擎来实现的。渲染引擎的指责就是啊请求的内容显示到浏览器屏幕上。
这是渲染引擎做的事情
基本流程
这个过程并不包括浏览器加载的外部资源，比如图片，脚本这些。所以在实际开发中，js文件总是在dom渲染完毕之后才开始调用的。
window.onload方法，就是表示当页面所有元素都加载完毕，并且所有要求的资源也加载完毕的时候才触发执行该函数内的内容。这样保证了代码在文件基本渲染完毕之后再开始调用
但是如果图片文件非常多，一时间加载不出来，js文件点击就没有效果，此时用户体验极差，于是w3c新增加了一个DOMContentLoaded事件。各大主流框架针对DOMContentLoaded开发了各自的domReady事件，比如jquery的domReady。
网友评论