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()的用法

　　//打开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()的用法

body内的内容

连续打开和连续关闭窗口

　　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()刷新方法

　　function doredirect(){

　　　　//跳转操作

　　　　window.location.href="http://www.sina.com.cn";

　　　　//页面刷新操作
　　　　// window.location.reload();
　　}

</script>

body里面方法调用

<span onclick="doredirect()">转到新浪网</span>

document方法找到元素，并操作属性

　　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里面元素方法调用

通过操作属性，给元素加上单机事件实现按钮的可用不可用

　　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里面元素方法调用

通过操作样式，给元素加上事件实现元素样式的改变

　　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)");
　　}

</script>

通过操作内容，改变元素的内容

<form>
<textarea rows="5" onkeyup="doinput(this)" cols="60" id="t1">
</textarea><br>
还可以输入<span id="dd">140</span>个字
</form>

实现时钟效果

操作元素，创建等

　　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>
<br>
您选中的号码有：
<span id="ss"></span>

秒客网

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

相关文章