Javascript 學習 筆記四

衣舞晨風發表於2015-11-18

1、children和childNodes(參考:JavaScript中Element與Node的區別,children與childNodes的區別 children和childNodes

Node(節點)是DOM層次結構中的任何型別的物件的通用名稱,Node有很多型別,如元素節點,屬性節點,文字節點,註釋節點等,通過NodeType區分,常見的有:

節點型別NodeType
元素element1
屬性attr2
文字text3
註釋comments8
文件document9
更多節點型別參考:https://developer.mozilla.org/en-US/docs/DOM/Node.nodeType?redirectlocale=en-US&redirectslug=nodeType

Element繼承了Node類,也就是說Element是Node多種型別中的一種,即當NodeType為1時Node即為ElementNode,另外Element擴充套件了Node,Element擁有id、class、children等屬性。

以上就是Element跟Node的區別。

childNodes 屬性,它返回指定元素的子元素集合,包括HTML節點,所有屬性,文字。可以通過nodeType來判斷是哪種型別的節點,只有當nodeType==1時才是元素節點,2是屬性節點,3是文字節點。

有些人錯誤的使用()去取該集合元素,下表列出各瀏覽器對childNodes(i)的支援情況:


IE6/7/8/Safari/Chrome/OperaIE9/Firefox
childNodes(i)支援不支援

children 屬性,它返回指定元素的子元素集合。經測試,它只返回HTML節點,甚至不返回文字節點。且在所有瀏覽器下表現驚人的一致

2、document.body.scrollTop or document.documentElement.scrollTop(參考:點選開啟連結

用Javascript獲取DOM節點相對於頁面的絕對座標時,需要計算當前頁面的滾動距離,而這個值的獲取又取決於瀏覽器。
在Firefox或Chrome瀏覽器的控制檯可以檢視document.body 對應於頁面中 <body></body>部分的元素,而document.documentElement則相當於整個HTML,說明瀏覽器在解釋渲染後的頁面位置範圍是存在不同的,FF、Opera和IE瀏覽器認為在客戶端瀏覽器展示的頁面的內容對應於整個HTML,所以使用document.documentElement來代表,相應的滾動距離則通過document.documentElement.scrollLeft 和 document.documentElement.scrollTop來獲取,而Safari和Chrome瀏覽器則認為頁面開始於body部分,從而相應的滾動距離用document.body.scrollLeft 和 document.body.scrollTop來獲取。另外需要注意的是,FF和IE的quirks mode(相容模式)下是用document.body來獲取的。

3、Document 物件

每個載入瀏覽器的 HTML 文件都會成為 Document 物件。
Document 物件使我們可以從指令碼中對 HTML 頁面中的所有元素進行訪問。
提示:Document 物件是 Window 物件的一部分,可通過 window.document 屬性對其進行訪問。



4、Event 物件

Js event事件在IE、FF相容性問題

IE:有window.event物件 
FF:沒有window.event物件。可以通過給函式的引數傳遞event物件。 

 <script type="text/javascript">
        function showDiv(event) {
            var event = window.event || event;
            event.clientX;
            event.clientY;
        }
    </script>


5、真假值

在javascript中,資料型別可以分為“真值”和“假值”。顧名思義,真值轉換為bool時值為true;假值轉換為bool時值為false。

下表羅列了一些常見的資料型別轉換為bool時的值:

資料型別轉換為bool後的值
nullFALSE
undefinedFALSE
ObjectTRUE
functionTRUE
0FALSE
1TRUE
0、1之外的數字TRUE
字串TRUE
""(空字串)FALSE


6、&&與||

在javascript中,“&&”運算子運演算法則如下:

如果&&左側表示式的值為真值,則返回右側表示式的值;否則返回左側表示式的值。

“||”運算子的運演算法則如下:
如果||左側表示式的值為真值,則返回左側表示式的值;否則返回右側表示式的值。


作者:jiankunking 出處:http://blog.csdn.net/jiankunking




相關文章