相关元素：
1.obj.nextSibling下一个元素（注意回车与空格）
2.obj.previousSibling上一个元素（注意回车与空格）
3.obj.parentNode父级元素。 //任何元素只有一个上一级
4.obj.childNodes所有的子级元素
属性：
obj.firstChild//第一个子元素
obj.lastChild//最后一个元素
obj.childNode[n]//中间的元素
方法：
obj.appendChild(元素对象)追加子元素（最后一个）; //元素对象，不是一个HTML的字符串
d.insertBefore(要插入的元素对象,相对于哪个元素);//
d.removeChild(要移除的元素对象);
d.replaceChild(新元素，旧元素);
d.getElementsByxxx("id字符串");在子元素中找符合条件的元素。
如何在子级中找指定的元素？
1.遍历 2.obj.getElementsByxxxxx;
innerHTML=“”；直接清除子元素
如何向元素中追加一个子元素？
1.造个元素。
var n = document.createElement("div"); //造元素。
n.innerHTML = "this is a new div"; //设内容
n.style.backgroundColor="green"; //设样式
2.加进去。
d.appendChild(n);
事件：
onclick ondblclick//单击触发；双击触发
onmouseover onmouseout//鼠标移动上去触发；鼠标离开触发
onkeydown onkeyup//案件按下触发；案件抬起触发
onfocus onblur//获得焦点时触发；失去焦点时触发
onchange
1.如何为表格中所有的行，用代码加上同一个事件？
2.如何实现表格中奇偶行不同背景颜色？
3.如何实现光棒效果？
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 8 #tb tr 9 { 10 background-color:white; 11 } 12 13 </style> 14 <script language="javascript"> 15 var bg; 16 function doover(tr) 17 { 18 bg=tr.style.backgroundColor; //记住这一行本来的背景色。 19 tr.style.backgroundColor="yellow"; 20 } 21 function doout(tr) 22 { 23 tr.style.backgroundColor=bg; 24 } 25 </script> 26 </head> 27 28 <body> 29 <table id="tb" width="100%" border="0" cellspacing="1" cellpadding="5" bgcolor="black"> 30 31 32 <tr> 33 <td> </td> 34 <td> </td> 35 <td> </td> 36 <td> </td> 37 <td> </td> 38 </tr> 39 <tr> 40 <td> </td> 41 <td> </td> 42 <td> </td> 43 <td> </td> 44 <td> </td> 45 </tr> 46 <tr> 47 <td> </td> 48 <td> </td> 49 <td> </td> 50 <td> </td> 51 <td> </td> 52 </tr> 53 <tr> 54 <td> </td> 55 <td> </td> 56 <td> </td> 57 <td> </td> 58 <td> </td> 59 </tr> 60 <tr> 61 <td> </td> 62 <td> </td> 63 <td> </td> 64 <td> </td> 65 <td> </td> 66 </tr> 67 <tr> 68 <td> </td> 69 <td> </td> 70 <td> </td> 71 <td> </td> 72 <td> </td> 73 </tr> 74 <tr> 75 <td> </td> 76 <td> </td> 77 <td> </td> 78 <td> </td> 79 <td> </td> 80 </tr> 81 82 </table> 83 84 </body> 85 </html> 86 <script language="javascript"> 87 //为每个tr元素加上两个事件。 88 var trs = document.getElementsByTagName("tr"); 89 for(var i=0;i<trs.length;i++) 90 { 91 //偶数行设成灰色背景 92 if(i%2==0) 93 { 94 trs[i].style.backgroundColor="#e0e0e0"; 95 } 96 //加事件 97 trs[i].setAttribute("onmouseover","doover(this)"); 98 trs[i].setAttribute("onmouseout","doout(this)"); 99 } 100 </script>
4.微博输入时，显示剩余可输入的字数。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #zishu { color:red; font-weight:bold; } </style> <script language="javascript"> function showCount(tt) { var len = tt.value.length; var c = 140-len; document.getElementById("zishu").innerHTML = c; } </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <p>请输入内容：<br /> <label for="txt"></label> <textarea name="txt" onkeyup="showCount(this)" id="txt" cols="80" rows="10"></textarea> <br /> 最多输入140字，你还可以再输入<span id="zishu">140</span>字<br /> <input type="button" name="btn" id="btn" value="发送" /> <br /> </p> </form> </body> </html>