Dom学习

原创 2012年03月30日 15:38:28

案例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>
 
 

dom学习总结

  • 2012年02月16日 23:33
  • 49.94MB
  • 下载

XML学习笔记(五):使用 jdom和dom4j 解析XML

XML解析的详细分析与jaxp解析XML详见:XML学习笔记(四):使用 DOM和SAX 解析XML 一、JDom 1、创建XML文件: 1)Document类即代表整个XML文档,把生成的 Do...

一个简单的Dom4j学习的例子

  • 2009年07月16日 11:15
  • 926B
  • 下载

Andorid中使用Jsoup解析库解析XML、HTML、Dom节点---第三方库学习笔记(三)

XML介绍:XML简介: XML,可扩展标记语言,标准通用标记语言的子集。 一种用于标记电子文件使其具有结构性的标记语言。 它可以用来标记数据、定义数据类型 是一种允许用户对自己的标记语言进行定义的源...

javaScript DOM编程艺术2版学习笔记

  • 2015年10月23日 19:36
  • 2.46MB
  • 下载

学习html dom 的好网站

  • 2008年11月16日 10:37
  • 98KB
  • 下载

JavaScript DOM 编程艺术学习笔记(一):静态标记

JavaScriptDOM编程艺术学习笔记(一):静态标记对象
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Dom学习
举报原因:
原因补充:

(最多只允许输入30个字)