首先這裡聲明一下，關於我測試瀏覽器的版本是chrome15.0.874.121 Firefox 8.01 IE9 IETester
下面的代碼關於聲明
1：獲得滾動條的情況
複製代碼代碼如下:
function getScroll(){
var t, l, w, h;
if (document.documentElement && document.documentElement.scrollTop) {
t = document.documentElement.scrollTop;//滾動條的頂端
l = document.documentElement.scrollLeft;//滾動條的左端
w = document.documentElement.scrollWidth;//滾動條的寬度，也就是頁面的寬度
h = document.documentElement.scrollHeight;//滾動條的高度
}
else
if (document.body) {
t = document.body.scrollTop;
l = document.body.scrollLeft;
w = document.body.scrollWidth;
h = document.body.scrollHeight;
}
return {
t: t,
l: l,
w: w,
h: h
};
}
2：獲得視圖瀏覽器的寬度高度
複製代碼代碼如下:
function getPageWidth(){
var pageWidth = window.innerWidth;
if (typeof pageWindth != "number") {
if (document.compatMode == "CSS1Compat") {
pageWidth = document.documentElement.clientWidth;
}
else {
pageWidth = document.body.clientWidth;
}
}
return pageWidth;
}
function getPageHeight(){
var pageHeight = window.innerHeight;
if (typeof pageWindth != "number") {
if (document.compatMode == "CSS1Compat") {
pageHeight = document.documentElement.clientHeight;
}
else {
pageHeight = document.body.clientHeight;
}
}
return pageHeight;
}
3：獲得當前瀏覽器型號名字
複製代碼代碼如下:
function(){
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([/d.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/firefox//([/d.]+)/ )) ? Sys.firefox = s[1] : (s = ua.match(/chrome//([/d.]+)/)) ? Sys.chrome = s[1] : (s = ua.match (/opera.([/d.]+)/)) ? Sys.opera = s[1] : (s = ua.match(/version//([/d.]+).*safari/)) ? Sys.safari = s[1] : 0;
if (Sys.ie != null) {
return ("IE:" + Sys.ie);//判斷IE瀏覽器及版本號
}
if (Sys.firefox != null) {
return ("firefox:" + Sys.firefox);//判斷firefox瀏覽器及版本號
}
if (Sys.chrome != null) {
return ("chrome:" + Sys.chrome);//判斷chrome瀏覽器及版本號
}
if (Sys.opera != null) {
return ("opera:" + Sys.opera);//判斷opera瀏覽器及版本號
}
if (Sys.safari != null) {
return ("safari:" + Sys.safari);//判斷safari瀏覽器及版本號
}
}
4：事件監聽
複製代碼代碼如下:
function(element, type, handler){
if (element.addEventListener) {
element.addEventListener(type, handler, false);
}
else
if (element.attachEvent) {
element.attachEvent("on" + type, handler);
}
else {
element["on" + type] = handler;
}
}
5：事件移除
複製代碼代碼如下:
function(element, type, handler){
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
}
else
if (element.detachEvent) {
element.detachEvent("on" + type, handler);
}
else {
element["on" + type] = null;
}
}
6：獲得event，Firefox事件不斷派發的時候，第一次事件會出現問題。
複製代碼代碼如下:
function(event){
event = (event ? event : window.event);
if (event == null) {
var $E = function(){
var c = $E.caller;
while (c.caller)
c = c.caller;
return c.arguments[0]
};
__defineGetter__("event", $E);
}
return event;
}
7：阻止默認事件
複製代碼代碼如下:
function(event){
if (event.preventDefault) {
event.preventDefault();
}
else {
event.returnValue = false;
}
}
8：不繼續傳播事件
複製代碼代碼如下:
function(event){
if (event.stopPropagation) {
event.stopPropagation();
}
else {
event.cancelBubble = true;
}
}
9：獲得event的target
複製代碼代碼如下:
function(event){
return event.target || event.srcElement;
}
10：documen.doctype支持不一致
E：如果存在文檔類型說明，會將其錯誤的解釋為一個註釋並把它當做Comment節點，document.doctype的值始終是null。
Firefox：如果存在文檔類型說明，則將其作為文檔的第一個子節點，document.doctype是一個DocumentType節點，也可以通過firstChild或者childNodes[0]訪問同一個節點。
Safari、Chrome、Opera：如果存在文檔類型說明，則將其作為解釋，但不作為文檔的子節點，不會出現在childNodes中的。
11：查找元素
我有時候，我真搞不明白，IE總是在搞什麼，總是想標新立異。如果系統不讓自帶瀏覽器的話，我敢說，IE的份額將會更少。
如果id和name一樣的話，他也將被返回
複製代碼代碼如下:
<html>
<head>
<script defer>
var item=document.getElementById("my");
item.value="SECOND";
</script>
</head>
<body>
<input type="text" name="my" value="FIRST" >
</body>
</html>
在IE中，結果變化了。
同樣是IE，Id大小寫不區分
複製代碼代碼如下:
<html>
<head>
<script defer>
var item=document.getElementById("MY");
item.value="SECOND";
</script>
</head>
<body>
<input type="text" id="my" value="FIRST" >
</body>
</html>
不好意思，他的結果又變化了。
12：如果是自定義屬性的話，item.myattributs在非IE瀏覽器的情況下，是無法得出正確結果的。
複製代碼代碼如下:
function(item,myatt){
return item.attributes[myatt].value;
}
同樣的話，設置屬性應該知道怎麼辦吧，就是賦值唄。
複製代碼代碼如下:
function(item,myatt,value){
item.attributes[myatt].value=value;
}
13：元素的子節點個數
複製代碼代碼如下:
<ul id="myul">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
IE結果是3，其他瀏覽器是7。
Node之間的空白符，在其他瀏覽器是文本節點，結果就是7。如果變成這樣，
複製代碼代碼如下:
<ul id="myul"><li>first</li><li>second</li><li>third</li></ul>
這樣大家的結果都是3了。
14：創立節點問題
複製代碼代碼如下:
//動態添加Element，所有的瀏覽器都可以實現
var newnode=document.createElement("input");
newnode.type="button";
newnode.value="sixth";
//在IE中可以還這麼實現
var newnode= document.createElement("<input type=/"button/">");
15：在屏蔽右鍵的時候，firefox與其他的不一樣，在oncontextmenu事件中。
16：還有動態添加style和script的時候，IE和其他的瀏覽器是不一樣的。具體查查。
17：對於DOM2和DOM3，情況更複雜了。