解释清楚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的集合对象

javascript体系 DOM原理的更多相关文章

  1. javascript基础-DOM原理

    解释清楚DOM原理并不是一件容易的事,但是任何一个前端工程师,都必须牢牢掌握它. DOM整体架构: 图解: DOM,即针对XML文档的应用程序编程接口(API).通俗一点说,HTML属于XML的一种, ...

  2. JavaScript异步编程原理

    众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...

  3. javascript --- javascript与DOM

    javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...

  4. JavaScript模板引擎原理

    JavaScript模板引擎原理,几行代码的事儿 2013-12-03 16:35 by BarretLee, 650 阅读, 6 评论, 收藏, 编辑 一.前言 什么是模板引擎,说的简单点,就是一个 ...

  5. 你所不了解的javascript操作DOM的细节知识点(一)

    你所不了解的javascript操作DOM的细节知识点(一) 一:Node类型 DOM1级定义了一个Node接口,该接口是由DOM中的所有节点类型实现.每个节点都有一个nodeType属性,用于表明节 ...

  6. javascript AJAX简单原理及什么是ajax

    AJAX简单原理供初学者理解 AJAX的原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其 ...

  7. HTML、css、javascript、DOM编程

    HTML.css.javascript.DOM编程 一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...

  8. JavaScript的闭包原理

    什么是js(JavaScript)的闭包原理,有什么作用? 一.定义 官方解释:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 个人的理解是 ...

  9. JavaScript与DOM

    文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和D ...

随机推荐

  1. 团队开发——冲刺1.a

    冲刺阶段一(第一天) 1.今天准备做什么? 在了解C#的基础上,深入熟悉Windows窗体应用程序,熟练掌握基本功能. 2.明天做什么:简单设计界面.

  2. Intellij编译时报“java: System Java Compiler was not found in classpath”

    问题如下: http://stackoverflow.com/questions/19889145/setting-up-intellij-12-idea-with-java-1-7-and-reso ...

  3. 深入分析:Fragment与Activity交互的几种方式(三,使用接口)

    第一步:我们需要在Fragment中定一个接口,并确保我们的容器Activity实现了此接口: public interface onTestListener { public void onTest ...

  4. R函数是对A方法的封装

    $user = new UserController;  ===      $user=A("User"); $user = new UserController; $user-& ...

  5. JQuery源码分析(七)

    了解jQuery对DOM进行遍历背后的工作机制,这样可以在编写代码时有意识地避免一些不必要的重复操作,从而提升代码的性能. 关于jQuery对象的包装 var $aaron = $("aar ...

  6. Unity3D ShaderLab 漫反射卷积光照模型

    Unity3D ShaderLab 漫反射卷积光照模型 漫反射卷积[Diffuse convolution]是一个模糊立方体的过程,它保留了立方图的整体光照强度,只模糊了细节. 这种效果在我们要活得一 ...

  7. HDU 1848

    http://acm.hdu.edu.cn/showproblem.php?pid=1848 利用计算grundy数组,把一类博弈转化为nim博弈,最后x不为0为先手必胜态 #include < ...

  8. Inno Setup 打包工具总结

    Inno Setup 打包工具总结 分类: Install Setup 2013-02-02 15:44 2386人阅读 评论(0) 收藏 举报 最近打包用到了Inno setup,在这个过程中容易犯 ...

  9. Azure 自动化:使用PowerShell Credential连接到Azure

    最近在中国版windows azure中新上线的自动化功能, 使用自动化,您可以导入自己的PowerShell脚本,然后设置一个运行计划使得脚本能按计划运行. 在本文中,我们来学习如何使用PowerS ...

  10. 【Avalon源码】dateGetter

    function dateGetter(name, size, offset, trim) { return function(date) { var value = date["get&q ...