javascript基础-DOM原理

解释清楚DOM原理并非一件容易的事，可是任何一个前端工程师，都必须紧紧掌握它。

 

DOM总体架构：

图解: DOM，即针对XML文档的应用程序编程接口(API).通俗一点说，HTML属于XML的一种，先将HTML映射成节点树，而后对节点树提供一套增删改查的方法。

 

 

DOM1 Core:

  

 图解:  1. Node: 节点接口。属性：nodeType(1:element,2:attr,3:text)，nodeValue(属性value值/节点的文本值)；方法:提供了’节点级‘的’上下左右‘增删改查API。’节点级‘指的是，首先必须定位此节点。 ’上下左右‘指的是，parent，child，previous，next四个方向。查找API：parentNode父节点，  childNodes子节点集，previousSibling()往前兄弟节点集，nextSibling()日后兄弟节点集，firstChild()，lastChild()；删改查(仅提供’下‘)：appendChild()加到子节点最后面，replaceChild()，removeChild()，insertBefore()插入到某节点前。

          2. HTML Docment。属性：title； 方法：‘范围级’(’范围级’指不须要定位到节点，整个文档范围内)增查API:getElementsByTagName(),getElementById(),getElementsByName();createElement(); IO流API:wirte(),writeln(),open(),close().此API基本用不到，由于它会重写，将文档原有内容彻底覆盖； 文档碎片：createDocumentFragment()，开辟新的微型DOM空间，此空间内，你能够应用DOM方法，操做完毕后，再一次加入DOM树。和innerHTML有殊途同归之妙。  都是为减小对DOM的访问。  标准检测：implementation.hasFeature. 少用，缘由是浏览器常会返回true。但并不保证支持。通常用能力检查，譬如判断是否支持‘Worker’，写 if(Worker){};

          3. HTML Element。 属性：id，className，title；方法：对属性的增删改查API，如getAttribute();  咱们操做原生属性，好比id，会直接element.id/element.id='XXX'/element.id=null; 若是是自定义属性，则必须经过属性API才能访问到。

          4. 三大集合：NodeList(节点集合)，HTMLCollection,NamedNodeMap(属性map)；三大集合都是实时同步的。访问三大属性必定要用变量缓存，不然容易形成内存泄露。

 

 

DOM1 Core:

图解:  1. Selectors API: 经过样式访问DOM节点。

         2. Element Traversal API：NodeList会返回Text节点，此API能够避免此问题，仅返回Element。

 

 

 

DOM2-3Core:

图解:  1. DOM2 Core主要是增长了对命名空间的支持，针对混合XML语言，好比HTML,SVG混合的界面，HTML标签上须要增长xmlns：命名空间URL；DOM上，则methodName+NS;第一个参数传命名空间URL。

      

 

DOM2-3Style:

图解:  1. 文档的样式分为行内样式，内嵌样式，外联样式。element.style能够对行内样式直接进行增删改查操做。如element.sytle/element.sytle.height='90px;'/elment.style.height='auto';若是要获取计算出来的样式，需window.getComputedStyle();实际上读行内样式是毫无心义的，缘由是那不是真正做用它的样式。可是操做，仅容许对行内样式进行修改。它的优先级最高，会覆盖其余类型样式。特殊状况，其余类型样式设置了‘!important’,行内样式也需带上‘!important’才能覆盖。

         2. 三大高宽：offsetHeight/offsetWidth: contentHeight/Width+padding+滚动条+border。clientHeight/clientWidth:contentHeight/Width+padding; scrollHeight/scrollWidth:Math.max(scrollHeight/Width, clientHeight/clientWidth);scrollTop,scrollLeft;(IE6-的contentHeight=contentHeight+padding+border);

         3. 位置：getBoundingClientRect()获取top，left，right，bottom；IE-的坐标从2,2开始。

      

 

HTML5 DOM：

 

图解:  HTML5为未来的DOM扩展指引方向(能够理解为对现存的DOM不满，抢DOM制定小组的饭碗)

         document.activeElement：当前获取了焦点的元素。

         element.dataset： 在元素里自定义属性‘data-XXX’.经过element.dataset能够获取到自定义属性集。

         element.insertAdjacentHTML(): 针对DOM1 ‘节点级’增删改查的字符串实现。提供‘beforebegin,afterbegin,beforeend,afterend’上下左右四个方向，容许插入DOM字符串。

         scrollIntoView(true/false): true：将元素滚动到与视窗顶部持平；false：相反，与底部持平。

         DOMTokenList： element.classList 获取className的集合对象