JS 之（二）DOM属性操作，DOM事件操作，BOM操作

最新推荐文章于 2024-09-22 11:17:00 发布

znyyjk

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量870

点赞数

分类专栏： JS 笔记文章标签： javascript

JS 笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

DOM

介绍

dom: document object model 文档对象模型
DOM技术：
php里边有：php语言与 xml/html标签之间沟通的一个桥梁。
javascript里边有：js语言与 html/xml标签之间沟通的一个桥梁。

为了方便javascript语言通过dom操作html比较方便，
把html标签的内容划分为各种节点：

文档节点(document)
元素节点
文本节点
属性节点
注释节点

dom就是学习利用javascript如何实现对html标签内容的增、删、改、查等操作

<html>
<head>
    <meta charset='utf-8' />
    <title>dom操作</title>
</head>
<body>
    <h2>2016/09/12</h2>
    <input name=username type=text />
    <!--在js里通过dom操作html-->
</body>
</html>

元素节点获取

具体操作方法：
document.getElementById(id属性值);
document.getElementsByTagName(tag标签名称);
document.getElementsByName(name属性值);不推荐，有浏览器兼容问题,通常应用在form表单里边。

<html>
<head>
    <meta charset='utf-8' />
    <title>dom操作</title>
</head>
<body>
    <h2>获取元素节点</h2>
    <input id='username' type='text' value='tom' />
    <input id='useremail' type='text' value='tom@163.com' />

</body>
</html>
<script type="text/javascript">
    //document.getElementById()获取元素节点
    var name = document.getElementById('username');
    console.log(name);
    var email = document.getElementById('useremail');
    console.log(email);
</script>

<html>
<head>
    <meta charset='utf-8' />
    <title>dom操作</title>
</head>
<body>
    <h2>获取元素节点</h2>
    <input id='username' type='text' value='tom' />
    <input id='useremail' type='text' value='tom@163.com' />

</body>
</html>
<script type="text/javascript">
    //document.getElementsByTagName()获取元素节点
    var hh = document.getElementsByTagName('h2');
    //通过document.getElementsByTagName 方式得到的是元素节点的“集合/数组”，即使只有一个节点也一样
    console.log(hh[0]);

    var il = document.getElementsByTagName('input');
    console.log(il);
    //访问具体节点的两种方式
    console.log(il[1]);
    console.log(il.item(0));
</script>

<html>
<head>
    <meta charset='utf-8' />
    <title>dom操作</title>
</head>
<body>
    <h2>获取元素节点</h2>
    <input name='username' type='text' value='tom' />
    <input name='useremail' type='text' value='tom@163.com' />

</body>
</html>
<script type="text/javascript"> 
    //浏览器兼容有问题，不推荐使用
    //通过document.getElementsByName 方式得到的是元素节点的“集合/数组”，即使只有一个节点也一样
    var n = document.getElementsByName('username');
    console.log(n);
    console.log(n[0]);
    console.log(n.item(0));
</script>

文本节点获取

<div>hello</div>
需要借助div元素节点再获得其内部的文本节点.
var dvnode = document.getElementsByTagName(‘div’)[0];
dvnode.firstChild; //(或调用lastChild)获得元素div内部的第一个子节点对象

<html>
<head>
    <meta charset='utf-8' />
    <title>dom操作</title>
</head>
<body>
    <h2>获取元素节点</h2>
    <input name='username' type='text' value='tom' />
    <input name='useremail' type='text' value='tom@163.com' />
    <div>hello</div>
</body>
</html>
<script type="text/javascript"> 
    //获取div内部的文本节点
    var dv = document.getElementsByTagName('div')[0];
    console.log(dv);
    //fistChild 获得第一个子节点/lastChild 获得最后一个子节点
    console.log(dv.firstChild);//获得第一个div节点的子节点，即文本节点
    console.log(dv.lastChild.wholeText);//获得文本节点中的文本信息
</script>

兄弟节点

firstChild、lastChild:父节点获得第一个/最后一个子节点
nextSibling:获得下个兄弟节点
previousSibling:获得上个兄弟节点
childNodes:父节点获得内部全部的子节点信息

以上属性在主流浏览器(火狐firefox、chrome、safari、opera)中会给考虑空白节点。在IE浏览器中不考虑。

<html>
<head>
    <meta charset='utf-8' />
    <title>dom操作</title>
</head>
<body>
    <h2>兄弟节点获取</h2>
    <ul>
        <li>red</li>
        <li>yellow</li>
        <li>green</li>
    </ul>
</body>
</html>
<script type="text/javascript"> 
    //chileNodes nextSibling previousSibling firstChild lastChild
    var ull = document.getElementsByTagName('ul').item(0);//获取第一个ul节点
    console.log(ull.childNodes);//[text, li, text, li, text, li, text] 获取ul节点内所有子节点[空白, li, 空白, li, 空白, li, 空白]

    //集合/数组.length 获取元素个数
    console.log(ull.childNodes.length);//7

    console.log(ull.firstChild);//#text
    console.log(ull.firstChild.nextSibling);//<li>red</li>

    console.log(ull.lastChild);//#text
    console.log(ull.lastChild.previousSibling);//<li>green</li>
</script>

父节点

节点.parentNode;

<html>
<head>
    <meta charset='utf-8' />
    <title>dom操作</title>
</head>
<body>
    <h2>父节点获取</h2>
    <ul>
        <li>red</li>
        <li>yellow</li>
        <li>green</li>
    </ul>
</body>
</html>
<script type="text/javascript"> 
    //
    var yl = document.getElementsByTagName('li')[1];
    console.log(yl);//<li>yellow</li>

    console.log(yl.parentNode);//<ul>...
    console.log(yl.parentNode.parentNode);//<body>...
    console.log(yl.parentNode.parentNode.parentNode);//<html>...
    console.log(yl.parentNode.parentNode.parentNode.parentNode);//#document
    console.log(yl.parentNode.parentNode.parentNode.parentNode.parentNode);//null
</script>

属性值操作

① 获取属性值
itnode.属性名称; //只能操作w3c规定的属性
itnode.getAttribute(属性名称); //规定的和自定义的都可以获取
② 设置属性值
itnode.属性名称 = 值; //只能操作w3c规定的属性
itnode.setAttribute(名称，值); //规定的和自定义的都可以设置

<html>
<head>
<meta charset='utf-8' />
</head>
<body>
    <h2>属性值操作</h2>
    <a href='http://www.baidu.com' addr='beijing' target='_blank' class='apple'>百度</a>
    <input type='button' value='修改属性' onclick='fl()'>
</body>
</html>
<script type="text/javascript"> 
    //
    var bai = document.getElementsByTagName('a').item(0);
    //获取属性信息
    console.log(bai.href);//http://www.baidu.com/
    console.log(bai.addr);//undefined
    console.log(bai.target);//_blank
    console.log(bai.className);//apple className是class的一个别名，不可直接访问class属性
    console.log(bai.getAttribute('href'));
    console.log(bai.getAttribute('addr'));//beijing
    console.log(bai.getAttribute('target'));

    //设置属性信息
    function fl(){
        bai.href = 'http://www.163.com';
        bai.addr = 'baoding';
        //属性修改，有就更新，没有就创建
        bai.setAttribute('href','http://www.sina.com');
        bai.setAttribute('height','170');
    }
</script>

属性节点获取

var attrlist = itnode.attributes; //返回对应节点内部的全部属性信息，数组列表形式返回
attrlist.属性名称; //获得具体属性节点

获得节点类型nodeType：

1——> 元素节点
2——> 属性节点
3——> 文本节点
9——> 文档节点

<html>
<head>
<meta charset='utf-8' />
</head>
<body>
    <h2>属性节点获取</h2>
    <input type='text' name='username' id='username' value='tom' class='c1' />
    <input type='button' value='修改属性' onclick='fl()' />
</body>
</html>
<script type="text/javascript"> 
    //
    var n = document.getElementsByTagName('input')[0];
    //var n = document.getElementById('username');
    var attrs = n.attributes;//把n元素节点对象的属性以数组形式返回
    console.log(attrs);//NamedNodeMap {0: type, 1: name, 2: id, 3: value, 4: class}

    console.log(attrs.id);//id='username' 获得id属性节点
    console.log(attrs.class);//class='c1' 获得class属性节点
    console.log(attrs.class.nodeType);//2 属性节点
    console.log(n.nodeType);//1 元素节点
</script>

节点创建和追加

节点创建
元素节点：document.createElement(tag标签名称);
文本节点：document.createTextNode(文本内容);
属性设置：node.setAttribute(名称，值);
节点追加：
父节点.appendChild(子节点);
父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边
父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点

<html>
<head>
<meta charset='utf-8' />
</head>
<body>
    <h2>节点创建和追加</h2>

</body>
</html>
<script type="text/javascript"> 
    //
    var cl = ['red','blue','green'];
    var clm = ['热情','冷静','生机'];

    //创建各种节点
    var ull = document.createElement('ul');//创建ul节点
    for(var k in cl){
        var lii = document.createElement('li');//创建li节点
        lii.setAttribute('mean', clm[k]);//设置li节点的属性
        var txt = document.createTextNode(cl[k]);//创建文本节点

        //节点追加
        lii.appendChild(txt);//在li节点追加文本节点
        ull.appendChild(lii);//在ul节点追加li节点
    }
    //document.getElementsByTagName('body')[0].appendChild(ull);
    document.body.appendChild(ull);//两种方法均可
</script>

<html>
<head>
<meta charset='utf-8' />
</head>
<body>
    <h2>已有节点追加</h2>
    <ul>
        <li mean="热情">red</li>
        <li mean="冷静">blue</li>
        <li mean="生机">green</li>
    </ul>
    <ul>
        <li mean="韩梅梅">hanmeimei</li>
    </ul>
</body>
</html>
<script type="text/javascript"> 
    /*
        给第二个ul追加页面已有节点：blue被追加进来了
        注意：被追加节点要发生物理位置移动（从第一个ul中消失，追加到第二个ul中，节点个数是固定的，只有一个）
    */
    var bl = document.getElementsByTagName('li')[1];
    var sul = document.getElementsByTagName('ul')[1];

    sul.appendChild(bl);
</script>

<html>
<head>
<meta charset='utf-8' />
</head>
<body>
    <h2>已有节点追加</h2>
    <ul>
        <li mean="热情">red</li>
        <li mean="冷静">blue</li>
        <li mean="生机">green</li>
    </ul>
    <ul>
        <li mean="韩梅梅">hanmeimei</li>
    </ul>
</body>
</html>
<script type="text/javascript"> 
    /*
        父节点.insertBefore(newnode,oldnode); //newnode放到oldnode的前边
        父节点.replaceChild(newnode,oldnode); //newnode替换到oldnode节点
    */
    var bl = document.getElementsByTagName('li')[1];    
    var hmm = document.getElementsByTagName('li')[3];
    var ful = document.getElementsByTagName('ul')[0];

    //ful.insertBefore(hmm,bl);//把hmm,追加到bl前边
    ful.replaceChild(hmm,bl);//用hmm替换bl
</script>

节点复制操作

被复制节点.cloneNode(true/false);
true:深层复制
false:浅层复制

<html>
<head>
<meta charset='utf-8' />
</head>
<body>
    <h2>节点复制</h2>
    <ul>
        <li mean="热情">red</li>
        <li mean="冷静">blue</li>
        <li mean="生机">green</li>
    </ul>
    <ul>
        <li mean="韩梅梅">hanmeimei</li>
    </ul>
</body>
</html>
<script type="text/javascript"> 
    var bl = document.getElementsByTagName('li')[1];
    var fb1 = bl.cloneNode(true);//深层复制 （本身和内部子节点都复制）
    var fb2 = bl.cloneNode(false);//浅层复制 （只复制本身（包括自身属性））

    var sul = document.getElementsByTagName('ul')[1];
    sul.appendChild(fb1);
    sul.appendChild(fb2);
</script>

节点删除

父节点.removeChild(子节点);

<html>
<head>
<meta charset='utf-8' />
</head>
<body>
    <h2>删除节点</h2>
    <ul>
        <li mean="热情">red</li>
        <li mean="冷静">blue</li>
        <li mean="生机">green</li>
    </ul>
    <ul>
        <li mean="韩梅梅">hanmeimei</li>
    </ul>
</body>
</html>
<script type="text/javascript"> 
    var rl = document.getElementsByTagName('li')[0];

    rl.parentNode.removeChild(rl);
</script>

dom对css样式操作

① 获取css样式
元素节点.style.css样式名称;
divnode.style.width; //获取宽度样式
② 设置css样式(有则修改、没有则添加)
元素节点.style.css样式名称 = 值;
divnode.style.width =‘500px’;设置div宽度样式

注意：

① dom操作css样式只能操作“行内样式”(css样式分为行内、内部、外部)
② 操作属性样式例如background-color/border-left-color，
需要变为backgroundColor、borderLeftColor，中恒线去掉，后边首字母大写。

<html>
<head>
<meta charset='utf-8' />
</head>
<body>
    <h2>操作css样式</h2>
    <div style='width:300px; height:200px; background-color:green;'>利用dom操作css</div>
    <input type='button' value='获取css' onclick='f1()' />
    <input type='button' value='设置css' onclick='f2()' />
</body>
</html>
<script type="text/javascript"> 
    var dv = document.getElementsByTagName('div')[0];
    //获取css
    function f1(){
        console.log(dv.style.width);
        console.log(dv.style.height);
        console.log(dv.style.backgroundColor);
    }
    //设置css
    function f2(){
        dv.style.width = '600px';
        dv.style.height = '600px';
        dv.style.backgroundColor = 'red';
    }
</script>

事件操作

什么是事件

通过鼠标、键盘对页面所做的动作就是事件。
事件一旦发生需要有事件处理，该处理称为“事件驱动”，事件驱动通常由函数担任
onclick onmouseover onmouseout onkeyup onkeydown onblur onfocus onsubmit

设置事件

dom1级方式设置

<input type=”text” name=”username” οnclick=”函数名称()” />
function 函数名称(){this[window]}
<input type=”text” name=”username” οnclick=”过程代码this[itnode]” />
itnode.onclick = function(){this[itnode]}
itnode.onclick = 有名函数名称; （不加小括号）
function 函数名称(){this[itnode]}
取消dom1级事件：
itnode.onclick = null;

以上是dom1级事件设置的4种具体表现形式，除了第①种（其代表window），其他三种方式的函数内部this都代表当前节点本身。

dom2级方式设置

主流浏览器方式(包括IE9以上版本浏览器)：
- itnode.addEventListener(事件类型，事件处理[，事件流]); //设置
- itnode.removeEventListener(事件类型，事件处理[，事件流]); //取消
IE浏览器方式(IE6/7/8)：
- itnode.attachEvent(事件类型，事件处理); //设置
- itnode.detachEvent(事件类型，事件处理); //取消
  事件类型：就是我们可以设置的具体事件，例如onclick/onmouseover等
  　　　主流浏览器方式没有”on标志”，例如addEventListener(‘click’，…);
  　　　IE浏览器方式有”on”标志
  事件处理：事件驱动，可以是一个有名/匿名函数
  　　　例如addEventListener(‘click’,function(){}/有名函数);
  　　　事件流：true捕捉型、[false冒泡型]
  事件取消(removeEventListener/detachEvent)操作具体要求：
  　　　① 事件处理必须是有名函数，不可以是匿名函数。
  　　　② 事件取消的参数与绑定的参数完全一致(数量/内容)

dom2级事件设置的特点：

可以为同一个对象设置多个同类型事件。
事件取消也非常灵活。
对事件流也有很好的处理。

<html>
<head>
<meta charset='utf-8' />
</head>
<body>
    <h2>dom2级事件设置</h2>
    <div style="width:300px;height:200px;background-color:yellow;">事件操作</div>
    <input type='button' value='取消' onclick='cancel()' />
</body>
</html>
<script type='text/javascript'>
    //事件取消要求：
    //1、有名函数设置的事件
    //2、设置和取消的参数完全一致（数量、内容）
    function cancel(){
        dv.removeEventListener('mouseover',f2);
    }

    //dom2级事件设置简单示例
    var dv = document.getElementsByTagName('div')[0];
    //itnode.addEventListener(事件类型，事件处理[，事件流]);
    dv.addEventListener('click',function(){
        //this代表div元素节点对象
        dv.style.backgroundColor = 'pink';
        this.style.width = '400px';
    });

    function f1(){
        this.style.height = '100px';
        console.log('11111');
    }
    function f2(){
        console.log('22222');
    }
    function f3(){
        console.log('333333');
    }
    //为同一个div对象设置多个事件
    dv.addEventListener('mouseover',f1);
    dv.addEventListener('mouseover',f2);
    dv.addEventListener('mouseover',f3);
</script>

事件流

多个彼此嵌套元素，他们拥有相同的事件，最内部元素事件被触发后，外边多个元素的同类型事件也会被触发，多个元素他们同类型事件同时执行的效果称为“事件流”
这里写图片描述

<html>
<head>
<meta charset='utf-8' />
</head>
<body>
    <h2>事件流</h2>
    <div>
        <p>
            <span>addEventListener(事件类型，处理方法，true捕捉/false冒泡)</span>
        </p>
    </div>
</body>
</html>
<script type='text/javascript'>
    var dv = document.getElementsByTagName('div')[0];
    var pp = document.getElementsByTagName('p')[0];
    var sp = document.getElementsByTagName('span')[0];

    //addEventListener(事件类型，处理方法，true捕捉/false冒泡)
    dv.addEventListener('click',function(){console.log('div tag');},false);
    pp.addEventListener('click',function(){console.log('p tag');},false);
    sp.addEventListener('click',function(){console.log('span tag')},false);
</script>

IE浏览器从开始到现在事件流始终是“冒泡型”,在IE9以后的版本支持捕捉、冒泡型。
网景的Navigator浏览器(现在火狐浏览器的许多血统来源于navigator浏览器)一开始的事件流是”捕捉型”。后期事件流有改进，针对捕捉型、冒泡型都可以支持。

事件对象

事件对象，每个事件(包括鼠标、键盘事件)触发执行的过程中，都有对应的事件对象，通过事件对象可以获得鼠标相对页面的坐标信息、通过事件对象也可以感知什么键子被触发执行、通过事件对象还可以阻止事件流产生、阻止浏览器默认动作。

获得事件对象

主流浏览器(IE9以上版本浏览器)：
node.onclick = function(evt){evt就是事件对象}
addEventListener(类型,function(evt){}/函数名字);
function 函数名称(evt){}
事件处理函数的第一个形参就是事件对象
IE(6/7/8)浏览器
node.onclick = function(){window.event事件对象}
全局变量event就是事件对象

<html>
<head>
<meta charset='utf-8' />
</head>
<body>
    <h2>事件对象</h2>
    <div>
        操作事件对象
    </div>
</body>
</html>
<script type='text/javascript'>
    //形参ev代表事件对象
    function clk(ev){
        //alert(ev);//[object MouseEvent]
        //alert(window.event);//IE浏览器事件对象

        var evt = ev ? ev : window.event;//兼容事件对象获取
        this.style.backgroundColor = 'green';
    }
    var dv = document.getElementsByTagName('div')[0];
    dv.addEventListener('click',clk);
</script>

事件对象作用

1.获得鼠标的坐标信息

event.clientX/clientY; //相对dom区域坐标
event.pageX/pageY; //相对dom区域坐标，给考虑滚动条位置
event.screenX/screenY; //相对屏幕坐标

<html>
<head>
<meta charset='utf-8' />
</head>
<body>
    <h2>事件对象</h2>
    <div>
        操作事件对象
    </div>
</body>
</html>
<script type='text/javascript'>
    //形参ev代表事件对象
    function clk(ev){
        var evt = ev ? ev : window.event;
        console.log(evt.clientX + "--" + evt.clientY);//相对dom区域坐标
        console.log(evt.pageX + "--" + evt.pageY);//相对dom区域坐标，给考虑滚动条位置
        console.log(evt.screenX + "--" + evt.screenY);//相对屏幕坐标
    }
    var dv = document.getElementsByTagName('div')[0];
    dv.addEventListener('click',clk);
</script>

2.阻止事件流

event.stopPropagation(); //主流浏览器
event.cancelBubble = true; // IE浏览器

冒泡型、捕捉型都可以进行阻止,为了浏览器兼容处理，只考虑冒泡型。

<html>
<head>
<meta charset='utf-8' />
</head>
<body>
    <h2>事件对象</h2>
    <div>
        <p>
            <span>阻止事件流</span>
        </p>
    </div>
</body>
</html>
<script type='text/javascript'>
    var dv = document.getElementsByTagName('div')[0];
    var pp = document.getElementsByTagName('p')[0];
    var sp = document.getElementsByTagName('span')[0];

    //阻止“冒泡型”事件流更有意义
    dv.addEventListener('click',function(ev){
        console.log('div tag');
        ev.stopPropagation();//阻止事件流产生
    },false);
    pp.addEventListener('click',function(ev){
        console.log('p tag');
        ev.stopPropagation();//阻止事件流产生
    },false);
    sp.addEventListener('click',function(ev){
        console.log('span tag');
        ev.stopPropagation();//阻止事件流产生
    },false);
</script>

阻止浏览器默认动作

浏览器默认动作，注册form表单页面，提交表单的时候，浏览器的页面会根据action属性值进行跳转，这个动作称为“浏览器默认动作”。

event.preventDefault(); //主流浏览器
event.returnValue = false; //IE浏览器
return false; //dom1级事件设置起作用

<html>
<head>
<meta charset='utf-8' />
</head>
<body>
    <h2>阻止浏览器默认动作</h2>
    <form method='post' action='www.baidu.com'>
        <p>用户名：<input type='text' id='name' /></p>
        <p><input type='submit' value='提交' /></p>
    </form>
</body>
</html>
<script type='text/javascript'>
    var fm = document.getElementsByTagName('form')[0];
    fm.addEventListener('submit',function(ev){
        alert('阻止提交');
        //return false;//dom1级事件设置起作用
        ev.preventDefault(); //dom2级事件设置起作用
    });
</script>

感知被触发键盘键子信息

event.keyCode 获得键盘对应的键值码信息
通过事件触发时候获得的keyCode数值码信息可以对应键盘的键子信息。

<html>
<head>
<meta charset='utf-8' />
</head>
<body>
    <h2>事件感知被触发键盘键信息</h2>
    <form method='post' action='www.baidu.com'>
        <p>用户名：<input type='text' id='name' /></p>
        <p><input type='submit' value='提交' /></p>
    </form>
</body>
</html>
<script type='text/javascript'>
    var n = document.getElementById('name');
    n.addEventListener('keyup',function(ev){
        //感知被触发键盘信息
        console.log(ev.keyCode);
    });
</script>

什么是加载事件onload

js代码执行时候，需要html&css的支持，就让html先执行(先进入内存)，js代码后执行
js代码在最后执行的过程就是“加载过程”，通常通过“加载事件”实现加载过程
具体设置：

<body onload=”加载函数()”>
window.onload = 匿名/有名函数;  //推荐

<html>
<head>
<meta charset='utf-8' />
</head>
<body>
    <h2>加载事件onload</h2>
    <div>加载事件onload</div>
</body>
</html>
<script type='text/javascript'>
    function f1(){
        var dv = document.getElementsByTagName('div')[0];
        dv.style.width = '300px';
        dv.style.height = '200px';
        dv.style.backgroundColor = 'blue';
    }
    function f2(){
        console.log('加载代码');
    }
    //window.onload = f1();//有名函数
    //window.onload = f2();//有名函数
    window.onload = function(){//匿名函数，推荐使用 灵活
        f1();
        f2();
    }
</script>

BOM

browser object model(浏览器对象模型)
通过BOM技术可以模拟浏览器对页面进行各种操作：创建子级页面、操作历史记录页面、操作地址栏等等
这里写图片描述

<html>
<head>
<meta charset='utf-8' />
</head>
<body>
    <h2>显示电子表</h2>
    <input type="button" value="取消" onclick="cancel()" />
</body>
</html>
<script type='text/javascript'>
    function showtime(){
        var d = new Date();
        var year = d.getFullYear();
        var month = d.getMonth();
        var day = d.getDate();

        var hour = d.getHours();
        var minute = d.getMinutes();
        var second = d.getSeconds();

        var timeinfo = year + "-" + month + "-" + "day" + " " + hour + ":" + minute + ":" +second;
        //innerHTML 可以获取、设置一个标签内部的信息
        document.getElementsByTagName('h2')[0].innerHTML = timeinfo;
    }

    window.onload = function(){
        //showtime 函数需要每隔1s执行一次
        //setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
        mytime = setInterval('showtime()',1000);
    }
    function cancel(){
        clearInterval(mytime);
    }
</script>

<html>
<head>
<meta charset='utf-8' />
</head>
<body>
    <h2>open()创建子级页面</h2>
    <input type="button" value="创建" onclick="newpage()" />
</body>
</html>
<script type='text/javascript'>
    function newpage(){
        /*
            window.open(URL,name,features,replace)
        URL         要打开的URL 如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
        name        打开方式 _self _blank _top 以及frame的name属性。
        features    声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。
        replace     一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：
                    true - URL 替换浏览历史中的当前条目。
                    false - URL 在浏览历史中创建新的条目。
        */
        window.open('26.html','_blank','width=600,height=500,fullscreen=no,resizable=no');
    }
</script>

<html>
<head>
<meta charset='utf-8' />
<script type='text/javascript'>
    window.onload = function(){
        var dv = document.getElementsByTagName('div')[0];
        //点击div,将其内部信息追加给父页面
        dv.onclick = function(){
            //opener 表示调用父级页面
            opener.document.getElementsByTagName('h2')[0].innerHTML += this.innerHTML;
        }
    }
</script>
</head>
<body>
    <div>子页面</div>
</body>
</html>