瀏覽器視圖層級(jí)中的“根”：<html>和<body>的屬性研究

FuisonDesign 發(fā)布于2019-08-01 14:45 / 2458人閱讀

摘要：瀏覽器中的可以認(rèn)為是整個(gè)結(jié)構(gòu)，但是根節(jié)點(diǎn)非常混亂，我們通常搞不清楚根節(jié)點(diǎn)是還是，還是我對(duì)這幾個(gè)節(jié)點(diǎn)深入研究了一下，以下是我的總結(jié)。結(jié)論顯示元素中，根元素不是，是。

做前端開發(fā)的同學(xué)都會(huì)知道，每一個(gè)UI系統(tǒng)（比如IOS或Android）中都會(huì)有一個(gè)view hierarchy（視圖層級(jí)）的概念，即所有的可視元素（大到一個(gè)頁(yè)面，小到一個(gè)button）都在一個(gè)樹形結(jié)構(gòu)中，而樹形結(jié)構(gòu)的”根節(jié)點(diǎn)“為window，即整個(gè)屏幕或窗口。

瀏覽器中的view hierarchy可以認(rèn)為是整個(gè)dom結(jié)構(gòu)，但是“根節(jié)點(diǎn)”非常混亂，我們通常搞不清楚“根節(jié)點(diǎn)”是、、還是window，還是document？我對(duì)這幾個(gè)節(jié)點(diǎn)深入研究了一下，以下是我的總結(jié)。

注：所有測(cè)試均在mac的chrome下，其他瀏覽器未測(cè)試。不過(guò)原理基本相同

我做了一個(gè)demo：http://linchen1987.github.io/tool/htmlbody/，大家可以邊讀文章邊通過(guò)demo體會(huì)。

1. 根View是誰(shuí)？

demo中可以看到：html和body沒(méi)有充滿整個(gè)屏幕，而是一個(gè)普普通通的塊級(jí)元素（大家可以修改width和height屬性看效果）。我們知道，body的父視圖是html，那么html還會(huì)有一個(gè)父視圖，這個(gè)父視圖是什么呢？是window！也是瀏覽器中的根元素！這個(gè)元素的實(shí)例即為window對(duì)象（尺寸為window.innerWidth和window.innerHeight，可以監(jiān)聽resize事件等等）。那么document是什么呢？document雖然是整個(gè)DOM結(jié)構(gòu)的根節(jié)點(diǎn)，但是document并不是顯示元素，所以與view hierarchy無(wú)關(guān)。

結(jié)論：顯示元素中，根元素不是html，是window。不過(guò)我們只會(huì)在body下創(chuàng)建子元素。瀏覽器的view hierarchy一直是這樣的：

window

html

body

custom view

2. window，html和body的overflow屬性

window像其他元素一樣，是具有overflow屬性的。window的overflow屬性只有兩個(gè)值：hidden和scroll。window的overflow屬性取決于html和body的overflow屬性，并且window可能改變html和body的overfow屬性，很神奇吧。規(guī)則如下：

window會(huì)首先查找html的overflow屬性。如果html的overflow為scroll或者h(yuǎn)idden，則據(jù)為己用，html的實(shí)際overflow效果則變?yōu)関isible。

當(dāng)html設(shè)置visible時(shí)，window則會(huì)查找body的overflow屬性，與html一樣，如果為scroll或者h(yuǎn)idden，則據(jù)為己用，此時(shí)body的實(shí)際overflow效果變?yōu)関isible。

當(dāng)html和body均設(shè)為visible時(shí)，window不找他們倆的麻煩了，自己默默設(shè)定為scroll。這也是默認(rèn)的情況。

結(jié)論：

html不論overflow設(shè)置什么，最終效果均為visible。

html為hidden或scroll時(shí)，window的overflow取決于html；

html為visible時(shí)，body不論overflow設(shè)置什么，最終效果均為visible。

html為visible，body為hidden或scroll時(shí)，window的overflow取決于body的overflow

html為visible，body為visible時(shí)，window為scroll

3. window，html和body的background屬性

同overflow，window也具有background屬性。window的background屬性取決于html和body，并且會(huì)影響html和body。結(jié)論如下：

html只要設(shè)置了background（即background不為transparent），window會(huì)將html的background據(jù)為己用，而html的background則變?yōu)閠ransparent。

html為transparent時(shí)，只要body只要設(shè)置了background（即background不為transparent），window的background會(huì)將body的transparent據(jù)為己用，而body的background則變?yōu)閠ransparent。

html和body的background都為transparent時(shí)，window的background為瀏覽器默認(rèn)的顏色（白色），這也是默認(rèn)的情況。

歡迎大家交流討論，直接留言或郵箱linchen.1987@foxmail.com。