首页 > 代码库 > Window.document对象

Window.document对象

2024-08-18 13:17:03   220人阅读

一、找到元素：     

docunment.getElementById("id")；                      根据id找，最多找一个；     

var a =docunment.getElementById("id");             将找到的元素放在变量中；     

docunment.getElementsByName("name")；          根据name找，找出来的是数组；     

docunment.getElementsByTagName("name")；     根据标签名找，找出来的是数组；     

docunment.getElementsByClassName("name")     根据classname找，找出来的是数组；

二、操作内容：

 1. 非表单元素：

1）获取内容：

alert(a.innerHTML);          标签里的html代码和文字都获取了，标签里面的所有内容。

alert(a.innerText);            只取里面的文字     

alert(a.outerHTML);          包括标签本身的内容（简单了解）

2）设置内容：

a.innerHTML = "<font color=red >hello world </font>";

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

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

2. 表单元素：

1）获取内容，有两种获取方式：

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>；

2）设置内容： t.value="http://www.mamicode.com/内容改变"；

3. 一个小知识点：

<a href="http://www.baidu.com" onclick ="return false">转向百度</a> ；

加了return flase则不会跳转，默认是return true会跳转。按钮也一样，如果按钮中设置return flase 则不会进行提交，利用这个可以对提交跳转进行控制。

三、操作属性

首先利用元素的ID找到该元素，存于一个变量中：

var a = document.getElementById("id");

然后可以对该元素的属性进行操作：

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

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

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

四、操作样式

首先利用元素的ID找到该元素，存于一个变量中：

var a = document.getElementById("id")；

然后可以对该元素的属性进行操作：

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

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

document.body.style.backgroundColor="颜色"； 整个窗口的背景色。

操作样式的class：a.className="样式表中的classname" 操作一批样式

 

例题：

1、做一个问题，如果输入的答案正确则弹出正确，错误弹出错误；

2、同意按钮，倒计时10秒，同意按钮变为可提交的，这里用了操作属性：disable，来改变按钮的状态，当disabled=”disabled”时按钮不可用。

3、展示图片的自动和手动切换；

拓展：若要让图片轮播有过渡效果 则在放置大图的div标签里建立一个表格存放图片，用js控制表格的marginleft属性从而实现

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.datu
{
    width:800px;
    height:400px;
    margin:30px auto;
    overflow:hidden;
    position:relative;}
.jiantou
{
    width:50px;
    height:50px;
    top:170px;
    background-color:#000;
    opacity:0.7;
    line-height:50px;
    text-align:center;
    color:#FFF;
    cursor:pointer;
    position:absolute;}
table
{
    margin-left:0px;
    transition:0.7s;}
#jt1
{
    left:10px;}
#jt2
{
    right:10px;}
</style>
</head>

<body>

<form>
你是猪吗<input type="text" daan="是" id="wenti" /><br />
<input type="button" value="确定" onclick="duibi()" />
</form>
<input type="button" value="同意（10）" id="tongyi" disabled="disabled" />
<div class="datu" id="datu" onm ouseover="stp()" onm ouseout="goon()">

    <table id="ta" width="2400" height="400px" cellpadding="0" cellspacing="0" border="0">
        <tr height="400">
            <td width="800"><img src="1.jpg" width="800" /></td>
            <td width="800"><img src="2.jpg" width="800" /></td>
            <td><img src="3.jpg" width="800" /></td>
        </tr>
    </table>
   <div class="jiantou" id="jt1" onclick="huantu(-1)">←</div>
   <div class="jiantou" id="jt2" onclick="huantu(1)">→</div> 
</div>
</body>
</html>
<script>
function duibi()
{
    var A = document.getElementById("wenti");
    var a = A.value;
    var b = A.getAttribute("daan");
    if(a==b)
    {
        alert("你答对了");
    }
    else
    {
        alert("你真笨");
    }
}
var aa =10;
var ty = document.getElementById("tongyi");
function check()
{
    aa--;
    if(aa==0)
    {
        ty.removeAttribute("disabled");
        ty.value="同意";
        return;
    }
    else
    {
        ty.value="同意（"+aa+"）";    
        window.setTimeout("check()",1000);
    }
}
window.setTimeout("check()",1000);
/*var imgs =new Array;
imgs[0]="url(1.jpg)";
imgs[1]="url(2.jpg)";
imgs[2]="url(3.jpg)";
var n=0; var s=0;
var datu=document.getElementById("datu");
function lunbo()
{
    n++;
    if(n==3)
    {
        n=0;
    }
    datu.style.backgroundImage=imgs[n];    
    if(s==0)
    {
    window.setTimeout("lunbo()",3000);
    }
}
function huantu(m)
{
    s=1;
    n+=m
    if(n>=3)
    {
        n=0;
    }
    else if(n<0)
    {
        n=2;
    }
    datu.style.backgroundImage=imgs[n];
}
window.setTimeout("lunbo()",3000);*/
document.getElementById("ta").style.marginLeft="0px";
function huan()
{
    var ta = document.getElementById("ta");
    var a =parseInt(ta.style.marginLeft);
    if(a<=-1600)
    {
        ta.style.marginLeft="0px";
    }
    else
    {
        ta.style.marginLeft=(a-800)+"px";    
    }
    shi =window.setTimeout("huan()",3000);
}
var shi =window.setTimeout("huan()",3000);
function stp()
{
    window.clearTimeout(ss);
}
function goon()
{
    shi = window.setTimeout("huan()",3000);
}
function huantu(ad)
{
    var tu =document.getElementById("ta");
    var a=parseInt(tu.style.marginLeft);
    if(ad==-1)
    {
        if(a==0)
        {
            tu.style.marginLeft=-1600+"px";    
        }
        else
        {
            tu.style.marginLeft= (a+800)+"px";    
        }    
    }
    else
    {
        if(a==-1600)
        {
            tu.style.marginLeft=0+"px";    
        }
        else
        {
            tu.style.marginLeft= (a-800)+"px";    
        }        
    }
}
</script>

 

Window.document对象


联系
我们