1、DOM的基本概念

DOM是文档对象模型，这种模型为树模型，文档是指标签文档；对象是指文档中每个元素；模型是指抽象化的东西

2、Windows对象操作

一、属性和方法

二、Window.open（"第一部分"，"第二部分"，第三部分"，"第四部分"）

三、Window.close():关闭当前窗口；

四、间隔与延迟

间隔执行一段代码（函数）：Window.setInterval("要执行的代码",间隔的毫秒数);

清除间隔执行：Window.clearInterval(间隔的id);循环一次之后用来清除间隔执行的代码；

延迟一段时间执行某一段代码（函数）：window.setTimeout("要执行的代码",延迟的毫秒数);

清除延迟：window.clearTimeout(延迟的id);清除setTimeout；

五、调整页面

六、模态对话框和非模态对话框

3、Windows.history对象

4、Windows.location对象

5、Windows.status对象

6、Windows.document对象  ☆

一、找到元素

二、操作元素

1.非表单元素：

1）获取内容

2）设置内容

2.表单元素

1）获取内容

2）设置内容

3.一个小知识点：

三、操作属性

四、操作样式

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

源代码

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

<link href="切换样式表.css" rel="stylesheet" type="text/css" />

</head>

<body bgcolor="#66FF99">

<div id="tuijian" style="background-image:url(aony.png);">

<div class="pages" id="p1" onclick="dodo(-1)"></div>

<div class="pages" id="p2" onclick="dodo(1)"></div>

</div>

</body>

</html>

<script language="javascript">

var jpg=new Array();

jpg[0]="url(aony.png)";

jpg[1]="url(bdec.png)";

jpg[2]="url(nkss.jpg)";

var tjimg=document.getElementById("tuijian");

var xb=0;

var n=0;

function huan()

{

    xb++;

    if(xb==jpg.length)

    {

        xb=0;

    }

    tjimg.style.backgroundImage=jpg[xb];

    n=0;

    if(n==0)

    {

        var id=window.setTimeout("huan()",2000);

    }

}

function dodo(m)

{

    n=1;

    xb=xb+m;

    if(xb<0)

    {

        xb=jpg.length-1;

    }

    else if(xb>=jpg.length)

    {

        xb=0;

    }

    tjimg.style.backgroundImage=jpg[xb];

}

window.setTimeout("huan()",1000);

</script>

CSS样式表

@charset "utf-8";

/* CSS Document */

*

{

    margin:0px auto;

    padding:0px;

}

#tuijian

{

    width:270px;

    height:270px;

    background-repeat:no-repeat;

    background-position:center;

}

.pages

{

    top:250px;

    background-position:center;

    background-repeat:no-repeat;

    opacity:0.4;

    width:60px;

    height:60px;

}

#p1

{

    background-image:url(left2.png);

    float:left;

    margin:150px 0px 0px 10px;

}

#p2

{

    background-image:url(right2.png);

    float:right;

    margin:150px 10px 0px 0px;

}

JavaScrip的DOM操作的更多相关文章

  1. JavaScrip的DOM操作（13号讲）

    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型,文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西 2.Windows对象操作 一.属性和方法 二.Window.open(& ...

  2. jQuery学习之路（2）-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

  3. 从DOM操作看Vue&React的前端组件化，顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

  4. 摆脱DOM操作，从TodoMVC看angularJS

    取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...

  5. 前端页面卡顿？或是DOM操作惹的祸，需优化代码

    文档对象模型(DOM)是一个独立 于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaSc ...

  6. webform（九）——JQuery基础（选择器、事件、DOM操作）

    JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选 ...

  7. HTML 学习笔记 JQuery（DOM 操作）

    一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...

  8. dom操作导致超级卡顿。。。

    var i=0;j=30;setinterval(function(){ document.getElementId(idname).style.top=j+'px'; i<3?i++:i=0; ...

  9. php中通过DOM操作XML

    DOM文档在js里早就接触过,知道DOM不但可以操作html文档,还可以操作XHTML,XML等文档,有着极强的通用性,下面我们通过两个小例子,看看在PHP中是如何用DOM操作XML文档的,和js中差 ...

随机推荐

  1. Codeforces Round #379 (Div. 2) E. Anton and Tree 缩点 直径

    E. Anton and Tree 题目连接: http://codeforces.com/contest/734/problem/E Description Anton is growing a t ...

  2. Swift中对C语言接口缓存的使用以及数组、字符串转为指针类型的方法

    由于Swift编程语言属于上层编程语言,而Swift中由于为了低层的高性能计算接口,所以往往需要C语言中的指针类型,由此,在Swift编程语言刚诞生的时候就有了UnsafePointer与Unsafe ...

  3. windows7实现打印机共享的方法

    windows7实现打印机共享的方法和windows xp差不多,就是在下图当中的设置: 具体方法请参照:http://jingyan.baidu.com/article/6d704a13e00a21 ...

  4. ADT公司G729 方案指标

    ADT公司G729 方案指标 G.729 Voice Compression Algorithm and its many annexes G.729 is used in wireless voic ...

  5. 画六边形-mat

    %% theta = linspace(0,2*pi,7); D=2; %边长 X=1; %中心横坐标 Y=2; %中心纵坐标 plot(D*cos(theta)+X,D*sin(theta) + Y ...

  6. Asp.net Core WebApi 全局异常类

    通过全局异常类,所有程序中遇到的错误都会被拦截,并友好的返回结果. 1.自定义一个全局异常处理类中间件 using Microsoft.AspNetCore.Http; using Newtonsof ...

  7. Photoshop CS6 for Mac简体中文正式 完美破解版 支持Retina屏

    Photoshop CS6 MAC 中文版破解版 支持Retina屏 目前世界上“最好的化妆品”是一款叫做PhotoShop的产品,它可以帮你去除所有你不满意的地方.上周末,这款最好的化妆品推出了第十 ...

  8. Target runtime com.genuitec.runtime.generic.jee50 is not defined

    导入别人的工程,发现报错Target runtime com.genuitec.runtime.generic.jee50 is not defined   解决方法:1. 找到工程目录的.setti ...

  9. 【网络编程】——windows socket 编程

    测试demo #include <winsock2.h> #include <stdio.h> #include <string.h> #include <s ...

  10. DataInputStream类和RandomAccessFile类的使用方法

    // DataInputStream类实现了DataInput接口,要想从文件中读入二进制数据, // 你需要将DataInputStream与某个字节源相结合,例如FileInputStream / ...