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. JMeter教程01-下载和安装

    下载JMeter http://jmeter.apache.org/download_jmeter.cgi 以上是下载地址 更多课程 访问www.bamn.cn 北盟网校 下载后解压 apache-j ...

  2. 老王教您怎么做cass7.1 8.0 9.1所有系列的复制狗 加密狗 破解狗

    cass7.1 8.0 9.1所有系列的复制狗 加密狗 破解狗本来是出于好奇看到网上有这样的东西,学了下感觉挺简单的,如果你是cass的初学者想仅仅是想学习这个软件,不想花大价格购买正版的,这个是可以 ...

  3. 解决Windows Server2008 R2中IE开网页时弹出阻止框(Windows Server2008网页无法打开的问题)

    相信使用Windows Server2008的朋友都遇到过这种情况,用IE打开网站时会弹出“Internet Explorer增强安全配置正在阻止来自下列网站的此应用程序中的内容”的对话框.如下图所示 ...

  4. 【网络——Linux】——IPMI详细介绍【转】

    一.IPMI含义 智能平台管理接口(IPMI:Intelligent Platform Management Interface)是一项应用于服务器管理系统设计的标准,由Intel.HP.Dell和N ...

  5. iOS开发——项目实战总结&Block使用注意点浅析

    Block使用注意点浅析 1.在使用block前需要对block指针做判空处理. 不判空直接使用,一旦指针为空直接产生崩溃. if (!self.isOnlyNet) { if (succBlock ...

  6. 【转】Xamarin Forms 介绍

    特此声明,本篇博文转自:http://blog.csdn.net/kinfey/article/details/29621381 什么是 Xamarin Forms ? Xamarin Forms 是 ...

  7. 转 mv 管道符

    需求:想列出指定的内容并将其转移到新的目录中 通过使用mv和管道符有几种方法, 1.file=`ls pattern`;mv $file newdir 2.ls pattern|xargs -i mv ...

  8. git Please move or remove them before you can merge. 错误解决方案

    git pull 时 往往会遇到各种各样的问题 ,下面是常遇到的一种状况 Updating 7c9e086..936acacerror: The following untracked working ...

  9. 关于windows的service编程

    最近需要学习下windows的service编程框架,查了下msdn发现不知所云.于是谷歌之,发现了一个非常不错的文章,重点推荐讲的非常详细,深入,看完之后基本上就能很清楚windows的servic ...

  10. nginx url自动加斜杠的问题

    nginx url自动加斜杠问题及301重定向 时间:2016-02-04 15:14:28来源:网络 导读:nginx url自动加斜杠问题及301重定向,URL指向一个目录并且在最后没有包含斜杠, ...