JavaScript 之 DOM编程
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 之 DOM编程相关的知识,希望对你有一定的参考价值。
DOM
文档对象模型(Document Object Model,DOM)是一种用于html和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是javascript语言规范里的规定的核心内容。
一、查找元素(选择器)
1、直接查找
document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合
<script> a = document.getElementById(‘id1‘); a = document.getElementsByTagName("div"); //会生成数组 a = document.getElementsByName(‘name‘); //会生成数组 a = document.getElementsByClassName("d1"); //会生成数组 b = a[0].innerText; console.log(b); </script>
2、间接查找
//可以将文本都找出来 parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 //不可以将文本找出来 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
例子:
var a = document.getElementById(‘id1‘); //可以将文本都找出来 var b = a.parentNode; charen_list1 = b.childNodes; charen_list1.nextSibling; //不可以将文本找出来 var c = a.parentElement; charen_list2 = c.children; console.log(charen_list2[0])
二、操作
1、内容
innerText 文本 outerText innerHTML HTML内容 outerHTML 重要:value 值 注:以下操作可查询也可赋值 checkbox -- value -- checked radio //单选,定义一个相同的name可单选 -- value -- checked select -- value --selectedIndex 获取列表中的索引
简单例子:
//DOM内容操作 //(1)innerText/innerHTML操作 var text_html = document.getElementById(‘id1‘); var text = text_html.innerText; var html = text_html.innerHTML; alert(text); alert(html); //(2)value操作 var tex = document.getElementById(‘tex‘); console.log(tex.value); //获得value值 tex.value = ‘value‘ //设置value值 var sel = document.getElementById(‘sel‘); console.log(sel.value) ;
radio、select的value值操作:
<!DOCTYPE html> <html > <head> <title>radio、select的value值操作</title> <meta charset="utf-8"> </head> <body> <ul id="Sex"> <li><input type="radio" name="sex" value="1">男</li> <li><input type="radio" name="sex" value="2">女</li> </ul> <select name="pariviage" id="par"> <option value="1">广东</option> <option value="2" selected="selected">广西</option> <option value="3">福建</option> <option value="4">湖南</option> </select> <script> //radio 的value属性操作 var SEX = document.getElementsByName(‘sex‘); console.log(SEX[0].value) console.log(SEX[1].checked=true) //select的value属性操作 var Pra = document.getElementById(‘par‘); console.log(Pra.value=4) //可获取值也可赋值 console.log(Pra.selectedIndex) //获取列表中的索引 </script> </body> </html>
2、操作样式:class级别
className // 获取所有类名,得到的是字符串
classList //获取所有类名的列表
classList.remove(cls) // 删除指定类
classList.add(cls) // 添加类
例子:简陋模态对话框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> *{ margin: 0; padding: 0; } .hide{ visibility: hidden; /* display: none; 这样也是可以的*/ } .butt{ position: fixed; left: 200px; top:200px; z-index: 1; } .shadow{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,0.3); z-index: 2; } .mode{ position: fixed; /*fixed:固定 absolute:继承*/ height: 300px; width: 500px; left: 50%; top: 50%; background: white; margin-left: -250px; /* 以左上角为起点,向左移动250px,向上移动150px,移动以实际的宽和高的一半 */ margin-top: -220px; z-index: 3; } </style> </head> <body> <div class="butt"> <input type="button" value="模态对话框" id="but" onclick="Show()"> </div> <!-- 模态对话框 --> <div class="shadow hide" id="shadow"></div> <div class="mode hide" id="mode"> <div class="login"> <div>登录:<input type="text"></div> <div>密码:<input type="password"></div> <div> <input type="button" value="确定"> <input type="button" value="取消" id="hide" onclick="Hide()"> </div> </div> </div> <script> function Show(){ document.getElementById(‘shadow‘).classList.remove(‘hide‘); document.getElementById(‘mode‘).classList.remove(‘hide‘); }; function Hide(){ document.getElementById(‘shadow‘).classList.add(‘hide‘); document.getElementById(‘mode‘).classList.add(‘hide‘); } </script> </body> </html>
特殊:this
<!DOCTYPE html> <html > <head> <title>this特殊属性</title> <meta charset="utf-8"> <script> function show(arg){ console.log(arg); //获取到div的标签 } </script> </head> <body> <div style="height: 50px;width: 50px;cursor: pointer;background: red;text-align: center;line-height: 50px" onclick="show(this);"> 点我 </div> </body> </html>
例子:折叠菜单,简单的两种形式
方法一:用this属性
<!DOCTYPE html> <html > <head> <title>竖向的折叠菜单</title> <meta charset="utf-8"> <script> function showmenu(arg) { var Menu = arg; console.log(Menu); var List = Menu.parentElement.children[1]; if (List.style.display=="none") { List.style.display="block"; Menu.className = "title1"; }else { List.style.display="none"; Menu.className = "title"; } } </script> <style type="text/css"> *{margin:0;padding:0;list-style:none;font-size:14px} #nav{margin:10px;text-align:center;line-height:25px;width:200px;} .title{background:#336699;color:#fff;border-bottom:1px solid #fff;cursor:pointer;} .title1{background:#888;color:#000;border-bottom:1px solid #666;cursor:pointer;} .content li{color:#336699;background:#ddd;border-bottom:1px solid #fff;} </style> </head> <body> <div id="nav"> <div> <div class="title" id="menu1" onclick="showmenu(this) ">菜单一</div> <div id="list1" class="content" style="display:none"> <ul> <li><a href="http://www.baidu.com">jQuery</a></li> <li><a href="http://www.baidu.com">Extjs</a></li> <li><a href="http://www.baidu.com">Mootools</a></li> </ul> </div> </div> <div> <div class="title" id="menu2" onclick="showmenu(this)">菜单二</div> <div id="list2" class="content" style="display:none"> <ul> <li>菜单导航</li> <li>层和布局</li> <li>图片切换</li> </ul> </div> </div> </div> </body> </html>
方法二:不用this属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>竖向的折叠菜单</title> <script language = JavaScript> function showmenu(id) { var list = document.getElementById("list"+id); var menu = document.getElementById("menu"+id) if (list.style.display=="none") { document.getElementById("list"+id).style.display="block"; menu.className = "title1"; }else { document.getElementById("list"+id).style.display="none"; menu.className = "title"; } } </script> <style type="text/css"> *{margin:0;padding:0;list-style:none;font-size:14px} #nav{margin:10px;text-align:center;line-height:25px;width:200px;} .title{background:#336699;color:#fff;border-bottom:1px solid #fff;cursor:pointer;} .title1{background:#888;color:#000;border-bottom:1px solid #666;cursor:pointer;} .content li{color:#336699;background:#ddd;border-bottom:1px solid #fff;} </style> </head> <body> <div id="nav"> <div class="title" id="menu1" onclick="showmenu(‘1‘) ">菜单一</div> <div id="list1" class="content" style="display:none"> <ul> <li><a href="http://www.baidu.com">jQuery</a></li> <li>Extjs</li> <li>Mootools</li> </ul> </div> <div class="title" id="menu2" onclick="showmenu(‘2‘)">菜单二</div> <div id="list2" class="content" style="display:none"> <ul> <li>菜单导航</li> <li>层和布局</li> <li>图片切换</li> </ul> </div> </div> </body> </html>
例子:搜索框的两种实现方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>搜索框的两种实现方法</title> <style> .Gar{color: gray} .Bla{color: black} </style> </head> <body> <!-- 搜索框有两种方法:第一种最常用,但是低级浏览器不支持--> <div>方法一:</div> <input type="text" placeholder="请输入内容"> <div>方法二:</div> <!-- onfocus:单光标点进在里面时 onblur:单光标没点在里面时 --> <input type="text" value="请输入内容" class="Gar" onfocus="Point(this)" onblur="Out(this)"/> <script > function Point(arg){ if (arg.value == ‘请输入内容‘){ arg.value = ‘‘; arg.className = "Bla"; } } function Out(arg){ if(arg.value.trim() == "请输入内容" || arg.value.trim().length == 0){ arg.value = "请输入内容"; arg.className = ‘Gar‘; } } </script> </body> </html>
注意:
onfocus:单光标点进在里面时
onblur:单光标没点在里面时
例子:全选,取消,反选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>多选框</title> </head> <body> <div> <input type="button" value="全选" onclick="Check_All()"> <input type="button" value="取消" onclick="Cancel_All()"> <input type="button" value="反选" onclick="Invert_All()"> </div> <table> <thead> <tr> <th></th> <th>ID</th> <th>NAME</th> <th>PASSWORD</th> </tr> </thead> <tbody id="Checks"> <tr> <td><input class="che1" type="checkbox" value="1" ></td> <td>1</td> <td>翁孟铠</td> <td>passwd</td> </tr> <tr> <td><input class="che1" type="checkbox" value="2" ></td> <td>2</td> <td>wmk</td> <td>admin</td> </tr> <tr> <td><input class="che1" type="checkbox" value="3" ></td> <td>3</td> <td>张三</td> <td>admin</td> </tr> <tr> <td><input class="che1" type="checkbox" value="4" ></td> <td>2</td> <td>李四</td> <td>admin</td> </tr> <tr> <td><input id="status" class="che1" type="checkbox" value="5" onclick="Check_All_1()" ></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> <script> function Check_All(){ var Check_Box = document.getElementById("Checks").getElementsByClassName(‘che1‘); for(var item in Check_Box){ Check_Box[item].checked = true; } } function Check_All_1(){ var Check_Box = document.getElementById("Checks").getElementsByClassName(‘che1‘); var Check_Status = document.getElementById(‘status‘).checked; for(var item in Check_Box){ if(Check_Box[item].checked){ Check_Box[item].checked = false; }else{ Check_Box[item].checked = true; } } } function Cancel_All(){ var Check_Box = document.getElementById("Checks").getElementsByClassName(‘che1‘); for(var item in Check_Box){ Check_Box[item].checked = false; } } function Invert_All(){ var Check_Box = document.getElementById("Checks").getElementsByClassName(‘che1‘); for(var item in Check_Box){ if(Check_Box[item].checked){ Check_Box[item].checked = false; }else{ Check_Box[item].checked = true; } } } </script> </body> </html>
3、属性:可自定义属性
attributes // 获取所有标签属性 setAttribute(key,value) // 设置标签属性 getAttribute(key) // 获取指定标签属性 /* var atr = document.createAttribute("class"); atr.nodeValue="democlass"; document.getElementById(‘n1‘).setAttributeNode(atr); */ action
tab菜单:
<!DOCTYPE html> <html > <head> <title>tab菜单</title> <meta charset="utf-8"> <style> *{margin: 0;padding: 0} .Tab{width: 700px;height: 500px;margin: 0 auto} .Tab .nav{width: 700px;height:53px;border: 0} ul li{list-style-type: none;float: left;margin:0;padding: 15px 20px 15px 20px;font-size: 20px;border: 0;cursor: pointer} .Tab .con{width: 700px;height: 440px;border: 1px solid black} .change{background: red;color: white} .hide{display: none} </style> </head> <body> <div class="Tab"> <div class="nav" id="tab_nav"> <ul> <li onclick="show(this)" Nav="h1">首页</li> <li onclick="show(this)" Nav="h2">菜单</li> <li onclick="show(this)" Nav="h3">其他</li> </ul> </div> <div class="con" id="tab_con"> <div Con="h1" >首页内容</div> <div Con="h2" class="hide">菜单内容</div> <div Con="h3" class="hide">其他内容</div> </div> </div> <script> var CON = document.getElementById(‘tab_con‘).children; console.log(CON) function show(arg){ var Li_list = arg.parentElement.children; for(var item in Li_list){ var Li = Li_list[item]; Li.className=‘‘; } arg.className = ‘change‘; var NAV = arg.getAttribute(‘Nav‘); var CON = document.getElementById(‘tab_con‘).children; for( var i=0;i<CON.length;i++){ console.log(CON[i]) var C = CON[i].getAttribute(‘Con‘); if(C == NAV){ CON[i].className=""; }else { CON[i].className="hide"; } } } </script> </body> </html>
5、样式操作:style级别
style.cssText 可对style中的代码进行读写 style.item() 返回给定位置的CSS属性的名称 style.length style代码块中参数个数 style.getPropertyValue() 返回给定属性的字符串值 style.getPropertyPriority() 检测给定属性是否设置了!important,设置了返回"important";否则返回空字符串 style.removeProperty() 删除指定属性 style.setProperty() 设置属性,可三个参数:设置属性名,设置属性值,是否设置为"important"(可不写或写"")
简单例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="t" style="background-color: yellow; width: 100px; height: 100px">8</div> <script> var tT = document.getElementById("t"); console.log(tT.style.cssText); //width: 100px; height: 100px; background-color: yellow; tT.style.cssText = "background-color: yellow; width: 200px; height: 200px"; //修改属性 console.log(tT.style.cssText); //width: 200px; height: 200px; background-color: yellow; console.log(tT.style.item("0")); //background-color console.log(tT.style.length); //3 console.log(tT.style.getPropertyValue("background-color")); //yellow console.log(tT.style.getPropertyPriority("background-color")); //空字符串 console.log(tT.style.removeProperty("width")); //200px tT.style.setProperty("width","200px",""); //设置属性,第三个值为important优先值,可不写 </script> </body> </html>
例子:操作标签style
var obj = document.getElementById(‘i1‘) obj.style.fontSize = "32px"; obj.style.backgroundColor = "red";
<input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" /> <script> function Focus(ths){ ths.style.color = "black"; if(ths.value == ‘请输入关键字‘ || ths.value.trim() == ""){ ths.value = ""; } } function Blur(ths){ if(ths.value.trim() == ""){ ths.value = ‘请输入关键字‘; ths.style.color = ‘gray‘; }else{ ths.style.color = "black"; } } </script>
6、标签操作
a.创建标签
// 方式一 var tag = document.createElement(‘a‘) tag.innerText = "wupeiqi" tag.className = "c1" tag.href = "http://www.cnblogs.com/wupeiqi" // 方式二 var tag = "<a class=‘c1‘ href=‘http://www.cnblogs.com/wupeiqi‘>wupeiqi</a>"
b.操作标签
// 方式一 var obj = "<input type=‘text‘ />"; xxx.insertAdjacentHTML("beforeEnd",obj); xxx.insertAdjacentElement(‘afterBegin‘,document.createElement(‘p‘)) 注意:第一个参数只能是‘beforeBegin‘、 ‘afterBegin‘、 ‘beforeEnd‘、 ‘afterEnd‘ beforeEnd:内部的最后一个 beforeBegin:外部的上边 afterBegin:内部第一个 afterEnd:外部的下面 // 方式二:创建节点 var tag = document.createElement(‘a‘) xxx.appendChild(tag) //从XXX节点的最后一行 xxx.insertBefore(tag,xxx_list[1]) //添加指定位置的前面 xxx.insertAfter(tag,xxx_list[1]) //添加指定位置的后面,注意这是JQ的 xxx.removeChild(xxx_list[3]); //指定位置删除节点
例子:添加和删除一行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>添加一行</title> </head> <body> <div> <input type="button" value="添加" onclick="Add()"> <input type="button" value="删除" onclick="Clean()" </div> <table> <thead> <tr> <th>ID</th> <th>姓名</th> <th>性别</th> <th>用户名</th> </tr> </thead> <tbody id="TB"> <tr> <td>1</td> <td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td> </tr> <tr> <td>2</td> <td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td> </tr> <tr> <td>3</td> <td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td> </tr> </tbody> </table> <script> function Add(){ var TB = document.getElementById(‘TB‘); var TB_list = document.getElementById(‘TB‘).children; var TB_list_lenght = TB_list.length; var add_line_tr = document.createElement(‘tr‘); var add_line_td = document.createElement(‘td‘); var input_1 = document.createElement(‘input‘); input_1.type = ‘text‘; add_line_td.appendChild(input_1); add_line_tr.appendChild(add_line_td); //add_line_tr.innerHTML = `<td>${TB_list_lenght+1}</td>`+‘<td><input type="text"></td>‘+‘<td><input type="text"></td>‘+‘<td><input type="text"></td>‘ TB.appendChild(add_line_tr); //从最后一行添加 //TB.insertBefore(add_line_tr,TB_list[TB_list.length]); //指定位置添加 } function Clean(){ var TB = document.getElementById(‘TB‘); var TB_list = document.getElementById(‘TB‘).children; var TB_list_lenght = TB_list.length; if(TB_list_lenght > 3){ TB.removeChild(TB_list[TB_list_lenght-1]) } } </script> </body> </html>
c.复制和移动标签
xxx.appendChild(obj) 将obj标签节点移动到xxx节点 xxx.cloneNode(true) 复制xxx节点以及内部节点 xxx.cloneNode() 复制xxx节点(不复制内部内部节点)
例子:标签操作之移动和拷贝
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标签操作之移动和拷贝</title> </head> <body> <div id="h1" style="background: burlywood;width: 100%;height: 50px"> <a href="#">移动</a> <a href="#">复制</a> </div> <div id="h2"> <div>aaa</div> <div>bbb</div> </div> <script> var obj = document.createElement(‘a‘) obj.textContent = ‘obj‘ var h1 = document.getElementById(‘h1‘); var h2 = document.getElementById(‘h2‘); h2.appendChild(h1); //移动到h2里面 var h3 = h1.cloneNode(); //只是复制外层标签,里面不复制 h3.appendChild(obj); h3.style.backgroundColor = ‘red‘; var h4 = h1.cloneNode(true); //将里面外面都复制 h2.appendChild(h3); h2.appendChild(h4) </script> </body> </html>
6、高度操作
height_operate.offsetParent //父定位标签 height_operate.scrollTop //滚动条距离顶部的高度 height_operate.scrollHeight //文档的高度+padding高度 height_operate.clientTop //边框的高度:bord的高度 height_operate.clientHeight //可见方框的高度+padding,不包含border height_operate.offsetTop //当前标签距离‘顶部‘的的高度 注意:这是相对位置,要看position height_operate.offsetHeight //可见范围的文档高度+padding+bord
注意:height_operate是节点
例子:高度操作
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>高度操作</title> <style> *{margin: 0;padding: 0} .Height_operate{width: 700px;height: 450px;margin: 0 auto;border: 4px solid peru;overflow: auto;padding: 10px;position: relative} </style> </head> <body> <div style="height: 20px;background: orange"></div> <div style="border: 4px solid black;padding: 20px;position: absolute"> <div id="height_operate" class="Height_operate"> <div class="content" style="height: 1000px;background: rgba(0,0,0,0.2);"> <div style="height: 80%;background: pink">内容(以上是padding)</div> </div> </div> </div> <script> var height_operate = document.getElementById(‘height_operate‘) console.log(height_operate.scrollTop); //滚动条距离顶部的高度 console.log(height_operate.scrollHeight); //文档的高度+padding高度 console.log(height_operate.clientTop); //边框的高度:bord的高度 console.log(height_operate.clientHeight); //可见方框的高度+padding,不包含border console.log(height_operate.offsetTop); //当前标签距离‘顶部‘的的高度 注意:这是相对位置,要看position console.log(height_operate.offsetHeight); //可见范围的文档高度+padding+bord </script> </body> </html>
例子:回到顶部
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>回到顶部</title> <style> .Go_Top{position: fixed;right: 20px;bottom: 50px;width: 40px;height: 40px;background: rgba(0,0,0,0.3);cursor: pointer;z-index: 1} .Go_Top_Change{position: fixed;right: 20px;bottom: 50px;width: 40px;height: 40px;background: rgba(0,0,0,0.6);visibility: hidden;z-index: 2;text-align: center;line-height: 19px} .Go_Top:hover .Go_Top_Change{ visibility: visible; } .Hide{display: none} </style> </head> <body onscroll="Get_Height_Scroll()"> <div style="height: 2000px"></div> <div class="Go_Top Hide" id="go_top"> <div class="Go_Top_Change" onclick="Go_Top()">回到顶部</div> </div> <script> function Get_Height_Scroll(){ var height_scroll = document.body.scrollTop; var go_top = document.getElementById(‘go_top‘); if(height_scroll > 100){ go_top.classList.remove(‘Hide‘) }else { go_top.classList.add(‘Hide‘) } } function Go_Top(){ document.body.scrollTop = 0; } </script> </body> </html>
例子:滚动菜单
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滚动菜单</title> <style> *{margin: 0;padding: 0} body{background: #DDDDDD} li {list-style-type:none;text-align: center} .w{margin: 0 auto} .bolder{font-weight: bolder;background: #27a9e3} .fixed{position: fixed;top: 20px} .bg_head{height: 45px;background: #0f5179} .bg_content{width: 960px;background: white;height: 2000px} .bg_content .menu{width: 200px;float: left} .bg_content .content{width: 758px;height: 100%;border:1px solid #000000;float: right;text-align: center} </style> </head> <body onscroll="Scroll()"> <div class="bg_head" ></div> <div class="bg_content w"> <div class="menu" id="Menu"> <ul> <li style="position: relative;left: 0"><h2 style="line-height: 60px;" id="menu_contents">目  录</h2></li> </ul> <ul style="line-height: 30px" id="menu_chapter"> <li >第一章</li> <li>第二章</li> <li>第三章</li> </ul> </div> <div class="content" id="content"> <div style="height: 500px"><h2>目  录</h2></div> <div style="height: 1400px">第一章</div> <div style="height: 50px">第二章</div> <div style="height: 50px">第三章</div> </div> </div> <script> function Scroll(){ var scroll_top = document.body.scrollTop; var menu = document.getElementById(‘Menu‘); var content_charen_list = document.getElementById(‘content‘).children; var menu_li = menu.getElementsByTagName(‘li‘); if(scroll_top > 80){ menu.classList.add(‘fixed‘) }else { menu.classList.remove(‘fixed‘) } for(var i=0;i<content_charen_list.length;i++){ var content_item = content_charen_list[i]; var offset_top = content_item.offsetTop; var offset_height = content_item.offsetHeight; var top_count = offset_height + offset_top; for(var item=0;item<menu_li.length;item++){ if(scroll_top>offset_top && scroll_top<top_count) { menu_li[i].className = ‘bolder‘ } } } } </script> </body> </html>
7、提交表单
document.geElementById(‘form‘).submit()
例子:提交表单
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>form提交</title> </head> <body > <!--搜狗的:https://www.sogou.com/web?--> <form action="https://www.baidu.com/s?" id="Form" method="get"> <input type="text" name="wd"> <input type="submit" value="提交"> <input id="button" type="button" value="button" onclick="Button()"> </form> <script> function Button(){ document.getElementById(‘Form‘).submit(); } </script> </body> </html>
8、其他操作
console.log 输出框 alert 弹出框 confirm 确认框 // URL和刷新 location.href 获取URL location.href = "url" 重定向 location.reload() 重新加载 // 定时器 setInterval 多次定时器:跑马灯有例子 clearInterval 清除多次定时器 setTimeout 单次定时器 clearTimeout 清除单次定时器
例子:定时器之删除和恢复简单例子
<!DOCTYPE html> <html > <head> <title>定时器</title> <meta charset="utf-8"> <style> .hide{display: none} </style> </head> <body> <input type="button" value="删除" onclick="show_tips()" > <input type="button" value="恢复文件" id="delect_repeal" class="hide" onclick="stop_delect()"> <div id="delect_tips" class="hide">5s后彻底删除文件</div> <script> function show_tips(){ delect_tips =document.getElementById(‘delect_tips‘); delect_repeal = document.getElementById(‘delect_repeal‘); delect_repeal.classList.remove(‘hide‘); delect_tips.classList.remove(‘hide‘); //setTimeout(hide_tips,5000) item = setTimeout(hide_tips,5000) } function hide_tips(){ delect_repeal.className=‘hide‘; delect_tips.className=‘hide‘; } function stop_delect(){ clearTimeout(item) } </script> </body> </html>
参考:http://www.cnblogs.com/suoning/p/5656922.html
本文出自 “发酸的牛奶” 博客,谢绝转载!
以上是关于JavaScript 之 DOM编程的主要内容,如果未能解决你的问题,请参考以下文章