JavaScript的DOM操作（二）

浏览数：19 / 时间：2015年06月08日

一：window.history对象

历史记录，通过历史记录可以操作页面前进或者后退

window.history.back();后退

window.history.forward();前进

window.history.go(n); n是正数代表前进n个页面，n是负数代表后退n个页面。

二：window.location对象

location地址栏

var s = window.location.href;获取当前页面的地址

window.location.href="http://www.baidu.com";修改页面地址，会跳转页面

window.location.hostname: 主机名，域名，网站名，可用变量接收

window.location.pathname: 路径名，可用变量接收

三：window.status对象

status状态栏，可以给状态栏添加要显示的文字

window.status="要在状态栏显示的内容"；设置状态栏文字

例子：在状态栏显示：“向前走 就这么走”，并且让这写文字由左向右移动：

function s()
{
    window.status = "向前走 就这么走";
    window.setTimeout("run()",100);
}
function run()
{
    if(window.status.length>=60)
    {
        window.status = "向前走 就这么走";
    }
    else
    {
        window.status = " "+window.status;
    }
    window.setTimeout("run()",100);
    
}

效果如下图：

四：window.document对象

1. 找到元素

docunment.getElementById("id")；根据id找，最多找一个
var a =docunment.getElementById("id");
docunment.getElementByName("name")；根据name找，找出来的是数组
docunment.getElementByTagName("name")；根据标签名找，找出来的是数组
docunment.getElementByClassName("name") 根据classname找，找出来的是数组

2.操作内容

（1）非表单元素：

获取内容：alert(a.innerHTML);标签里的html代码和文字都获取了

如：body中有这么一个div：

<div id="me"><b>试试吧</b></div>

在script中用innerHTML获取div中的内容：

var a= document.getElementById("me");
alert(a.innerHTML);

结果如下图：


alert(a.innerText);只取里面的文字
alert(a.outHTML);包括标签本身的内容（简单了解）

设置内容：a.innerHTML = "<font color=red >hello world </font>";

如果用设置内容代码结果如下，div中的内容被替换了：


a.innerText会将赋的东西原样呈现

清空内容：赋值个空字符串

（2）表单元素：

两种方式获取：

var t = document.f1.t1; form表单ID为f1里面的ID为t1的input
var t = document.getElementById("id"); 直接用ID获取

alert(t.value); 获取input中的value值
alert(t.innerHTML); 获取<textarea> 这里的值 </textarea>

t.value="内容改变"；

*****一个小知识点：

<a href="www.baidu.com" onclick ="return flase">转向百度</a> 加了return flase则不会跳转，return true则会跳转

按钮也一样，如果按钮中return flase 则不会进行提交。

*****

例子：输入姓名为空或者是空格的话return一个flase，点提交的时候不提交内容，输入的内容不为空才提交：

前一段是压缩空格：

function   Trim(m){   
while((m.length>0)&&(m.charAt(0)==‘ ‘))   
m   =   m.substring(1, m.length);   
while((m.length>0)&&(m.charAt(m.length-1)==‘ ‘))   
m = m.substring(0, m.length-1);   
return m;   
}
function checkName()
{
    var a = document.getElementById("t1");
    a.value = Trim(a.value);
    if(a.value.length == 0)
    {
        alert("姓名不能为空");
        return false;
    }
    else
    {
        return true;
    }
}


 


 




测试结果如下，没有输入内容或者输入空格时：




输入姓名的时候提交，看地址栏里面已经提交上了名字：




3.操作属性


找到按钮的ID，var a = document.getElementById("id");


a.setAttribute("属性名","属性值"); 设置一个属性，添加或更改都可以：disabled


a.getAttribute("属性名")；获取属性的值


a.removeAttribute("属性名")；移除一个属性


（1）例子：做一个问题，如果输入的答案正确则弹出正确，错误弹出错误；


这里在text里面写了一个daan属性，里面存了答案的值，点击检查答案的时候cheak输入的内容和答案是否一样：


body中的代码：




<form>中华民国成立于哪一年？
<input type="text" daan="1912年" value="" id="t1" name="t1" />
<input type="button" onclick="check()" id="t2" name="t2" value="检查答案" />
</form>




Script中的代码：




function check()
{
    var a=document.getElementById("t1");
    var a1=a.value;
    var a2=a.getAttribute("daan");
    if(a1==a2)
    {
        alert("恭喜你答对了！");
    }
    else
    {
        alert("笨蛋！");
    }
}




正确时的结果如下：





（2）例子：同意按钮，倒计时10秒，同意按钮变为可提交的。


这里用了操作属性：disable，来改变按钮的状态


body中的代码：




<form>
<input type="submit" id="b1" name="b1" value="同意（9）" disabled="disabled" />
</form>




Script中的代码：




var n=10;
var a= document.getElementById("b1");
function bian()
{
    n--;
    if(n==0)
    {
        a.removeAttribute("disabled");
        a.value="同意";
        return;
    }
    else
    {
        a.value= "同意（"+n+"）";
        window.setTimeout("bian()",1000);
    }
}
window.setTimeout("bian()",1000);




结果如下图：




4.操作样式


找到ID，var a = document.getElementById("id");


a.style.样式="" ; 操作此ID样式的属性


样式为CSS中的样式，所有的样式都可以用代码进行操作


document.body.stye.backgroundColor="颜色"; 整个窗口的背景色


 


（1）例子：换窗口的背图片，每隔三秒换一次，循环不止；点上一张、下一张可以切换，这时停止了自动转换。


body的代码：




<body style=" background-image:url(image/1.jpg);">
<iframe id="ff" src="preload.html" width="0" height="0" frameborder="0"></iframe>
<div class="pages" id="p1" onclick="dodo(-1)">前一张</div>
<div class="pages" id="p2" onclick="dodo(1)">后一张</div>
</body>




样式表：




<style type="text/css">
.pages
{
    border:1px solid gray;
    padding:15px 15px 15px 15px;
    position:fixed;
    top:200px;
    text-align:center;
    color:white;
    background-color:#C3C;
    font-weight:bold;
    
}
#p1
{
    left:10px;
}
#p2
{
    right:10px;
}
</style>




script中的代码，用数组来存储图片的地址，每隔3秒调用一次huan()函数来换成下一张：




var jpg =new Array();
jpg[0]="url(image/1.jpg)";
jpg[1]="url(image/2.jpg)";
jpg[2]="url(image/3.jpg)";
jpg[3]="url(image/4.jpg)";
jpg[4]="url(image/5.jpg)";
jpg[5]="url(image/6.jpg)";
var xb=0;
var n=0;
function huan()
{
    xb++;
    if(xb == jpg.length)
    {
        xb=0;
    }
    
    document.body.style.backgroundImage=jpg[xb];
    if(n==0)
    {
    var id = window.setTimeout("huan()",3000);
    }
    
    
}
function dodo(m)
{   
    n=1;
    xb = xb+m;
    if(xb < 0)
    {
        xb = jpg.length-1;
    }
    else if(xb >= jpg.length)
    {
        xb = 0;
    }
    document.body.style.backgroundImage=jpg[xb];
}
window.setTimeout("huan()",3000);




效果图如下：




 


（2）例子：一系列菜单，点击菜单上的一项展开里面的内容，再次点击关闭：


这里是利用了div的display样式，原设置display为none隐藏，点击的时候将display设置为block显示出来，再次点击设置为none隐藏。


body中的代码：点击哪一个将哪一个下面div的ID传到dodo()函数里面进行操作。




<div id="main">
    <div class="topic" onclick="dodo(‘l1‘)">工作计划管理</div>
    <div class="list" id="l1"> </div>
    <div class="topic" onclick="dodo(‘l2‘)">个人资料管理</div>
    <div class="list" id="l2"></div>
    <div class="topic" onclick="dodo(‘l3‘)">部门外联管理</div>
    <div class="list" id="l3"></div>
    <div class="topic" onclick="dodo(‘l4‘)">系统设置</div>
    <div class="list" id="l4"></div>
</div>




CSS代码：




<style type="text/css">
#main
{
    width:200px;
    background-color:#CCF;
}
.topic
{
    font-weight:bold;
    text-align:center;
    background-color:#C39;
    color:white;
    font-size:14px;
    padding:5px 0px 5px 0px;
    margin-top:1px;
    
}
.list
{
    border:1px solid navy;
    height:200px;
    background-color:#CFF;
    display:none;
}
</style>




Script中的代码：




function dodo(listid)
{

    var dd = document.getElementById(listid);
    if(dd.style.display != "block")
    {
        dd.style.display="block";
    }
    else
    {
        dd.style.display="none";
    }
    
}




效果如下：




如果要设置只能打开一个的话Script中的代码变为如下即可：




function dodo(listid)
{
       var dd = document.getElementById(listid);
    var ll = document.getElementsByClassName("list");
    for(var i=0;i<ll.length;i++)
    {
        ll[i].style.display="none";
    }
    
    dd.style.display="block";
    
}




 


          

            

              
              郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
            

          


          


          

            标签： 
            编程语言
            
            Java
            
            C
            
            C#
            
            Javascript
            
            js
            
            Python
            
            Ruby
            
            Spring
            
            程序
            
            VB
            
          


          

            

              
相关文章

              
    
                
              

            

            

              
随机文章

              
            

          



          

            

              
您可能还喜欢

              
    
                
              

            


            

              
您可能还喜欢