javascript之dom编程（1）：简单用法

时间：2015-07-31 18:28:28 阅读：119 评论：0 收藏：0 [点我收藏+]

标签：dom

一：基本案例
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
当前时间:
<span id="myspan">----</span><br/>
<input onclick="test1();" type="button" value="开新窗口"/>
</body>
<script type="text/javascript">
//html dom编程
//每个html文件的元素都会被当做一个Node节点对象来看待,

var i=0;
var myspan=document.getElementById("myspan");
function abc(){
var mytime=new Date();
//对象.innterText表示在该对象对应标签的中间放入文本
myspan.innerText=mytime.toLocaleString();
if(++i==10){
window.clearInterval(mytime2);
window.alert("hello,world,时间停止");
}
}
//做了一个定时器
var mytime2=window.setInterval("abc()",1000 );
//第二个参数可以指定，是替换本窗口(_self)，还是开窗口(_blank 默认)
//第三个参数可以指定新窗口的样式.
function test1(){
window.open("newwindow.html","_blank","width=300,height=300,toolbar=yes,titlebar=yes,status=yes,location=yes,resizable=yes");
}
</script>
</html>

二：两个html页面之间互相通信
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input onclick="test1()" type="button" value="开新窗口"/>
<input type="text" id="myinfo" />
<input type="button" onclick="test2()" value="发送给子窗口"/>
</body>
<script type="text/javascript">
var newwindow="";
function test1(){
newwindow=window.open("a.html");
}
function test2(){
//取出用户发送给子窗口的信息
var my_text=document.getElementById("myinfo");
var child_text=newwindow.document.getElementById("myinfo");
child_text.value=my_text.value;
}
</script>
</html>

a.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script type="text/javascript">
function send(){
var chlid_text=document.getElementById("myinfo2");
//opener表示该页面的父窗口
opener.document.getElementById(‘myinfo‘).value=chlid_text.value;
}
</script>
<body>
<h1>我是b.html页面</h1>
接收消息
<input type="text" id="myinfo"/>
<hr/>
发送消息
<input type="text" id="myinfo2"/>
<input type="button" value="送给父窗口" onclick="send()"/>
</body>

</html>

后面会对html元素逐个更新。

javascript之dom编程（1）：简单用法

标签：dom

原文地址：http://blog.csdn.net/dzy21/article/details/47172615

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行