CSSOM View Module

[picacure]

原文链接-CSSOM View Module

参考

cssom-view-module相关整理与介绍

http://www.web-tinker.com/article/20213.html

CSS 中 block-level boxes、containing block、block formatting context

http://www.zhihu.com/question/20086234

http://dingjun1.iteye.com/blog/573406

所有的接口对象定义图

分析方法

因为和位置有关，会有相对性；field看位置，method看算法。

1.是谁/包含哪些

2.相对于谁

同时注意语气词："MUST", "MUST NOT", "REQUIRED", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL"

[picacure]

window对象

• viewport

  innerWidth = Viewport的宽度 +　 rendered scroll bar宽度 innerHeight = Viewport的高度 +　 rendered scroll bar高度

• viewport scroll

scrollX and pageXOffset，相对initial containing block，-> of the left of the viewport

scrollY and pageYOffset，相对initial containing block，-> of the top of the viewport

scroll(x,y) 伪码描述如下：

if(x,y∈ {infinite ,NaN }){
    exit(-1);
}
else if(document content can have overflow to the right){
    x = max(0, min(x, content width - content edge width))
}
else if(document content can have overflow to the left (under right-to-left conditions)){
    x = min(0, max(x, content edge width - content width))
}

y = max(0, min(y, document content height - viewport height excluding the size 
of a rendered scroll bar (if any)))

layout：
the left of the viewport => x
the top of the viewport => y

If the aligning caused content to move queue a task to fire an event named scroll that bubbles at the Document object, unless a task to fire that event at the Document object was already queued.

scrollTo(x,y)和 scroll(x,y) 行为一致；scrollBy(x,y)则不同

scrollBy(x,y)：

x是指x + scrollX
y是指y + scrollY

• client

screenX ：

相对于（relative to the origin of the screen of the output device）
是指 x-coordinate

screenY ：

相对于（relative to the origin of the screen of the output device）
是指 y-coordinate

outerWidth ：

=>the width of the client window

outerHeight :

=>the height of the client window

DEMO：

http://jsbin.com/ugebuw/219/edit

[picacure]

MediaQueryList (media query相关)

A MediaQueryList object has an associated media query list set on creation and an associated list of media query list listeners, which is initially empty.

A simple piece of code that detects changes in the orientation of the viewport can be written as follows:

function handleOrientationChange(mql) {
  if(mql.matches) // landscape
    …
  else
    …
}
var mql = matchMedia("(orientation:landscape)")
mql.addListener(handleOrientationChange)

参考

https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList

[picacure]

Screen

availWidth ：声明了显示浏览器的屏幕的可用宽度，以像素计。在 Windows 这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。

availHeight ：声明了显示浏览器的屏幕的可用高度，以像素计。在 Windows 这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。

width 属性声明了显示浏览器的屏幕的宽度，以像素计。

height 属性声明了显示浏览器的屏幕的高度，以像素计。

colorDepth 返回目标设备或缓冲器上的调色板的比特深度。

pixelDepth 返回显示屏幕的颜色分辨率（比特每像素）。

• DEMO

http://jsbin.com/ugebuw/82/edit

下面是手机UC上的表现：

[picacure]

Element

getClientRects() and getBoundingClientRect()

• DEMO http://jsbin.com/ugebuw/211/edit
• DEMO scrollIntoView http://www.zhangxinxu.com/study/201109/scroll-into-view.html

getClientRects返回的其实是个数组，数组中有很多个类似getBoundingClientRect返回的对象。 getBoundingClientRect返回的永远是最外框框的那个矩形区域相关的坐标偏移对象；

• DEMO : getClientRects

http://jsbin.com/ugebuw/127/edit

关于HtmlElement 与 Element之间的关系

• Common interface for HTMLElement and HTMLDocument? http://stackoverflow.com/questions/10057306/common-interface-for-htmlelement-and-htmldocument
• What's the difference between HTMLElement and Element? http://stackoverflow.com/questions/6581680/whats-the-difference-between-htmlelement-and-element
• XML DOM - Node 对象 http://www.w3school.com.cn/xmldom/dom_node.asp
• XML DOM - Element 对象 http://www.w3school.com.cn/xmldom/dom_element.asp
• XML DOM HTMLElement 对象 http://www.w3school.com.cn/xmldom/dom_htmlelement.asp
• Document Object Model (DOM) Level 3 Core Specification http://www.w3.org/TR/DOM-Level-3-Core/Overview.html#contents
• 大话HTML DOM与XML DOM的区别与联系 http://developer.51cto.com/art/201009/225276.htm
• DOM Core和HTML DOM的区别 http://www.cnblogs.com/windrainpy/archive/2012/09/12/2679640.html

[picacure]

Document Interface

返回viewport的点击区域的元素，不在渲染区域->null

The elementFromPoint(x, y) method must return the element at coordinates x,y in the viewport. The element to be returned is determined through hit testing. If either argument is negative, x is greater than the viewport width excluding the size of a rendered scroll bar (if any), or y is greater than the viewport height excluding the size of a rendered scroll bar (if any), the method must return null. If there is no element at the given position the method must return the root element, if any, or null otherwise.

• DEMO

http://jsbin.com/ugebuw/216/edit

[picacure]

The CaretPosition Interface

[picacure]

the MouseEvent Interface

The screenX attribute must return the x-coordinate of the position where the event occurred relative to the origin of the screen.

The screenY attribute must return the y-coordinate of the position where the event occurred relative to the origin of the screen.

The pageX attribute must return the horizontal coordinate of the position where the event occurred relative to the origin of the initial containing block

参考http://www.zhihu.com/question/20086234.

『what is a non-replaced inline element? http://stackoverflow.com/questions/12468176/what-is-a-non-replaced-inline-element』

The pageY attribute must return the y-coordinate of the position where the event occurred relative to the origin of the initial containing block.

The clientX attribute must return the x-coordinate of the position where the event occurred relative to the origin of the viewport.

The clientY attribute must return the y-coordinate of the position where the event occurred relative to the origin of the viewport.

The x attribute must return the value of clientX.

The y attribute must return the value of clientY.

The offsetX attribute must return the x-coordinate of the position where the event occurred relative to the origin of the padding edge of the target node.

The offsetY attribute must return the y-coordinate of the position where the event occurred relative to the origin of the padding edge of the target node.

• DEMO:

http://jsbin.com/olirom/21/edit