1.document与Element和TEXT是Node的子类。
Element：HTML元素的节点
>>HtmlElement与Htmldocument
b:Htmldocument对象表示 HTML 文档树的根。HTMLdocument 接口对 DOM document 接口进行了扩展，定义 HTML 专用的属性和方法。
a:DOM Event:Event 对象代表事件的状态。
c:DOM Element：Element 对象表示 HTML 元素，Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
d:DOM document：每个载入浏览器的 HTML 文档都会成为 document 对象。document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问 <div id="log">
<span>Span1</span>
<span>Span2</span>
<span>Span3</span>
<div>
<span>Span4</span>
<span>Span5</span>
</div>
</div>
与CSS选择器的标准化一起的另外一个称做"选择器API"的W3C标准定义了获取匹配一个给定选择器的元素的Javascript方法。该API的关键是document方法querySelectorAll()。它接收包含一个CSS选择器的字符串参数，返回一个表示文档中匹配选择器的所有元素的NodeList对象。
querySelectorAll()强大到即使在没有其的原生支持的浏览器中依旧可以使用CSS选择器。它是一种终极的选取方法技术。
jQuery的CSS选择器匹配代码已经作为一个独立的标准库提出来并发布了，命名为Sizzle。
表示HTML文档元素的HTMLElement对象定义了读写属性，他们映射了元素的HTML属性。
var image=document.getElementById("my_image");
可以使用<img>元素的HTMLElement对象的src属性.
有时候在HTML元素上绑定一些额外的信息。HTML5提供看一种方法。
5.Web浏览器很擅长解析HTML，通常设置innerHTML效率非常高。但是：对innerHTML属性使用”+=“操作符重复追加文本时效率低下，因为它既要序列化又要解析。
6.视口坐标与文档坐标
文档坐标:指的是包含整个页面的整个部分(也即我们在浏览器中能看的那部分区域以及需要依靠滚动条来滚动查看的区域)。
a:查询窗口滚动条的位置
functon getScrollOffsets(w){
var sLeft,sTop;
sLeft = w.pageXOffset;
return {x:sLeft,y:sTop};
b:查询窗口的视口尺寸
function getViewportSize(w){
var cWidth,cHeight;
cWidth = w.innerWidht;
return {w:cWidth,h:w.cHeight};
if(document.compatMode == "CSS1Compat"){
cHeight = doument.documentElement.clientHeight;
}else if(document.compatMode == "BackCompat"){
cHeight = doument.body.clientHeight;
return {w:cWidth,h:w.cHeight};
}
7.查询元素的几何尺寸
具体见乱炖中的这篇文章：使用getBoundingClientRect()来获取页面元素的位置
getBoundingClientRect()与getClientRects()的区别？
elementFromPoint()能够用来判断判定视口中的指定位置上有什么元素。
它有一个取代者，那就是target属性。
Window的scrollBy()与scroll()和scrollTo()类似。
如：
offsetWidth()
offsetLeft()
offsetParent()
clientHeight()
clientTop()
scrollHeight()
scrollTop()
10.HTML表单
客户端程序是基于事件的
切图网（qietu.com）是一家专门从事web前端开发的公司，专注we前端开发，关注用户体验，欢迎订阅微信公众号：qietuwang
