Dom学习

来源：互联网发布：淘宝运费险退货流程编辑：程序博客网时间：2024/05/18 02:53

案例1：
创建三个输入文本框，当光标离开文本框时如果文本框为空，则将文本框的背景色设置为红色，如果不为空则为白色。提示：焦点进入控件的事件是onfocus，焦点离开控件的事件是onblur。

<script type ="text/javascript">    function initiail(){    var inputs=document.getElementsByTagName("input");    for(var i=0;i<inputs.length;i++){    var input=inputs[i];    input.onblur=function(){    if(this.value.length<=0)    {    this.style.background="red";    }    else{this.style.background="white";}    }    }    }    </script></head><body onload ="initiail()"><input type ="text" /><input type ="text" /><input type ="text" /><input type ="text" /><input type ="text" /></body>

易错：单独修改样式的属性使用"style.属性名"。注意在css中属性名在JavaScript中操作的时候属性名可能不一样，主要集中在那些属性名中包含-的属性，因为JavaScript中-是不能做属性、类名的。所以CSS中背景颜色是background-color，而JavaScript则是style.background，元素样式名是class，在JavaScript中是calssName属性；font-size—>style.fontSize;margin-top—> style.marginTop。

实例：
   <script type="text/javascript">
          function say-hello()
              {alert("hello");}

   <body onload="say-hello()"></body>//报错:'say'未定义

单独修改控件的样式<input type="button" value="AAA" onclick="this.style.color='red'"/>

案例2：评分控件V1，用一个单行5列的Table做评分控件，监听td的click事件，点击一个td的时候，将这个td及之前的td背景变为红色，之后的td背景变为白色。鼠标在评分控件上的时候显示超链接形式的鼠标图标。 }

<script type ="text/javascript">    function initial(){        var tableid=document.getElementById("tableid");        var tds=tableid.getElementsByTagName("td");        for(var i=0;i<tds.length;i++){            var td=tds[i];            td.style.cursor="pointer";            td.onmouseover=tdOnclick;                    }    }    function tdOnclick(){        var tableid=document.getElementById("tableid");        var tds=tableid.getElementsByTagName("td");        var index= indexOf(tds,this);        for(var i=0;i<=index;i++){            tds[i].style.color="green";        }        for(var j=index+1;j<tds.length;j++){            tds[j].style.color="black";        }           /*for(var i=0;i<tds.length;i++){            if(tds[i]==event.srcElement){                for(var j=0;j<=i;j++){                    tds[j].style.color="green";                }                for(var k=i+1;k<tds.length;k++){                    tds[k].style.color="black";                }            }           }*/    }    function indexOf(arr,element){        for(var i=0;i<arr.length;i++){            if(arr[i]==element){                return i;            }            }         return -1;    }    </script></head><body onload ="initial()"><table id="tableid"><tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr></table></body>

练习1：超链接的单选效果，页面上若干个超链接，点击一个超链接的时候被点击的超链接变为红色背景，其他超链接背景还原为白色。

<script type ="text/javascript">    function init(){        var links=document.getElementsByTagName("a");        for(var i=0;i<links.length;i++){           var link=links[i];            link.onclick=linkOnclick;                   }    }    function linkOnclick(){        var links=document.getElementsByTagName("a");        for(var i=0;i<links.length;i++){           var link=links[i];           if(link==this) {                link.style.background="red";           }           else{                link.style.background="white";           }        }               window.event.returnValue=false;    }    </script></head><body onload="init()"> <a href="http://www.sina.com.cn">新浪</a><br/> <a href="http://www.sina.com.cn">百度</a><br/> <a href="http://www.sina.com.cn">谷歌</a><br/> <a href="http://www.sina.com.cn">新华</a><br/> <a href="http://www.sina.com.cn">天涯</a><br/></body>

练习2：表格隔行变色:偶数行为黄色背景，奇数行为默认颜色

<script type ="text/javascript">    function init(){        var tableid=document.getElementById("tableid");        var trs=tableid.getElementsByTagName("tr");        for(var i=0;i<trs.length;i++){            if((i+1)%2==0){                trs[i].style.background="red";            }        }    }    </script></head><body onload ="init()"><table id="tableid"><tr><td>dfddddddddddf</td></tr><tr><td>dfdfddddddddddd</td></tr><tr><td>dfdfddddddd</td></tr><tr><td>dfdddddddddddf</td></tr><tr><td>dfdfdddddddddd</td></tr><tr><td>dfddddddddddf</td></tr></table></body>

练习3：获得焦点的文本框黄色背景，其他控件背景颜色还原

<script type ="text/javascript">    function init(){        var inputs =document.getElementsByTagName("input");        for(var i=0;i<inputs.length;i++){            input=inputs[i];            input.onfocus=inputFocus;        }    }    function inputFocus(){        var inputs =document.getElementsByTagName("input");        for(var i=0;i<inputs.length;i++){            input=inputs[i];            if(input==this){                input.style.background="yellow";            }            else{                input.style.background="white";            }        }    }    </script></head><body onload ="init()"><input type ="text" /><input type ="text" /><input type ="text" /><input type ="text" /><input type ="text" /></body>

练习4：点击表格行，被点击的行高亮显示(背景是黄色)，其他行白色背景。监听每个tr的onclick事件，将点击的背景设置为黄色，其他的设置为白色背景。

<script type="text/javascript">    function init(){        var tableid=document.getElementById("tableid");        var trs=tableid.getElementsByTagName("tr");        for(var i=0;i<trs.length;i++){            tr=trs[i];            tr.onmouseover=trOnclick;            tr.style.cursor="pointer";        }    }    function trOnclick(){        var tableid=document.getElementById("tableid");        var trs=tableid.getElementsByTagName("tr");        for(var i=0;i<trs.length;i++){            tr=trs[i];            if(tr==this){                tr.style.background="yellow";            }            else{                tr.style.background="white";            }        }    }    </script></head><body onload ="init()"><table id="tableid">    <tr><td>dfddddddddddd</td></tr>    <tr><td>dfddddddddddd</td></tr>    <tr><td>dfddddddddddd</td></tr>    <tr><td>dfddddddddddd</td></tr>    <tr><td>dfddddddddddd</td></tr>    <tr><td>dfddddddddddd</td></tr></table></body>