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

Posted 2020-07-17 雍家培

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>

连续打开和连续关闭窗口

<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>

未完待续。。。