document在javascript的作用 javascript中document的方法

转载

冷月星 2024-01-04 15:00:24

文章标签 javascript i++ 方法调用 文章分类 JavaScript 前端开发

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.的方法找元素了

　　　　　　例如给按钮创建单击事件 οnclick="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="点击给父窗口" οnclick="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" οnclick="doclose()">关闭5个子窗口</span>
<span οnclick="doredirect()">转到新浪网</span><div>

location的href属性和reload()刷新方法

<script language="javascript">
　　function doredirect(){
　　　　//跳转操作
 　　　　window.location.href="http://"; 
　　　　//页面刷新操作
　　　　// window.location.reload();
　　}</script>
body里面方法调用
<span οnclick="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"  οnclick="yx()">同意
<input type ="radio" name="r1" id="r2" checked="checked" οnclick="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" οnkeyup="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' οnclick='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' οndblclick='delnum(this)'>"+s+"</span>"  //创建元素
 　　ss.innerHTML += span;　　　　　　　　　　　　　　　　　　　　　　　　　　　　//添加元素

 　　btn.setAttribute("disabled","disabled");　　　　　　　　　　　//更改按钮属性，方法用了this所以btn相当于document.getElementBy...
　　}　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//方法调用处<input type='button' value='"+i+"' class='bbb' οnclick='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>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。