Jquery源码分析---DOM元素（中）

声明：此内容仅代表网友个人经验或观点，不代表本网站立场和观点。

5.2.2 width&heigth

对于元素的宽度和高度，dom元素提供了 client(clientHeight,clientWidth)、offset(offsetHeight,offsetwidth)、 scroll(srollHeight,srollWidth)三种方式，这三种有什么区别呢？ client=content+padding。Offset=content+padding+border。Scroll的宽度和 高度都是没有经过scroll的原始宽度和高度。也就是这个一般会大于现在显示的 尺寸。

Jquery也提供了三种相关的宽度和高度。Height", "Width"是元素的content的宽度和高度。innerHeigh, innerWidth是 在元素的内容之上加上padding。其实就是clientHeight,clientWidth。 outerHeigh、outerWidth是在元素的内容上加上padding、border、margin。

Jquery的这三类方法比元素的方法的好处在于它们能测量不可见的元素 的宽度和高度。

另外document.body 的值在不同浏览器中有不同解释（ 实际上大多数环境是由于对 document.body 解释不同造成的，并不是由于对 offset 解释不同造成的）document.documentElement是兼容的。

// 为jQuery对象注册height,width方法
//取得第一个匹配 元素当前计算的高（宽）度值（px）。或设值
//在 jQuery 1.2 以后可以 用来获取 window 和 document 的高（宽）jQuery.each(["Height", "Width"],
function(i, name) {
　　var type = name.toLowerCase();
　　jQuery.fn[type] = function(size) {// window的宽度和高度
　　 return this[0] == window ? (// window的宽 度和高度　 ①
　　　　　　 jQuery.browser.opera&& document.body["client" + name]
　　　　 || jQuery.browser.safari&& window["inner" + name]
|| document.compatMode == "CSS1Compat"&& document.documentElement["client"+ name]
|| document.body["client"+ name])
　　　　 : this[0] == document ? (// document的宽度和高度　 ②
　　　　　　 Math.max (Math.max(　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 　　document.body["scroll"+ name],　
　　　　　　　　　 　　document.documentElement["scroll"+ name]),
Math.max(
document.body["offset"+ name],　　　　　　 　　document.documentElement["offset"+ name])))
: (size == undefined ? (// 第一个元素的的宽度和高度　　 ③
　　　　　　　 this.length ? jQuery.css(this[0], type) : null)
　　　　　　　　 　 : // 设定当前对象所有元素宽度和高度
　　　　　　　this.css (type, size.constructor == String?
size: size+ "px"));
　　　　　};
});

在上面的代码 中可以看出"Height", "Width"分成三个部分，①处是对 window的宽高取值,这其实就是document的client的宽高度。 document.documentElement指的是，而document.body指的是 它们两者之间的区别不大。CSS1Compat的模式下，body外的元素都 不会计算宽高的。

②是对document求宽高，它的的值可能会大于window 。因为offset比client多了一个border的尺寸。而且document还会取比offset大 的scroll。

③是取或设其它元素的宽高。取值是通过jQuery.css来完成 的，而设值是通过this.css来完成的，这个在5.2.1中讲过。接下看看 jQuery.css。

// 取得elem的name的属性值
css : function(elem, name, force) {
　　// 对元素的宽度高度修正
　 　if (name == "width" || name == "height") {
　　　var val,props = {position : "absolute",
　 visibility : "hidden",display : "block"},
　 　　　which = (name == "width" ? ["Left", "Right"] : ["Top","Bottom"]);
function getWH() {// 求元素的实际高度，宽度 offsetWidth=padding+border+element
　　　 val = name == "width"? elem.offsetWidth: elem.offsetHeight;　　　　var padding = 0, border = 0;
　　　 jQuery.each(which, function() {
　　　　　　padding += parseFloat(　 // paddinLeft,paddingRight
jQuery.curCSS(elem, "padding" + this, true))|| 0;
　　　　　 border += parseFloat(// borderLeftWidth,borderRightWith
jQuery.curCSS(elem, "border"+ this + "Width", true))|| 0;
　　　 　　　　　　　 });
　　　　　　　　　　 //http://msdn.microsoft.com/en-us/library/ms530302(VS.85).aspx　　 //http://msdn.microsoft.com/en-us/library/ms534304(VS.85).aspx
//offsetwidth-paddinLeft-paddingRight-orderLeftWidth- borderRightWith
　　val -= Math.round(padding + border);//height 也同样要减去。
　　}
//可见就取得实际元素的w,h。除 padding,border
if (jQuery(elem).is(":visible"))getWH ();
// 元素看不到的情况下，通过使元素暂时为绝对定位， display:block等来取高度或宽度
else jQuery.swap(elem, props, getWH);
return Math.max(0, val);
　　}
return jQuery.curCSS(elem, name, force);
},

jQuery.css大部 分是调用jQuery.curCSS来完成工作的，它只是完成了对元素的宽高进行修改。 因为CSS中的宽高度的属性在IE、FF的浏览器是完全不一样的。IE中是content、 padding、border的尺寸的总和，而FF中仅仅是content的尺寸。

在 jQuery.css为了保证兼容性，把标准的content的尺寸作为每个浏览器的尺寸。 每种浏览器的CSS Box 模式是不一样，但是它们的元素的offsetHeight（width ）是一样的。取得元素的宽高只要在offset上面减去padding和border就可以了 。

对于不可见的元素，浏览器不计算其尺寸，可以通过先可见计算其 size然后恢复。这个的实现在jQuery.swap(elem, props, getWH)中。

// 改变elem的options指定的属性以便执行callback中使用，完 成之后又恢复原定属性。
swap : function(elem, options, callback) {
　　　　　 var old = {};
　　　　　 for (var name in options) {// 替换elem.style中的属性
　　　　　　　old[name] = elem.style[name];
　　　　　　　elem.style[name] = options [name];
　　　　　 }
　　　　　 callback.call(elem);
　 　　　　 for (var name in options) // 重新换回原来的属性
　　　 elem.style[name] = old[name];
　　 },

接下来我们分析 jquery的。innerHeigh, innerWidth、outerHeigh、outerWidth。它们是在一起 实现的。

// Create innerHeight, innerWidth, outerHeight and outerWidth methods
jQuery.each(["Height", "Width"], function(i, name) {
　　var tl = i ? "Left" : "Top", // top or left i=0时，为false
　　　　r = i ? "Right" : "Bottom"; // bottom or right
jQuery.fn["inner" + name] = function() {// inner 的尺寸　　　　　　①
　　　　　 return this[name.toLowerCase()]() + num(this, "padding" + tl)
　　　　　　　　　+ num (this, "padding" + br);
　　　 };
jQuery.fn ["outer" + name] = function(margin) {//outer的尺寸　　　②
　　　　eturn this["inner" + name]()
　　　　　　 　　　+ num(this, "border" + tl + "Width")
　 　　　　　　　　+ num(this, "border" + br + "Width")
　　　　　　　　　+ (margin ? num(this, "margin" + tl)
　　　　　　　　　　　　 + num(this, "margin" + br) : 0);
　　　 };
　 　});

在①处是求元素的innerHeight, innerWidth。在②求 outerHeight和outerWidth。Inner等于元素的宽高度加各自的paddng。而out还 要加上border和margin。这里调用num（）来得到元素的CSS的属性值的大小（只 能是数值型的）

// Helper function used by the dimensions and offset modules
function num(elem, prop) {
return elem[0] && parseInt(jQuery.curCSS(elem[0], prop, true), 10) || 0;
}

5.2.3 position

在给元素定位之前，我们首先要了解 一些CSS定位相关的知识。

在CSS中关于定位的内容是： position:relative | absolute | static | fixed 。static 没有特别的设定 ，遵循基本的定位规定，不能通过z-index进行层次分级。relative 不脱离文档 流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z- index进行层次分级。absolute 脱离文档流，通过 top,bottom,left,right 定 位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元 素将以body坐标原点进行定位，可以通过z-index进行层次分级。

fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过 z-index进行层次分级。CSS中定位的层叠分级：z-index: auto | namber

relative | absolute | static | fixed这四种定位的方式不一 样，我们要找到元素的位置的方法也会随之不一样。

Dom元素提供了三种 方式来定位元素：offset，scroll，Client，

图 转自 （http://www.cnblogs.com/believe3301/archive/2008/07/19/1246806.html）

Dom元素对于offset提供了offsetParent、offsetTop、offsetLeft、 offsetWidth、offsetHeight五个方法来定位于元素的相对位置。

offsetParent是指当前元素的相对定位的元素。在IE和FF中定义和解释 不一样。在IE中定义为获取定义对象 offsetTop 和 offsetLeft 属性的容器对 象的引用。大多数时候offsetParent返回body元素。在IE5中，td的 offsetParent是table。可以看出IE中的相对定位与绝对定位的区别不大。都是 相对于最上层的元素来定位。在FF中获取文档层次中最近的元素。如果这个元素 没有定位，那么就根元素。

offsetParent、parentNode （IE:parentElement）都是指元素的父节点。它们的针对的目标是不一样，功能 也不一样。parentNode就是取文档层次中包含该节点的最近节点（直接的父节点 ）。在FF中对于Attr, Document, DocumentFragment, Entity,和Notation这些 父节点，其 parentNode返回null。还有如果没有附加到文档树的元素也是返回 null。

offsetParent是指可视的父节点。如

。AA的offsetParent是 body，而parentNode则是form。在IE中一般都是body。

offsetLeft和 offsetTop是指当前元素left或top边到offsetParent的left或top边的距离，包 含了当前元素的margin和其offsetParent的padding。不包含offsetParent的 border的宽度。

offsetWidth、offsetHeight与offsetLeft、offsetTop 的相对offsetParent的方式不一样，它们就是当前元素自身的宽度或高度。它包 含border、padding、scrollBar(显示的话)和内容的size(CSS中设定的元素的高 度，IE中CSS size指的是包含border的内容大小)。

分析了offset，我们 可以发现offsetLeft、offsetTop与CSS中top,left的属性有相通性，offsetLeft 、offsetTop只能取值。而我们可以通过CSS中top,left的属性来设定一个元素的 相对其它元素的位置（绝对定位，就是相对于body）。

Dom元素对于 scroll提供了scrollWidth、scrollHeigth、scrollTop、scrollLeft。这一组是 对于scroll的元素进行操作的。Scroll的Width、Heigth是指元素真实的宽度和 高度，它包含被scroll起来的部分。而scrollTop、scrollLeft则是被卷起来的 部分的大小。

Dom元素对于scroll提供了clientWidth、clientHeigth、 clientTop、clientLeft。这一组是对于client进行操作的。clientWidth、 clientHeigth是元素的内容可视区域的高度或宽度。包含padding，不包含 scrollbar 、border、margin。可以看出是元素可视的区域。IE，FF是一样的。 clientTop、clientLeft可以看做是topborder或left border的大小。

offsetParent的名字的元素能计算相对位移的父节点，那么对于CSS的定 位方式，哪一些是可以计算位移呢，能计算元素和其父节点之间的位移量，首先 要其父节点能定位。这个定位就是在CSS中能采用top,left来定其在文档的位置 。Body是肯定可以的（0，0）。Body也是元素的终结offsetParent（没有找到就 是它了）,absolute、 relative、 fixed都采用可以top,left来定其在文档的位 置。也是能计算其位置。而static是不需要top,left来设定其位置， Offset是 相对已经定位的元素的位移。元素的offsetParent是其父辈节点中的postiont!= Static的节点。在IE中http://msdn.microsoft.com/zh- cn/library/system.windows.forms.htmlelement.offsetparent(VS.80).aspx， 可以看到其不支持fixed的offsetParent。在mozilla中 http://developer.mozilla.org/en/DOM/element.offsetParent，可以看出其给 出的如果元素没有定位（non-positioned）就是body。

Jquery针对于 offsetParent提供了一个改进的方法。它还是在浏览器的offsetParent基础之上 多加了一个判断的处理，筛选其有可能会是static的节点。觉得这样做的意义不 大。除了table,tr,td之外，浏览器的offsetParent是body的可能性很大。这是 一个不确定的。在使用中是要注意的。

//找到this[0]中元素第一 个能根据CSS中的top,left能设定位置的父辈节点。
　　offsetParent: function() {
　　　 var offsetParent = this[0].offsetParent || document.body;
　　while ( offsetParent && (!/^body|html$/i.test(offsetParent.tagName)
&& jQuery.css(offsetParent, 'position') == 'static') )
　　　 offsetParent = offsetParent.offsetParent;
　　　 return jQuery(offsetParent);
}

其实觉得最好的方法还是直接相 对于body的来定位。这样的定位是确定的。但是浏览器在计算这个值会有点问题 ，而且每种浏览器的实现方式不一样，很难兼容。Jquery提供了一个相对于文档 的起始位置的offset方法。

//元素相对于文档的起始位置的 offset
jQuery.fn.offset = function() {
　　var left = 0, top = 0, elem = this[0], results;
　　if ( elem ) with ( jQuery.browser ) {
　　　 var parent　　= elem.parentNode,　　 offsetChild　= elem,
　　　　 offsetParent = elem.offsetParent,
　　　　doc　　　 = elem.ownerDocument,
　　 safari2　 = safari && parseInt(version) < 522
&& !/adobeair/i.test(userAgent),
　　　 css　　　　　= jQuery.curCSS,
　　　 fixed　　　　= css(elem, "position") == "fixed";

//在IE中有的元 素可以通过getBoundingClientRect来获得元素相对于client的rect.
if ( !(mozilla && elem == document.body) && elem.getBoundingClientRect ) {//IE　http://msdn.microsoft.com/en- us/library/ms536433.aspx　　①
　　var box = elem.getBoundingClientRect();
　　// 加上document的scroll的部分尺 寸到left,top中。
　　add(box.left + Math.max(
doc.documentElement.scrollLeft, doc.body.scrollLeft),
　　　 box.top　+ Math.max(
doc.documentElement.scrollTop,　 doc.body.scrollTop));
　　　　　　//IE中会自动加上2px的border,这 里是去掉document的边框大小。
　　　　　 //http://msdn.microsoft.com/en-us/library/ms533564(VS.85).aspx
　 　/The difference between the offsetLeft and clientLeft properties
// is the border of the object
　　add( - doc.documentElement.clientLeft,
-doc.documentElement.clientTop );
　　} else {　　　　　　　　　　　　　　　　　　　　　　　　　 　　　　　　 ②
//通过遍历当前元素offsetParents来计算其在文档中的 位置（相对于文档的起始位置）
　　add( elem.offsetLeft, elem.offsetTop );//初始化元素left,top　　③　　//很多浏览器的 offsetParent是直接指向body。不过有的是指向最近的可视的父节点。
　 　while ( offsetParent ) { //加上父节点的偏移
　　　 add( offsetParent.offsetLeft, offsetParent.offsetTop ); ④　　 // Mozilla系 列offsetLet或offsetTop不包含offsetParent的边框。要加上
　　 //但 在在table中又会自动加上。
　　　 if ( mozilla && !/^t (able|d|h)$/i.test(offsetParent.tagName)
|| safari && ! safari2 )
　　　 border( offsetParent );//增加offsetParent的 border　　　　　⑤
　　　// 对于CSS设定为fixed相对于client的定位 ，加上document.scroll.
　　　if ( !fixed && css (offsetParent, "position") == "fixed" )
　　 　　　　　　　fixed = true;
　　　//改变子节点变量offsetChild，再 改变offsetParent变量的指向。
　　　 offsetChild　= /^body$/i.test(offsetParent.tagName) ?
offsetChild : offsetParent;
　　　　　　offsetParent = offsetParent.offsetParent;
　　　 }
　　// 减去处理每一层不 显示的scroll的部分。
　　// 因为一个元素的size(CSS中指定的）是 scroll之前的。
　　// 如果scroll，offsetLet或offsetTop会包含这部 分被卷起的。
　　while ( parent && parent.tagName
&& !/^body|html$/i.test(parent.tagName) ) {　　　 ⑥
　 　// 如果parent的display的属性不为inline|table，减去它的scroll.　　　 　　 if ( !/^inline|table.*$/i.test(css(parent, "display")) )
　　　 // 减去 parent scroll offsets
　　　 add( - parent.scrollLeft, -parent.scrollTop );
　　　 // 如果overflow != "visible.在Mozilla 中就不会加上border.s
　　　 if ( mozilla && css(parent, "overflow") != "visible" )
　　　　　　　border( parent );
　　　　　 parent = parent.parentNode;
　　　　　 }
　　//Safari <= 2，在CSS 中position为fiexed或者body的position==absolute，
　　//会重复加上 body offset。Mozilla在Position！=absolute的时候也会重复
if ( (safari2 && (fixed || css(offsetChild, "position") == "absolute"))
||　(mozilla && css (offsetChild, "position") != "absolute") )
　 　add( -doc.body.offsetLeft, -doc.body.offsetTop );　　　　　　　⑦
　　//fixed 加上document scroll。
//因为fixed是scroll的时候也是 相对于client不变。所以要加上
　　if ( fixed )　　　　　　　　　　 　　　　　　　　　　　　　　　　　　 ⑧
　　add(Math.max (doc.documentElement.scrollLeft, doc.body.scrollLeft),
　　　 Math.max(doc.documentElement.scrollTop,　doc.body.scrollTop));　}　　 　
　　results = { top: top, left: left };
}
function border(elem) {
　　　 add( jQuery.curCSS(elem, "borderLeftWidth", true), jQuery.curCSS(elem, "borderTopWidth", true) );
　　}
function add(l, t) {
　　　 left += parseInt(l, 10) || 0;
　　　 top += parseInt(t, 10) || 0;
　　}
return results;
};

上面的代码①采用IE内部提供了特有的方法来找到相对body 的Offset。这样做肯定是提高在IE中效率。②③④⑤⑥⑦⑧处是采用通用的处理 方法来计算。对于一个元素的offset,加上其所有offsetParent的offset和 border。这样就能计算出相对于body的offset。但是这样在scroll的情况下是行 不通的。因为有scroll的卷起来的部分也被计算了进去，对于每个元素都要减去 这一部分的大小。

⑧处我们可以看出如果有元素是fixed的position。说 明其会随着documentElement.scroll而改变位置。因此加上 documentElement.scroll。得出其正确的位置。

Jquery中的position方 法是计算当前元素相对于其offsetParent的offset值。与dom元素的offset不一 样的地方，它是建立在jquery.offset的基础之上，同时还不包括其自身的 margin。对于box的模式来讲，是margin是元素的最外边，而不是border。

jQuery.fn.extend({position: function() {
　　var left = 0, top = 0, results;
　　if ( this[0] ) {　　
　　　 var offsetParent = this.offsetParent(),// Get *real* offsetParent
　　　　 offset　 = this.offset(),// Get correct offsets
　　　 parentOffset = /^body|html$/i.test(offsetParent[0].tagName)
? { top: 0, left: 0 } : offsetParent.offset();
　　　　　 offset.top 　-= num( this, 'marginTop' );
　　　　　 offset.left -= num( this, 'marginLeft' );
　　　　　 parentOffset.top　 += num( offsetParent, 'borderTopWidth' );
　　　　　 parentOffset.left += num( offsetParent, 'borderLeftWidth' );
　　　　　 results = {
　　　　　　　top:　offset.top　- parentOffset.top,
　　　　　　　left: offset.left - parentOffset.left
　　　　　 };
　　　 }
　　　 return results;
　　},

Jquery还提供了两个关于scroll的方法， scrollLeft and scrollTop：

// Create scrollLeft and scrollTop methods
jQuery.each( ['Left', 'Top'], function(i, name) {
　　var method = 'scroll' + name;
　　jQuery.fn[ method ] = function(val) {
　　　 if (!this[0]) return;
　　　 return val != undefined ?　 // Set the scroll offset
　　　　　 this.each(function() {
　　　　　　　this == window || this == document ?
　　　　　　　　　 window.scrollTo(
　　　　　　　　　　 !i ? val : jQuery (window).scrollLeft(),
　　　　　　　　　　　i ? val : jQuery (window).scrollTop()
　　　　　　　　　) :
　　　　　　　　 　this[ method ] = val;
　　　　　 }) : // Return the scroll offset

　　　　　 this[0] == window || this[0] == document ?
　　　　　　　self[ i ? 'pageYOffset' : 'pageXOffset' ] ||
　　　　　　　　　jQuery.boxModel && document.documentElement[ method ]
||document.body[ method ] :
　　　　　　　this[0][ method ];
　 　};

5.3 dom元素的操作

Dom的元素提供了一些改变Dom文 档的层次结构的方法。改变dom文档可以归纳为三种，往文档中插入元素 （insert），把元素从文档删除(remove)或是把文档的某些元素用其他的元素来 代替(update)。

Dom元素对于插入提供了insertBefore()和appendChild ()方法。在IE中还为TextNode提供了appendData()。提供了三个 insertAdjacentText、insertAdjacentHTML、insertAdjacentElement()方法实 现了在元素的前面，后面，内部开始，内部结束的位置上插入。对于删除，提供 了removeChild()方法，Ie还提供removeNode(true)实现删除本元素及所有的子 元素。据说这个函数会出现内存泄漏。对于update，Dom元素提供了 replaceChild()。IE还提供了replaceNode()，replaceAdjacentText()方法。

Jquery也提供了通用的类似的方法。

5.3.1 create

在使 用insert,update之前都必须要有元素，这个新增加的元素从那里来呢，就是得 创建，document提供了createElement来创建一个元素。别外一种方式就是clone 。对原来的元素进行clone。Dom元素提供了cloneNode的方法。

Jquery也 提供了类似的方法，jQuery.clean就是完成元素从HTMLstring的到Dom对象的创 建。这个方法比document. createElement()提供了更好的兼容和更强大的功能 。在3.1中已经介绍。

对于cloneNode，jquery的提供了类似方法如下：

// clone当前对象，events表明是否clone事件
clone : function(events) {
　　// 对每个元素都进行加工（copy)后的集合重新 构建jQuery对象
　　var ret = this.map(function() {
　　　 if (jQuery.browser.msie && !jQuery.isXMLDoc(this)) {
　　　 // IE 中cloneNode不能copy 通过attachEvent增加的事件
　　　 // 而 innserHTML不能copy一些修改过的属性（仅作为属性储存）如input 的name
　　　 var clone = this.cloneNode(true),
container = document.createElement("div");
　　　　　 container.appendChild(clone);
　　　　　 return jQuery.clean ([container.innerHTML])[0];
　　　　　 }
else　 return this.cloneNode(true);
　　　 });

　　//需要把元素的扩 展属性expando设为null.removeData在这里不起作用。
　　　 var clone = ret.find("*").andSelf().each(function() {
　　　　　 if (this[expando] != undefined)
　　　　　　　this[expando] = null;
　　　　});

　　if (events === true)// clone所有 事件
　　　 this.find("*").andSelf().each(function(i) {
　　　　　 if (this.nodeType == 3)　return;
　　　　　 var events = jQuery.data(this, "events");

　　　　　 for (var type in events)//为新元素增加clone的事件
　　　　　　　 for (var handler in events[type])
　　　　　　　　 jQuery.event.add(clone[i], type,
events[type][handler],events [type][handler].data);
　　　　　 });

　　　 return ret;
　　},

Clone提供了对于jquery对象的clone，在上面 的代码中可以看出不光是clone了元素的本身，还为clone的元素clone了事件。

文章来源：http://jljlpch.javaeye.com/category/37744