相关元素操作

时间：2015-04-23 17:07:34 阅读：113 评论：0 收藏：0 [点我收藏+]

标签：

相关元素：
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>&nbsp;</td>
 34     <td>&nbsp;</td>
 35     <td>&nbsp;</td>
 36     <td>&nbsp;</td>
 37     <td>&nbsp;</td>
 38   </tr>
 39   <tr>
 40     <td>&nbsp;</td>
 41     <td>&nbsp;</td>
 42     <td>&nbsp;</td>
 43     <td>&nbsp;</td>
 44     <td>&nbsp;</td>
 45   </tr>
 46   <tr>
 47     <td>&nbsp;</td>
 48     <td>&nbsp;</td>
 49     <td>&nbsp;</td>
 50     <td>&nbsp;</td>
 51     <td>&nbsp;</td>
 52   </tr>
 53   <tr>
 54     <td>&nbsp;</td>
 55     <td>&nbsp;</td>
 56     <td>&nbsp;</td>
 57     <td>&nbsp;</td>
 58     <td>&nbsp;</td>
 59   </tr>
 60   <tr>
 61     <td>&nbsp;</td>
 62     <td>&nbsp;</td>
 63     <td>&nbsp;</td>
 64     <td>&nbsp;</td>
 65     <td>&nbsp;</td>
 66   </tr>
 67   <tr>
 68     <td>&nbsp;</td>
 69     <td>&nbsp;</td>
 70     <td>&nbsp;</td>
 71     <td>&nbsp;</td>
 72     <td>&nbsp;</td>
 73   </tr>
 74   <tr>
 75     <td>&nbsp;</td>
 76     <td>&nbsp;</td>
 77     <td>&nbsp;</td>
 78     <td>&nbsp;</td>
 79     <td>&nbsp;</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>