標籤：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節點對象來看待,
<!--讀10秒自動停止,並彈出一句話"hello.wrold時間停止"-->
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元素逐個更新。
著作權聲明：博主原創文章，轉載請說明出處。http://blog.csdn.net/dzy21
javascript之dom編程（1）：簡單用法
