JavaScript的DOM操作(一)

DOM:文档对象模型 --树模型
文档:标签文档,对象:文档中每个元素对象,模型:抽象化的东西

一:window:

属性(值或者子对象):
opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null,可以利用这个属性来关闭源窗口。

方法(函数):
事件(事先设置好的程序,被触发):

1.window.open("第一部分","第二部分","第三部分","第四部分");

特征参数:

第一部分:写要打开的页面地址
第二部分:打开的方式,_blank 是在新窗口打开
第三部分:控制打开的窗口,可以写多个,用空格隔开
              toolbar=no新打开的窗口无工具条
              menubar=no无菜单栏 status=no无状态栏
              width=100 height=100 宽度高度
              left=100 打开的窗口距离左边多少距离
              resizable=no窗口大小不可调
              scrollbars=yes 出现滚动条
              location=yes 有地址栏

返回值:新打开的窗口对象

2:最简单的打开窗口
window.open("http://www.baidu.com","_blank","toolbar=no");  在一个新窗口中打开百度。

3:打开窗口,并保存在一个变量中
var w= window.open();

4:只打开窗口一次,例子如下:

if(w==null)
{
w=window.open("http://www.baidu.com","_blank","toolbar=no");
}

这里用一个if语句,判断w的值是否为空,打开一个窗口之后w的值就不为空了,之后再点击鼠标调用此函数则不执行打开新窗口。

5:保存所有打开的窗口,将每个打开的窗口值存入一个数组之中。

function openW()
{
w[i++]=window.open();
}

6: close():关闭指定的窗口

window.close():关闭当前窗口
     w.close():关闭w窗口
     关闭多个子窗口:放在数组中的窗口:w[i].close();
     关闭打开当前窗口的源窗口
     window.opener.close();

7:综合实例

(1)只打开一个窗口,并且关闭子窗口

首先在body中定义两个div,用onclick="openW()" 或者onclick="closeW()"来设置为鼠标单击后触发,调用函数openW和closeW;

<div style="margin:10px;padding:10px;border:1px solid blue; cursor:pointer;float:left" onclick="openW()" >
打开一个窗口
</div>
<div style="margin:10px;padding:10px;border:1px solid blue; cursor:pointer;float:left" onclick="closeW()" >
关闭窗口
</div>

在JavaScript语句中写如下代码:

<script language="javascript">
var w;
function openW()
{
    if(w==null)
    {
    w=window.open("http://www.baidu.com","_blank","toolbar=no");
    }
}

function closeW()
{
    w.close();
}

</script>

效果如下图:

点击打开窗口,弹出了一个新的窗口,再次点击打开窗口由于w中的值不为空了,所以无法再打开一个窗口:

点击关闭窗口之后,则将子窗口关闭。

(2)打开一组窗口,点击关闭窗口的时候将全部的子窗口关掉

利用数组w存储每个打开的窗口,在关闭的时候用w[i]关掉所有的子窗口,在JavaScript语句中写如下代码:

var w = new Array();
var i=0;
function openW()
{ 

    w[i]=window.open("http://www.baidu.com","_blank","toolbar=no");
    i++;

}

function closeW()
{
    for(var n=0;n<w.length;n++)
    {
    w[n].close();
    }
}

打开了多个窗口:

点击关闭所有窗口,则一键关闭了所有打开的子窗口。

(3)在子窗口中关闭源窗口:

在子窗口的文件中定义两个函数,一个是关闭自己窗口,一个是关闭源窗口即上一级窗口,在body中用onclick设置为点击关闭当前窗口的时候调用c()函数,点击关闭打开当前窗口的源时候调用cc()函数:

function c()
{
    window.close();
}
function cc()
{
    window.opener.close();
}

效果如下图:

8:间隔和延迟:

window.setInterval("要执行的代码",间隔的毫秒数)
window.clearInterval(间隔的id); 循环一次之后用来清除隔几秒执行的代码

window.setTimeout("要执行的代码",延迟的毫秒数)
window.clearTimeout(延迟的id);清除setTimeout,一般延迟执行较为常用。

(1)间隔执行的例子,其作用是间隔5秒弹出三个窗口,再经过10秒将其关闭。

将window.setInterval("ok()",5000)用一个id来接收,将window.setInterval("cc()",10000)用id2来接收,在程序调用ok()的时候打开三个网页,之后用window.clearInterval(id);来清除id的循环,之后调用函数cc()来关闭三个窗口,之后也是清除:

var id,id2;
var sina,qq,xinhua
function cc()
{
    sina.close();
    qq.close();
    xinhua.close();
    window.clearInterval(id2);
}
function ok()
{
    sina = window.open("http://www.sina.com.cn","_blank","toolbar=no width=300 height=200 top=100 left=0");
    qq = window.open("http://www.qq.com","_blank","toolbar=no width=300 height=200 top = 100 left=500");
    xinhua = window.open("http://www.xinhuanet.com","_blank","toolbar=no width=300 height=200 top=300 left=200");

    window.clearInterval(id);

    id2 = window.setInterval("cc()",10000);
}
id = window.setInterval("ok()",5000);

(2)延迟执行的例子,其作用也是间隔5秒弹出三个窗口,再经过10秒将其关闭。

这里用了延迟执行就不用清除了,所以一般常用延迟执行。

function cc()
{
    sina.close();
    qq.close();
    xinhua.close();
}
function ok()
{
    sina = window.open("http://www.sina.com.cn","_blank","toolbar=no width=300 height=200 top=100 left=0");
    qq = window.open("http://www.qq.com","_blank","toolbar=no width=300 height=200 top = 100 left=500");
    xinhua = window.open("http://www.xinhuanet.com","_blank","toolbar=no width=300 height=200 top=300 left=200");

    window.setTimeout("cc()",10000);

}
window.setTimeout("ok()",5000);

(3)延迟执行,每隔5秒打开三个窗口,打开4次之后停止。

用的是在循环里面调用自己,这种使用方式要注意条件的设置,否则可能会导致窗口一直在打开,最后死机。

var sina,qq,xinhua;
var i=0;
var id;
function cc()
{
    sina.close();
    qq.close();
    xinhua.close();
}
function ok()
{
    sina = window.open("http://www.sina.com.cn","_blank","toolbar=no width=300 height=200 top=100 left=0");
    qq = window.open("http://www.qq.com","_blank","toolbar=no width=300 height=200 top = 100 left=500");
    xinhua = window.open("http://www.xinhuanet.com","_blank","toolbar=no width=300 height=200 top=300 left=200");

    i++;
    if(i >= 4)
    {
        return;
    }
    else
    {
        //window.setTimeout("cc()",10000);
        id = window.setTimeout("ok()",5000);
    }

}
window.setTimeout("ok()",5000);

 

时间: 2024-10-11 19:51:23

JavaScript的DOM操作(一)的相关文章

Python之路day13 web 前端(JavaScript,DOM操作)

参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容回顾: 1. HTML标签 html/head/body/ input div,span a p br span table > tr行 th表头列 td表头列 h form> action method enctype=;;; select option input系列: text passwo

第一百一十六节,JavaScript,DOM操作样式

JavaScript,DOM操作样式 一.操作样式 CSS作为(X)HTML的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的CSS能力.CSS的能力和DOM级别密切相关,所以我们有必要检测当前浏览器支持CSS能力的级别. DOM1级实现了最基本的文档处理,DOM2和DOM3在这个基础上增加了更多的交互能力,这里我们主要探讨CSS,DOM2增加了CSS编程访问方式和改变CSS样式信息. DOM一致性检测 功能 版本号 说明 Core 1.0.2.0.3.0 基本的DOM,用于表现文档

JS - JavaScript和DOM操作

1.HTML元素标记 - 超文本标记语言 决定你网页中有哪些东西 2.CSS - 样式表 决定你网页中的这些元素标记的样式和布局 3.JS - JavaScript 决定你网页中的这些元素标记的功能和特效 3.1.onclick:单机 ondblclick:双击 function 执行函数 alert 显示框只有确定 confirm 显示框有确定和取消 prompt 显示框下面填写内容 var 万能变量 <body> <a onclick="a()"></

JavaScript的DOM操作

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方法(函数):事件(事先设置好的程序,被触发).

JavaScript的DOM操作(2)

补充:   回车符\r和换行符\n的区别:\r 相当于enter,是段落与段落之间的区别, \n 相当于shift+enter,是行与行之间距离,比较小 几种window操作方法: 1.获取当前窗口大小并打印: var height=window.innerHeight;var width = window.innerWidth; document.write("<br/>"+"height"+height+",width"+widt

课堂笔记--------JavaScript 的DOM操作

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方法(函数):事件(事先设置好的程序,被触发).

HTML JavaScript的DOM操作

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方法(函数):事件(事先设置好的程序,被触发).

HTML-教案-JavaScript的DOM操作

1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Window对象操作 一.属性和方法: 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. dialogArgument:对话框返回值. 子对象:history,location,document,status,menubar,toolbar等. 方法(函数):事件(事先设置好的程序,被触发).

网页、JavaScript 的DOM操作

HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树.  Windows 对象操作 window.open() - 打开新窗口 window.close() - 关闭当前窗口 1.Windows.open("第一部分","第二部分","第三部分","第四部分") 第一部分:写页面地址      url 第二部分

JavaScript 的DOM操作

HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. Windows 对象操作 window.open() - 打开新窗口 window.close() - 关闭当前窗口 1.Windows.open("第一部分","第二部分","第三部分","第四部分") 第一部分:写页面地址      url 第二部分: