JS中的DOM对象及JS对document对像的操作

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{
　　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{　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//按钮样式
　　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>