方法一、setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('測試');");如果你知道某個控件如select控件的name，但是這個控件並沒有設置id屬性，這時候在IE下測試發現如果僅僅通過控件的name是無法給它動態添加屬性和事件的，因爲W3C是允許name屬性重複的。
function test(){
//通過tag，獲得所有tagName爲select的控件，返回的是一個select集合
var obj=document.getElementByTagName(“select”);
//通過obj.length獲得select集合的個數，在挨個匹配name
for(var i=0;i<obj.length;i++){
//找到name爲part的select控件
if(obj[i].name==’part’){
obj[i].setAttribute(“id”,”myid”);//爲name爲part的select控件設置id爲myid
obj[i].setAttribute(“onchange”,myfunc); //爲該控件設置onchange事件，即調用myfunc函數
}
}
}
function myfunc(){
alert(“test ok!”);
}方法二、用 attachEvent 和 addEventListener
IE支持attachEvent
obj.attachEvent("onclick", Foo);
function Foo()
{
alert("測試");
}
也可寫在一起
obj.attachEvent("onclick", function(){alert("測試");});
其它瀏覽器支持 addEventListener
obj.addEventListener("click", Foo, false);
function Foo()
{
alert("測試");
}同樣也可寫在一起
obj.addEventListener("click", function(){alert("測試");}, false);
注意 attachEvent 的事件帶 on，如 onclick，而 addEventListener 不帶 on，如 click。
順便說一下 addEventListener 的第三個參數（雖然很少用） useCapture - 如果爲 true，則 useCapture 指示用戶希望啓動捕獲。啓動捕獲後，所有指定類型的事件將在被指派到樹中其下面的任何 EventTargets 之前指派給已註冊的 EventListener。正在通過樹向上 bubbling 的事件將不觸發指定的使用捕獲的 EventListener。
綜合應用
var obj = document.getElementById("obj");
if(window.addEventListener){
//其它瀏覽器的事件代碼: Mozilla, Netscape, Firefox
//添加的事件的順序即執行順序
obj.addEventListener('click', alert('test1'), false);
obj.addEventListener('click', alert('test2'), false);
} else {
//IE 的事件代碼
obj.attachEvent('onclick', function(){alert('test3');});
obj.attachEvent('onclick', function(){alert('test4’);});
}
方法三、事件 = 函數
例：obj.onclick = Foo;
這在多個瀏覽器中均支持，這是屬於舊的規範（方法二屬於 DOM2 的規範），不過由於使用方便，用的場合也比較多。
轉載：getElementsByName和getElementByID
原文地址：http://www.jsxzinfo.com/blog/post/getElementByID.html
以前經常使用document.getElementByID取得html裏面ID標記的屬性，昨天想當然使用document.getElementByName（注意沒有s），來獲取name標記的屬性，結果發現瀏覽器報錯。查了查資料，才發現沒有這個函數，應該是getElementsByName。和document.getElementByID不同的是，前者返回的是一個name和ID的集合，因爲W3C是允許name屬性重複的，也就是html標記可以使用同一個name名字，而後者返回了ID的第一個元素。所以
document.getElementsByName的使用方法往往是document.getElementsByName("***")[0], [1]等。document.getElementsByTagName, document.formName.elements 這類方法所得到的結果也都是集合。
<input type=checkbox value=2>2
<input type=checkbox value=1>1
<script language=”javascript”>
var arr = document.getElementsByTagName("input"); //取得所有input,返回就是數組.
alert(arr[0].value); //取第一個input的值.
</script>再給個例子：
一個Table中有7，8個tr，我需要動態的將其中4，5個tr display=none/block。但是我又不想給每個tr都定義一個id，所以我想到了給這4，5個tr一個共同的name然後用 getElementsByName來返回一個數組，這樣用循環操作每一個tr方便點，可是後來發現ie不支持。
如果只是 hide/show 操作的話，可以設一個獨立 stylesheet，把同一 classname 的 object 設爲 display:none。之後便可以透過改變這個 stylesheet 的 disabled property 改變屬於這 classname 的 object 的 show/hide 狀況。
<html>
<head>
<title>test</title>
</head>
<body>
<style id="abc-style">
.abc {display: none}
</style>
<h1 class='abc'>test</h1>
<script>
function toggle() {
var style = document.getElementById('abc-style');
style.disabled = !style.disabled;
}
</script>
<P οnclick="toggle()">click me </p>
</body>
</html>延伸思考：
比如說，你想得到所有class屬性是"abc"的tr，用這個就可以了：
代碼:
alltr = document.evaluate("//tr[@class='abc']", document,
null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
for (var i = 0; i < alltr.snapshotLength; i++) {
tr = alltr.snapshotItem(i);
// do something with tr
}
