DOM對象
windows：屬性：opener(打開者)
方法：open()、close(),setTimeout()、setInterval()...
location:屬性：href
方法：reload（）刷新
history:方法：go()
status:不常用
document：下面詳細介紹
JS對document對像的操作
分兩個： 找到對象、操作對象。
找到對象的方法：document.getElementById()、document.getElementsByName()、
document.getElementsByTagName(),//通過元素名找到結果是數組，elements加s了
document.getElementsByClassName()
PS:this關鍵字的用法，指這條元素，省去了document.的方法找元素了
例如給按鈕創建單擊事件 onclick="doout(this)" 方法：function dout(tx){tx.屬性等}
操作對象：包括：
操作屬性：取值：getAttribute,賦值：setAttribute,刪除屬性:remoeAttribute
操作樣式：內聯樣式：style.xxxx
class：1、className
2、把class當成屬性來看
操作內容：表單元素：value
非表單元素:1、innerHTML
2、innerText
操作元素：操作整個元素：創建(字符串、createElement())、添加子元素(appendChild())、刪除(remover())、復制(clonNode())
操作相關元素：前后、父、子
演示open()、close()的用法
<script language="javascript">
//打開b網頁，a接收的就是b的windows
var a = window.open("b.html","_blank","width=100 height=100 toolbar=no");
window.setTimeout("ccc()",3000);//間隔3秒執行ccc()方法
function ccc()
{
a.close();//關閉a對象的窗口
}
</script>
演示opner()的用法
<script language="javascript">
function dodo(){
//取出值
var s = document.getElementById("t1").value;
//給父窗口
var dd = window.opener.document.getElementById("dd"); //在上一級的窗口找到 id為 dd 的元素
dd.innerHTML = s; //賦值
}
</script>
body內的內容
<form>
<input type="text" id="t1" name="t1">
<input type="button" value="點擊給父窗口" onclick="dodo()">
</form>
連續打開和連續關閉窗口
<script language="javascript">
var arr = new Array();//用來接受窗口
function doopen(){ //連續打開窗口
for(var i=1;i<=5;i++){
arr[i-1] = window.open("b.html","_blank","width=100 height=100 toolbar=no");
}
}
function doclose(){ //連續關閉窗口
for(var i=0;i<arr.length;i++){
arr[i].close();
}
}
</script>
body里面方法調用
<span onClick="doopen()">打開5個子窗口</span>
<span class="d2" onclick="doclose()">關閉5個子窗口</span>
<span onclick="doredirect()">轉到新浪網</span>
<div>
location的href屬性和reload()刷新方法
<script language="javascript">
function doredirect(){
//跳轉操作
window.location.href="http://www.sina.com.cn";
//頁面刷新操作
// window.location.reload();
}
</script>
body里面方法調用
<span onclick="doredirect()">轉到新浪網</span>
document方法找到元素，並操作屬性
<script language="javascript">
function yx(){
//把disabled="disabled"去掉
var btn = document.getElementById("b3");
btn.removeAttribute("disabled");
}
function byx(){
//加上disabled="disabled"
var btn = document.getElementById("b3");
btn.setAttribute("disabled","disabled");
}
</script>
body里面元素方法調用
<form>
<input disabled="disabled" type="submit" value="下一步" name="b3" id="b3"><br>
<input type="radio" name="r1" id="r1" onclick="yx()">同意
<input type ="radio" name="r1" id="r2" checked="checked" onclick="byx()">不同意
</form>
通過操作屬性，給元素加上單機事件實現按鈕的可用不可用
<script language="javascript">
var a = document.getElementsByName("r1"); //找到元素名為 ri 的元素集合
for(var i=0;i<a.length;i++){
a[i].setAttribute("onclick","bbb(this)"); //for循環給每個元素添加單機事件，注意this的使用
//a[i].setAttribute("type","checkbox"); //設置表單元素
}
function bbb(dxan){
if(dxan.getAttribute("id") == "r1"){
document.getElementById("b3").removeAttribute("disabled");
}
else if(dxan.getAttribute("id") == "r2"){
document.getElementById("b3").setAttribute("disabled","disabled");
}
}
</script>
body里面元素方法調用
<form>
<input disabled="disabled" type="submit" value="下一步" name="b3" id="b3"><br>
<input type="radio" name="r1" id="r1" >同意
<input type ="radio" name="r1" id="r2" checked="checked">不同意
</form>
通過操作樣式，給元素加上事件實現元素樣式的改變
<style type="text/css">
.dd{
width:100px;
height:100px;
border:5px solid red;
float:left;
margin:10px;
}
.tt{
background-color:yellow;
}
</style>
<script language="javascript">
var dd = document.getElementsByClassName("dd");
for(var i=0;i<dd.length;i++){
//dd[i].className+=" tt";
var s = dd[i].getAttribute("class"); //獲取屬性值
s = s+" tt";
dd[i].setAttribute("class",s); //設置屬性值
//加上鼠標移動效果
dd[i].setAttribute("onmouseover","doOver(this)");
dd[i].setAttribute("onmouseout","doOut(this)");
}
function doOver(d){
var s = d.className;
var ks = s.indexOf(" ");
if(ks > 0){
s = s.substr(0,ks); //字符串截取
d.className=s;
}
}
function doOut(d){
var s = d.className;
var ks = s.indexOf("tt");
if(ks < 0){
d.className = d.className+" tt"; //字符串拼接
}
}
</script>
<div class="dd"></div>
<div class="dd"></div>
通過操作內容，改變元素的內容
<script language="javascript">
function doinput(txt){
var s = txt.value; //表單元素內容用value，方法加this參數，方法內不用通過document再找了
var n = s.length;
var shengyu = 140-n;
document.getElementById("dd").innerHTML = shengyu; //非表單內容用innerHTML
}
</script>
<form>
<textarea rows="5" onkeyup="doinput(this)" cols="60" id="t1">
</textarea><br>
還可以輸入<span id="dd">140</span>個字
</form>
實現時鍾效果
<script language="javascript">
function showShiJian(){
var d = new Date();
var s = d.getHours()+":";
s += d.getMinutes()+":";
s += d.getSeconds();
document.getElementById("dd").innerHTML = s;
window.setTimeout("showShiJian()",1000);
}
window.setTimeout("showShiJian()",1000);
</script>
<div id="dd" style="font-size:28px; font-weight:bold;"></div>
操作元素，創建等
<style type="text/css">
.bbb{ //按鈕樣式
width:50px;height:50px;
font-size:24px;
font-weight:bold;
font-style:italic;
margin:3px;
}
.selspan{ //span元素樣式
color:red;
font-weight:bold;
font-size:18px;
margin:0px 10px 0px 10px;
}
</style>
<script language="javascript">
var selectcount=0; //計數，只能選7個
for(var i=1;i<=36;i++){
/*var s = "<input type='button' value='"+i+"' class='bbb' onclick='doselect(this)'>" //第一種字符串創建方式
var dd = document.getElementById("dd");
dd.innerHTML += s;*/
create
var ab = document.createElement("input"); //第二中createElenment創建方式
ab.setAttribute("type","button");
ab.setAttribute("value",i);
ab.setAttribute("class","bbb");
ab.setAttribute("onclick","doselect(this)");
var dd = document.getElementById("dd"); //往 id 為dd 的元素中添加創建的元素
dd.appendChild(ab);
}
function doselect(btn){ //實現選數功能
selectcount++;
if(selectcount>7){ //只能選7個
alert("asdfasf");
return;
}
var s = btn.value; //按鈕上的文字
var ss = document.getElementById("ss");
var span = "<span class='selspan' ondblclick='delnum(this)'>"+s+"</span>" //創建元素
ss.innerHTML += span; //添加元素
btn.setAttribute("disabled","disabled"); //更改按鈕屬性，方法用了this所以btn相當於document.getElementBy...
} //方法調用處<input type='button' value='"+i+"' class='bbb' onclick='doselect(this)'>
function delnum(snum){ //刪除已選數字，需要改變已選數字樣式，改變計數
var num = snum.innerHTML;
//找對應的按鈕，設為可用
var btns = document.getElementsByClassName("bbb");
for(var i=0;i<btns.length;i++){
var btnnum = btns[i].value;
if(btnnum == num) {
btns[i].removeAttribute("disabled");
break;
}
}
//刪除這個span
snum.remove();
selectcount--;
}
</script>
<form>
<div id="dd"></div>
</form>
<br>
您選中的號碼有：
<span id="ss"></span>