村天來了

The style property gives access to these inline styles, it will always overrule all other styles.

The general rule is that all dashes are removed from the CSS property names, and that the character after a dash becomes uppercase.

margin-left becomes marginLeft, text-decoration becomes textDecoration, and border-left-style becomes borderLeftStyle.

// Microsoft and W3C have created ways of accessing non-inline styles.

function getRealStyle(elt,styleName)

{

        var realStyle = null;

        if (elt.currentStyle)

                realStyle = elt.currentStyle[styleName];

        else if (window.getComputedStyle)

                realStyle = window.getComputedStyle(elt,null)[styleName];

        return realStyle;

}

// Get dom element by id

function $(id){return document.getElementById(id);}

// Register event handlers

function addEvent(obj,evt,fn)

{

        if(obj.addEventListener)

                obj.addEventListener(evt,fn,false);

        else if(obj.attachEvent)

                obj.attachEvent('on'+evt,fn);

}

// Removing event handlers

function removeEvent(obj,evt,fn)

{

        if(obj.removeEventListener)

                obj.removeEventListener(evt,fn,false);

        else if(obj.detachEvent)

                obj.detachEvent('on'+evt,fn);

}

// Handle event

function handleEventSample(e)

{

        var evt = e || window.event;

        var evtTarget = evt.target || evt.srcElement;

        var posX = evt.pageX || evt.clientX;

        var posY = evt.pageY || evt.clientY;

        /* W3C L-0 M-1 R-2, IE  L-1 M-4 R-2 */

        var mouseKey = evt.button;

        var boardKey = evt.which || evt.keyCode;

        // Cancelling event propagation

        if(evt.stopPropagation)

                evt.stopPropagation();

        else

                evt.cancelBubble = true;

}

Finding elements

[Long-distance travel]

Through the getElementById() and getElementsByTagName() methods.

[Short-distance travel]

The five properties are parentNode, firstChild, lastChild, previousSibling, and nextSibling.

Node information

nodeName, nodeValue, nodeType, and tagName.

Changing the document tree

appendChild(), insertBefore(), removeChild() and replaceChild().

Creating and cloning elements

documnet.createElement(), documnet.createTextNode().

cloneNode() expects an argument true or false.

true means "Clone the element and all its child nodes."

false means "Clone the element but not its child nodes."

innerHTML, outerHTML, innerText and outerText

Attributes

getAttribute() and setAttribute().

Level 0 DOM

document.forms[], document.images[], document.links[]

文件參考 : http://code.google.com/p/trimpath/wiki/JavaScriptTemplates

function posX(elmt) {
　　var x = 0;
　　//繞行 offsetParents
　　for (var e = elmt ; e ; e = e.offsetParent) {
　　　　//把 offsetLeft 值加總
　　　　x += e.offsetLeft;
　　}
　　//繞行至 document.body
　　for (e = elmt.parentNode; e && e != document.body; e = e.parentNode){
　　　　//減去捲軸值
　　　　if (e.scrollLeft) x -= e.scrollLeft;
　　}
　　return x;
}
function posY(emlt) {
　　var y = 0;
　　//繞行 offsetParents
　　for (var e = elmt ; e ; e = e.offsetParent) {
　　　　//把 offsetTop 值加總
　　　　y += e.offsetTop;
　　}
　　//繞行至 document.body
　　for (e = elmt.parentNode; e && e != document.body; e = e.parentNode){
　　　　//減去捲軸值
　　　　if (e.scrollTop) y -= e.scrollTop;
　　}
　　return y;
}

程式碼節錄於 JavaScript大全(5e)

無侵入性是近幾年相當盛行的JavaScript設計觀念，它主張JavaScript不應該對網頁原始碼以及使用者造成干擾。為了達成這個訴求，首要的目標就是讓HTML標記與JavaScript程式保持分離，讓內容與行為能清楚畫分為二，因此可以透過模組化的方式，使JavaScript不與HTML文件混雜在一起。同時，也要能確保如果不能執行JavaScript時，網頁一樣能正常運作。

舉個例子
 <img id="myImg" src="11.jpg" onmouseover="this.src='22.jpg'" onmouseout="this.src='11.jpg'" />

可以改成
 document.getElementById("myImg").onmouseover = function(){this.src="22.jpg"};
 document.getElementById("myImg").onmouseout = function(){this.src="11.jpg"};

也就是把事件行為抽離html，使用 DOM 的事件委託方法來寫，html碼裡不再混雜 javascript 程式碼。

相關的設計原則可參考
The seven rules of Unobtrusive JavaScript
http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/

書籍參考
ppk on JavaScript 中文版

更多資訊
Yahoo! Design Pattern Library
http://developer.yahoo.com/ypatterns/
Event Delegation
http://icant.co.uk/sandbox/eventdelegation/
Event Driven JavaScript Application Design
http://yuiblog.com/blog/2007/01/17/event-plan/
JavaScript Programming Patterns
http://www.klauskomenda.com/code/javascript-programming-patterns/
Show love to the Object Literal
http://www.wait-till-i.com/2006/02/16/show-love-to-the-object-literal/
A JavaScript Module Pattern
http://yuiblog.com/blog/2007/06/12/module-pattern/

雖然這個 JavaScript 的小工具我不是很建議大家使用，但是如果 code 不想讓人清楚地馬上解讀，進行些微的減少縮排和編碼卻是個不錯的方法。在使用時要記的註解述敘的使用，最好以 /* comment */ 包起來。

Sample:

function show()
{
alert("Hello World");
}

Result 1: 減少縮排

function show(){alert("Hello World")}

Result 2: base62encode

eval(function(p,a,c,k,e,r){e=String;if(!''.replace(/^/,String)){while(c--)r[c]=k[c]||c;k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('0 1(){2("3 4")}',5,5,'function|show|alert|Hello|World'.split('|'),0,{}))

http://dean.edwards.name/packer/

當沒有 jQuery 或 Prototype 使用時, 該如何使用 javascript 提供的原生方法操作 html dom 和 event 行為呢 ?
詳細可以參考:http://www.w3schools.com/HTMLDOM/

以下是自己常用到的方法

window
alert(),prompt(),confirm()
open(),close()
moveBy(),moveTo()
resizeBy(),resizeTo()
scrollBy(),scrollTo()
setInterval(),setTimeout()
clearInterval(),clearTimeout()
print()

document
getElementById(),getElementsByName(),getElementsByTagName()

location
assign(),reload(),replace()

history
back(),forward(),go()

table
insertRow(),deleteRow()

row
insertCell(),deleteCell()

select
add(),remove()

dom
createElement()
createTextNode()
setAttribute()
getAttribute()
appendChild()
removeChild()