天天看點

JavaScript權威設計--JavaScript腳本化文檔Document與CSS(簡要學習筆記十五)

1.document與element和text是node的子類。

document:樹形的根部節點

element:html元素的節點

text:文本節點

>>htmlelement與htmldocument

a:htmlelement對象表示html中的一個個元素。

b:htmldocument對象表示 html 文檔樹的根。htmldocument 接口對 dom document 接口進行了擴充,定義 html 專用的屬性和方法。

>>html的dom對象

>>#log span 與 #log>span的差別?

JavaScript權威設計--JavaScript腳本化文檔Document與CSS(簡要學習筆記十五)
JavaScript權威設計--JavaScript腳本化文檔Document與CSS(簡要學習筆記十五)

#log span的效果:

JavaScript權威設計--JavaScript腳本化文檔Document與CSS(簡要學習筆記十五)

#log>span的效果:

JavaScript權威設計--JavaScript腳本化文檔Document與CSS(簡要學習筆記十五)

2.css選擇器

與css選擇器的标準化一起的另外一個稱做"選擇器api"的w3c标準定義了擷取比對一個給定選擇器的元素的javascript方法。該api的關鍵是document方法queryselectorall()。它接收包含一個css選擇器的字元串參數,傳回一個表示文檔中比對選擇器的所有元素的nodelist對象。

queryselectorall()傳回的nodelist對象并不是實時的:它包含在調用時刻選擇器所比對的元素,不包括後續的通過javascript更改文檔的比對元素。

queryselectorall()強大到即使在沒有其的原生支援的浏覽器中依舊可以使用css選擇器。它是一種終極的選取方法技術。

基于jquery的web應用程式使用一個輕便的,跨浏覽器的和queryselectorall()等效的方法,命名為$().

jquery的css選擇器比對代碼已經作為一個獨立的标準庫提出來并釋出了,命名為sizzle。

3.html屬性作為element的屬性

表示html文檔元素的htmlelement對象定義了讀寫屬性,他們映射了元素的html屬性。

例如:

可以使用<img>元素的htmlelement對象的src屬性.

4.資料集屬性

有時候在html元素上綁定一些額外的資訊。html5提供看一種方法。

任意一”data-*“為字首的小寫的屬性名字都是合法的。

5.web浏覽器很擅長解析html,通常設定innerhtml效率非常高。但是:對innerhtml屬性使用”+=“操作符重複追加文本時效率低下,因為它既要序列化又要解析。

插入節點方法:appendchild()與insertbefore()的異同?

6.視口坐标與文檔坐标

視口坐标:指的是顯式文檔内容的那一部分(也即我們在浏覽器中能看到的那部分區域),不包括浏覽器的外殼元素,比如菜單欄,工具條等。

文檔坐标:指的是包含整個頁面的整個部分(也即我們在浏覽器中能看的那部分區域以及需要依靠滾動條來滾動檢視的區域)。

該書中提供了幾個實用的方法:

a:查詢視窗滾動條的位置

JavaScript權威設計--JavaScript腳本化文檔Document與CSS(簡要學習筆記十五)
JavaScript權威設計--JavaScript腳本化文檔Document與CSS(簡要學習筆記十五)

b:查詢視窗的視口尺寸

JavaScript權威設計--JavaScript腳本化文檔Document與CSS(簡要學習筆記十五)
JavaScript權威設計--JavaScript腳本化文檔Document與CSS(簡要學習筆記十五)

7.查詢元素的幾何尺寸

getboundingclientrect()方法

需要注意的是:getboundingclientrect這個方法不同于getelementbytagname()這樣的dom方法傳回的結果是實時的,但是getboundingclientrect卻不是,它類似于一種靜态快照。使用者滾動的時候,并不會去實時更新。

getboundingclientrect()與getclientrects()的差別?

8.判斷元素在某點

elementfrompoint()能夠用來判斷判定視口中的指定位置上有什麼元素。

傳遞x與Y坐标(使用視口或視窗坐标而不是文檔坐标)

它有一個取代者,那就是target屬性。

9.滾動

window的scrollby()與scroll()和scrollto()類似。

隻是scrollby的參數是相對的,并在目前滾動條的偏移量上增加。

如:

scrollintoview()的使用?

offsetwidth()

offsetheight()

offsetleft()

offsettop()

offsetparent()

clientwidth()

clientheight()

clientleft()

clienttop()

scrollwidth()

scrollheight()

scrollleft()

scrolltop()

client他就是web浏覽器用戶端-專指它定義的視窗或視口。

10.html表單

伺服器端程式是基于表單送出動作的

用戶端程式是基于事件的

javascript的from。

轉載:http://www.cnblogs.com/zqzjs/p/4847491.html

繼續閱讀