JavaScript（DOM操作）（Window.document对象）

一、找到元素：

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="内容改变"；

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" 操作一批样式

例：展示图片的自动和手动切换；

若要让图片轮播有过渡效果则在放置大图的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>

*

{

    margin:0px;

    padding:0px;}

body

{

    min-width:900px;}

#datu

{

    width:800px;

    height:500px;

    position:relative;

    margin:30px auto;

    overflow:hidden;}

.datu

{

    width:1200px;

    height:500px;

    position:relative;

    margin:30px auto;

    overflow:hidden;}

#ta

{

    margin-left:0px;

    transition:.7s;}

.lr

{

    position:absolute;

    top:230px;

    width:32px;

    height:32px;

    z-index:;}

#left

{

    left:10px;

    }

#right

{

    right:10px;

}

.suolue

{

    height:60px;

    width:450px;

    position:relative;

    margin:auto;

    line-height:60px;}

.suolue1

{

    height:50px;

    width:80px;

    float:left;

    border: 4px solid #;

    background-size:contain;

    background-position:center;}

.u1

{

    list-style-type:none;}

.u1 li

{

    float:left;

    margin-left:2px;}

.u2

{

    list-style-type:none;}

.u2 li

{

    float:left;}

.fengqin

{

    height:500px;

    width:100px;

    background-repeat:no-repeat;

    background-position:center;

    transition:.7s;}

</style>

</head>

<body>

<div id="datu" onmouseover="pause()" onmouseout="conti()">

    <table id="ta" cellpadding="" cellspacing="">

        <tr height="">

            <td width=""><img src="Images/1.jpg" /></td>

            <td width=""><img src="Images/2.jpg" /></td>

            <td width=""><img src="Images/3.jpg" /></td>

            <td width=""><img src="Images/4.jpg" /></td>

            <td width=""><img src="Images/5.jpg" /></td>

        </tr>

    </table>

    <div class="lr" id="left" onclick="dong(-1)">

        <img src="Images/left.png" />

    </div>

    <div class="lr" id="right" onclick="dong(1)">

        <img src="Images/right.png" />

    </div>

</div>

<div class="suolue">

    <ul class="u1">

        <li><div class="suolue1" style="background-image:url(Images/1.jpg); border-color:red" id="tu1" onclick="xiaotu(1)"></div></li>

        <li><div class="suolue1" style="background-image:url(Images/2.jpg)" id="tu2" onclick="xiaotu(2)"></div></li>

        <li><div class="suolue1" style="background-image:url(Images/3.jpg)" id="tu3" onclick="xiaotu(3)"></div></li>

        <li><div class="suolue1" style="background-image:url(Images/4.jpg)" id="tu4" onclick="xiaotu(4)"></div></li>

        <li><div class="suolue1" style="background-image:url(Images/5.jpg)" id="tu5" onclick="xiaotu(5)"></div></li>

    </ul>

</div>

<div class="datu" onmouseover="stp()" onmouseout="goon()">

    <ul class="u2">

        <li><div class="fengqin" id="l1" onmouseover="fq(1)" style="width:800px; background-image:url(Images/1.jpg)"></div></li>

        <li><div class="fengqin" id="l2" onmouseover="fq(2)" style="background-image:url(Images/2.jpg)"></div></li>

        <li><div class="fengqin" id="l3" onmouseover="fq(3)" style="background-image:url(Images/3.jpg)"></div></li>

        <li><div class="fengqin" id="l4" onmouseover="fq(4)" style="background-image:url(Images/4.jpg)"></div></li>

        <li><div class="fengqin" id="l5" onmouseover="fq(5)" style="background-image:url(Images/5.jpg)"></div></li>

    </ul>

</div>

</body>

</html>

<script>

document.getElementById("ta").style.marginLeft="0px";

var biao=;

function huan()

{

    var tu =document.getElementById("ta");

    var a=parseInt(tu.style.marginLeft);

    if(a<=-)

    {

        tu.style.marginLeft="0px";

    }

    else

    {

        tu.style.marginLeft= (a-)+"px";

    }

    document.getElementById("tu1").style.borderColor="#666";

    document.getElementById("tu2").style.borderColor="#666";

    document.getElementById("tu3").style.borderColor="#666";

    document.getElementById("tu4").style.borderColor="#666";

    document.getElementById("tu5").style.borderColor="#666";

    var b = parseInt(document.getElementById("ta").style.marginLeft);

    if(b==)

    {

        document.getElementById("tu1").style.borderColor="red";

    }

    else if(b==-)

    {

        document.getElementById("tu2").style.borderColor="red";

    }

    else if(b==-)

    {

        document.getElementById("tu3").style.borderColor="red";

    }

    else if(b==-)

    {

        document.getElementById("tu4").style.borderColor="red";

    }

    else

    {

        document.getElementById("tu5").style.borderColor="red";

    }

    shi =window.setTimeout("huan()",);

}

var shi =window.setTimeout("huan()",);

function pause()

{

    window.clearTimeout(shi);

}

function conti()

{

    shi = window.setTimeout("huan()",);

}

function dong(ad)

{

    var tu =document.getElementById("ta");

    var a=parseInt(tu.style.marginLeft);

    if(ad==-)

    {

        if(a==)

        {

            tu.style.marginLeft=-+"px";

        }

        else

        {

            tu.style.marginLeft= (a+)+"px";

        }

    }

    else

    {

        if(a==-)

        {

            tu.style.marginLeft=+"px";

        }

        else

        {

            tu.style.marginLeft= (a-)+"px";

        }

    }

    document.getElementById("tu1").style.borderColor="#666";

    document.getElementById("tu2").style.borderColor="#666";

    document.getElementById("tu3").style.borderColor="#666";

    document.getElementById("tu4").style.borderColor="#666";

    document.getElementById("tu5").style.borderColor="#666";

    var b = parseInt(document.getElementById("ta").style.marginLeft);

    if(b==)

    {

        document.getElementById("tu1").style.borderColor="red";

    }

    else if(b==-)

    {

        document.getElementById("tu2").style.borderColor="red";

    }

    else if(b==-)

    {

        document.getElementById("tu3").style.borderColor="red";

    }

    else if(b==-)

    {

        document.getElementById("tu4").style.borderColor="red";

    }

    else

    {

        document.getElementById("tu5").style.borderColor="red";

    }

}

function xiaotu(x)

{

    document.getElementById("tu1").style.borderColor="#666";

    document.getElementById("tu2").style.borderColor="#666";

    document.getElementById("tu3").style.borderColor="#666";

    document.getElementById("tu4").style.borderColor="#666";

    document.getElementById("tu5").style.borderColor="#666";

    if(x==)

    {

        document.getElementById("ta").style.marginLeft="0px";

        document.getElementById("tu1").style.borderColor="red";

    }

    else if(x==)

    {

        document.getElementById("ta").style.marginLeft="-800px";

        document.getElementById("tu2").style.borderColor="red";

    }

    else if(x==)

    {

        document.getElementById("ta").style.marginLeft="-1600px";

        document.getElementById("tu3").style.borderColor="red";

    }

    else if(x==)

    {

        document.getElementById("ta").style.marginLeft="-2400px";

        document.getElementById("tu4").style.borderColor="red";

    }

    else

    {

        document.getElementById("ta").style.marginLeft="-3200px";

        document.getElementById("tu5").style.borderColor="red";

    }

}

function fengqin()

{

    var li1 =parseInt(document.getElementById("l1").style.width);

    var li2 =parseInt(document.getElementById("l2").style.width);

    var li3 =parseInt(document.getElementById("l3").style.width);

    var li4 =parseInt(document.getElementById("l4").style.width);

    var li5 =parseInt(document.getElementById("l5").style.width);

    document.getElementById("l1").style.width="100px";

    document.getElementById("l2").style.width="100px";

    document.getElementById("l3").style.width="100px";

    document.getElementById("l4").style.width="100px";

    document.getElementById("l5").style.width="100px";

    if(li1==)

    {

        document.getElementById("l2").style.width="800px";

    }

    else if(li2==)

    {

        document.getElementById("l3").style.width="800px";

    }

    else if(li3==)

    {

        document.getElementById("l4").style.width="800px";

    }

    else if(li4==)

    {

        document.getElementById("l5").style.width="800px";

    }

    else

    {

        document.getElementById("l1").style.width="800px";

    }

    change=window.setTimeout("fengqin()",);

}

function fq(c)

{

        document.getElementById("l1").style.width="100px";

        document.getElementById("l2").style.width="100px";

        document.getElementById("l3").style.width="100px";

        document.getElementById("l4").style.width="100px";

        document.getElementById("l5").style.width="100px";

    if(c==)

    {

        document.getElementById("l1").style.width="800px";

    }

    else if(c==)

    {

        document.getElementById("l2").style.width="800px";

    }

    else if(c==)

    {

        document.getElementById("l3").style.width="800px";

    }

    else if(c==)

    {

        document.getElementById("l4").style.width="800px";

    }

    else if(c==)

    {

        document.getElementById("l5").style.width="800px";

    }

}

var change=window.setTimeout("fengqin()",);

function stp()

{

    window.clearTimeout(change);

}

function goon()

{

    change=window.setTimeout("fengqin()",);

}

</script>

）

JavaScript（DOM操作）（Window.document对象）的更多相关文章

JavaScript——DOM操作——Window.document对象
一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunment.getElementById(&qu ...
JavaScript（四）——DOM操作——Window.document对象
一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunment.getElementById(&qu ...
HTML中 DOM操作的Document 对象详解(收藏)
Document 对象Document 对象代表整个HTML 文档,可用来访问页面中的所有元素.Document 对象是 Window 对象的一个部分,可通过 window.document 属性来访 ...
JavaScript的DOM操作。Window.document对象
间隔执行一段代码:window.setlnteval("需要执行的代码",间隔毫秒数) 例 : window.setlnteval("alert("你 ...
javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
javascript DOM 操作 attribute 和 property 的区别
javascript DOM 操作 attribute 和 property 的区别在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...
Window.document对象
1.Window.document对象一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunme ...
Window.document对象轮播练习
Window.document对象一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docun ...
HTML Window.document对象
1.Window.document对象一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunmen ...
JS中window.document对象
小知识点注:外面双引号,里面的双引号改为单引号: 在div里面行高设置和整个外面高度一样,才能用竖直居中,居中是行居中文本框取出来 ...

随机推荐

javascript 不响应可能是引用外部javascript时，引用顺序不对。
有相互引用关系的js,要最后执行的方法所在的js 先被引用. a.js 中有function1 b.js 中有function2 function1 () { function2(){} } 要 &l ...
如何收缩超大的SharePoint_Config数据库
前言在已经运行了2年多的SharePoint服务器上,发现SharePoint_Config的数据库文件越来越大,已经达到90几个GB,收缩可以减小20几个GB,但是一周以后又会恢复到90几个GB大 ...
Ubuntu 安装WPS
1.到官网下载deb安装包 http://community.wps.cn/download/ 2.安装 sudo dpkg -i wps-office_10.1.0.5672~a21_amd64.d ...
Web应用程序系统的多用户权限控制设计及实现-页面模块【9】
前五章均是从整体上讲述了Web应用程序的多用户权限控制实现流程,本章讲述Web权限管理系统的基本模块-页面模块.页面模块涉及到的数据表为页面表. 1.1页面域为了更规范和方便后期系统的二次开发和维护 ...
一组PHP可逆加密解密算法
对于大部分密码加密,我们可以采用md5.sha1等方法.可以有效防止数据泄露,但是这些方法仅适用于无需还原的数据加密. 对于需要还原的信息,则需要采用可逆的加密解密算法. 下面一组PHP函数是实现此加 ...
yii2 GridView 下拉搜索实现案例教程
作者:白狼出处:http://www.manks.top/article/yii2_gridview_dropdown_search本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章 ...
spring 和springMVC的区别
springmvc只是spring其中的一部分.spring 可以支持 hibernate ,ibatis ,JMS,JDBC 支持事务管理, 注解功能,表达式语言,测试springmvc 就是一个 ...
SQL Server 2012实施与管理实战指南(笔记)——Ch6连接的建立和问题排查
6.连接的建立和问题排查会话的建立分成2个部分: 1.连接,即找到这个实例 2.认证,告诉sql server谁要连接目录 6.连接的建立和问题排查 6.1协议选择和别名 6.1.1 服务器网络配 ...
Javascript之旅——第四站：parseInt中要注意的坑
前些天信用卡站点要接入一个新功能,不过还真比较坑爹,asp站点,大家都知道信用卡的背面是有一个有效期的,在对接银行中这个信息一定是要传给银行做数据校验,用户在语音输入信用卡有效期后,系统会做一个有效 ...
iOS OC和Swift进行互相调用
有时候 ,我们会涉及到双向混合编程,特别是OC和swift的互相引用. swift调用oc的方法: 1.桥接文件,一般是swift工程,在创建一个oc文件时,系统自动添加(不用改名,直接默认即可) 2 ...

JavaScript（DOM操作）（Window.document对象）

JavaScript（DOM操作）（Window.document对象）的更多相关文章

随机推荐

热门专题