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操作（13号讲）的更多相关文章

  1. JavaScrip的DOM操作

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

  2. 课堂所讲整理：HTML--7JavaScript的DOM操作

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

  3. Web前端开发最佳实践（13）：前端页面卡顿？可能是DOM操作惹的祸，你需要优化代码

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

  4. jQuery简单介绍及基本用法(选择器&DOM操作)

    简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“write Le ...

  5. 前端性能优化--为什么DOM操作慢？ 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  6. 前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息

    小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...

  7. js的dom操作（整理）（转）

    js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...

  8. js的DOM操作整理（整理）

    js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...

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

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

随机推荐

  1. error: command 'gcc' failed with exit status 1 的解决办法

    yum install gcc python-devel 之前yum install gcc* 了 所以没成功. wget http://prdownloads.sourceforge.net/doc ...

  2. Logical Databases逻辑数据库

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  3. FZU 2221 RunningMan（跑男）

    Problem Description 题目描述 ZB loves watching RunningMan! There's a game in RunningMan called 100 vs 10 ...

  4. Linux命令工具 top详解

    Linux命令工具 top详解 top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.top是一个动态显示过程,即可以通过用户按键来不 ...

  5. RedHat安装DB2详细步骤(附卸载、备份恢复步骤)

    1.创建用户组和用户 说明: 步骤1 以root用户登录需要安装DB2的服务器. 步骤2 创建用户组和用户. # su -root # groupdel db2grp # groupdel db2fg ...

  6. iOS - Swift String 字符串

    前言 public struct String public class NSString : NSObject, NSCopying, NSMutableCopying, NSSecureCodin ...

  7. iOS - UITextField

    前言 NS_CLASS_AVAILABLE_IOS(2_0) @interface UITextField : UIControl <UITextInput, NSCoding> @ava ...

  8. 前端代码新写法——Zen Coding

    是不是还在为html繁琐的标签写法而苦恼? 是不是还在枯燥的写尖括号? Zen Coding的到来将让前端编码不在繁琐.不再拘泥html的尖括号和一堆一堆的标签. 先看看ZenCoding的效果图. ...

  9. Python IDE专用编辑器PyCharm下载及配置安装过程（Ubuntu环境）

    这几天在折腾Python环境,显示把笔记本安装Ubuntu Linux环境系统,然后基本的Python环境都安装完毕之后需要安装传说中在其平台中最好的代码编辑和管理工具PyCharm,于是就根据网上的 ...

  10. 本地存储 localStorage/sessionStorage/cookie

    cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在 ...