DOM explain the principle is not an easy task, but any one of the front-end engineer, must firmly grasp it.
DOM overall architecture :
Illustration : . The DOM, i.e. XML documents for an application programming interface (API) Popular point, HTML is a form of XML, HTML first mapped into a tree node, and a node tree is provided a method of CRUD .
DOM1 Core:
Illustration : 1. the Node : a node interface. Properties: nodeType (1: element, 2 : attr, 3: text), nodeValue ( value attribute value / text node value); Method: Providing 'level nodes' of the 'up and down' CRUD API. 'Level node' refers must first locate this node. 'Up and down' refers, parent, child, previous, next four directions. Finding API: parentNode parent node, childNodes child node set, previousSibling () forward set of siblings, nextSibling () next set of siblings, firstChild (), lastChild () ; deletion check (only 'down'): appendChild ( ) was added to the final surface subnode, replaceChild (), removeChild () , insertBefore () is inserted before a node.
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的集合对象
转载于:https://www.cnblogs.com/mominger/p/3822775.html