解释清楚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. PHP中的文件上传

    文件上传:    1.单个文件上传    2.多个文件上传    一.PHP配置文件中和上传有关的选项    file_uploads=on    upload_max_filesize=    最大 ...

  2. linux命令:cd

    1.介绍: cd可以说是linux下最基本的命令,全称是change directory. 2.命令格式: cd [DIRECTORY] 3.命令功能: 切换到指定目录 4.常用范例: 例一:切换到根 ...

  3. jqGrid详解及高级应用(十四)

    一:jqGrid 是一个用来显示网格数据的jQuery插件,文档比较全面,附带中文版本.  二:官方主页http://www.jqgrid.com/目前最新版本:jqGrid 3.7 Beta在线文档 ...

  4. html5in24hours

    http://www.html5in24hours.com/books/the-book/code/ 1.浏览器测试 http://browsershots.org/ 2.http://www.fon ...

  5. 微信Accesstoken通过xml文件方式保存

    //获取accessToken public static AccessToken GetAccessToken() { string AppID = JobBase.GetConfParamValu ...

  6. nginx的压力测试

    #-----------http_load讲解------------------------------------#   Web服务器压力测试工具常见的有http_load.webbench.ab ...

  7. ajax 向后台传对象

    $.ajax({ url : "accreditSurveyInfo.action", data : $("form").serialize(), dataTy ...

  8. Dubbox监控在服务器中的安装

    Jdk-1.6.30以上版本 Tomcat-7.0.42 Duboo-2.5.3 Zookeeper-3.4.5 端口分配 序 系统/端口 http https shutdown ajp 调度JMX ...

  9. LCS (nlogn)

    最长上升子序列的O(n*logn)算法分析如下: 先回顾经典的O(n^2)的动态规划算法,设a[t]表示序列中的第t个数,dp[t]表示从1到t这一段中以t结尾的最长上升子序列的长度,初始时设dp [ ...

  10. java中replace和replaceAll的区别

    replace和replaceAll是JAVA中常用的替换字符的方法,它们的区别是: 1)replace的参数是char和CharSequence,即可以支持字符的替换,也支持字符串的替换(CharS ...