首页 > 代码库 > DOM操作及实例操作
DOM操作及实例操作
一.前言
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
二.查找 HTML 元素
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
document.getElementById 根据ID获取一个标签document.getElementsByName 根据name属性获取标签集合document.getElementsByClassName 根据class属性获取标签集合document.getElementsByTagName 根据标签名获取标签集合例;
<!DOCTYPE html><html><head><meta charset="utf-8"><title>title</title></head><body><p class="intro">你好世界!</p><p>该实例展示了 <b>getElementsByTagName</b> 方法</p><div>该实例展示了 <b>getElementsByClassName</b> 方法!</div><p id="value">该实例展示了 <b>getElementById</b> 方法</p><script> x=document.getElementsByClassName("intro"); y=document.getElementsByTagName(‘div‘); z=document.getElementById("value"); document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>"); document.write(‘<p>文本来自div标签‘ + y[0].innerHTML + "</p>"); document.write(‘<p>文本来自id为value的内容;‘ + z.innerHTML + "</p>");</script></body></html>
2.2间接查找
parentNode // 父节点childNodes // 所有子节点firstChild // 第一个子节点lastChild // 最后一个子节点nextSibling // 下一个兄弟节点previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素children // 所有子标签firstElementChild // 第一个子标签元素lastElementChild // 最后一个子标签元素nextElementtSibling // 下一个兄弟标签元素previousElementSibling // 上一个兄弟标签元素
三.操作
1.内容
innerText 文本outerTextinnerHTML HTML内容innerHTML value 值例 ：
<html><body><p id="p1">Hello World!</p><script>document.getElementById("p1").innerHTML="新文本!";</script></body></html>
<!DOCTYPE html><html><body><img id="image" src="http://www.mamicode.com/smiley.gif"><script>document.getElementById("image").src="http://www.mamicode.com/landscape.jpg";</script></body></html>
<!DOCTYPE html><html><body><script>document.write(Date());</script></body></html>2.属性
attributes // 获取所有标签属性setAttribute(key,value) // 设置标签属性getAttribute(key) // 获取指定标签属性 /*var atr = document.createAttribute("class");atr.nodeValue="http://www.mamicode.com/democlass";document.getElementById(‘n1‘).setAttributeNode(atr);*/
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <input type="button" value="http://www.mamicode.com/全选" onclick="CheckAll();"/> <input type="button" value="http://www.mamicode.com/取消" onclick="CancelAll();"/> <input type="button" value="http://www.mamicode.com/反选" onclick="ReverseCheck();"/> <table border="1" > <thead> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> <tr> <td><input type="checkbox" /></td> <td>111</td> <td>222</td> </tr> </tbody> </table> <script> function CheckAll(ths){ var tb = document.getElementById(‘tb‘); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0]; inp.checked = true; } } } function CancelAll(ths){ var tb = document.getElementById(‘tb‘); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0]; inp.checked = false; } } } function ReverseCheck(ths){ var tb = document.getElementById(‘tb‘); var trs = tb.childNodes; for(var i =0; i<trs.length; i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ var inp = current_tr.firstElementChild.getElementsByTagName(‘input‘)[0]; if(inp.checked){ inp.checked = false; }else{ inp.checked = true; } } } } </script></body></html>
3.class操作
className // 获取所有类名classList.remove(cls) // 删除指定类classList.add(cls) // 添加类
例：
<html><body id="myid" class="mystyle"><script type="text/javascript"> x=document.getElementsByTagName(‘body‘)[0]; document.write("Body CSS class: " + x.className); document.write("<br />"); document.write("An alternate way: "); document.write(document.getElementById(‘myid‘).className);</script></body></html>
<!DOCTYPE html><html><head><meta charset="utf-8"><title>title</title><style>.mystyle { width: 300px; height: 50px; background-color: coral; color: white; font-size: 25px;}</style></head><body><p>点击按钮为 DIV 元素添加 "mystyle" 类。</p><button onclick="myFunction()">点我</button><div id="myDIV">我是一个 DIV 元素。</div><script>function myFunction() { document.getElementById("myDIV").classList.add("mystyle");}</script></body></html>
<!DOCTYPE html><html><head><meta charset="utf-8"><title>title</title><style>.mystyle { width: 300px; height: 50px; background-color: coral; color: white; font-size: 25px;}.delcss{ background-color: gray; font-size: 40px;}</style></head><body><p>点击按钮为 DIV 元素添加 "mystyle" 类。</p><button onclick="myFunction()">点我</button><div id="myDIV">我是一个 DIV 元素。</div><div id="delcss" class="delcss"> 删除样式</div><script>function myFunction() { document.getElementById("myDIV").classList.add("mystyle"); document.getElementById("delcss").classList.remove("delcss")}</script></body></html>
<!DOCTYPE html><html lang="en"><!--弹框--><head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{display: none} .c1{ position: fixed; background: rgba(0,0,0,.6); left: 0; top:0; bottom: 0; right: 0; z-index: 2; } .c2{ position: fixed; background-color: white; height: 300px; width: 300px; top:50%; left:50%; margin-top: -150px; margin-left: -150px; z-index: 3; } </style></head><body> <div> <table> <tr> <td>1</td> <td>2</td> <td> <input type="button" value="点我" onclick="Show();"> </td> </tr> <tr> <td>1</td> <td>2</td> <td> <input type="button" value="点我" onclick="Show();"> </td> </tr> <tr> <td>1</td> <td>2</td> <td> <input type="button" value="点我" onclick="Show();"> </td> </tr> </table> </div> <div id="shade" class="c1 hide"></div> <div id="modal" class="c2 hide"> <p>用户：<input type="text"/></p> <p>密码：<input type="password"/></p> <p> <input type="button" value="确定"> <input type="button" value="取消" onclick="Hide();"> </p> </div> <script> function Show() { document.getElementById("shade").classList.remove(‘hide‘); document.getElementById("modal").classList.remove(‘hide‘); } function Hide() { document.getElementById("shade").classList.add(‘hide‘); document.getElementById("modal").classList.add(‘hide‘); } </script></body></html>
4.标签操作
a.创建标签
// 方式一var tag = document.createElement(‘a‘)tag.innerText = "Test"tag.className = "c1"tag.href = "http://www.cnblogs.com/test" // 方式二var tag = "<a class=‘c1‘ href=‘http://www.cnblogs.com/test‘>test</a>"
b.操作标签
// 方式一var obj = "<input type=‘text‘ />";xxx.insertAdjacentHTML("beforeEnd",obj);xxx.insertAdjacentElement(‘afterBegin‘,document.createElement(‘p‘)) //注意：第一个参数只能是‘beforeBegin‘、 ‘afterBegin‘、 ‘beforeEnd‘、 ‘afterEnd‘ // 方式二var tag = document.createElement(‘a‘)xxx.appendChild(tag)xxx.insertBefore(tag,xxx[1])
5、样式操作
改变 HTML 元素的样式
document.getElementById(id).style.property=新样式
例;
<!DOCTYPE html><html><head><meta charset="utf-8"><title>title</title></head><body><p id="p1">Hello World!</p><p id="p2">Hello World!</p><script>document.getElementById("p2").style.color="blue";document.getElementById("p2").style.fontFamily="Arial";document.getElementById("p2").style.fontSize="larger";</script><p>以上段落通过脚本修改。</p></body></html>
<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、位置操作
总文档高度document.documentElement.offsetHeight 当前文档占屏幕高度document.documentElement.clientHeight 自身高度tag.offsetHeight 距离上级定位高度tag.offsetTop 父定位标签tag.offsetParent 滚动高度tag.scrollTop /* clientHeight -> 可见区域：height + padding clientTop -> border高度 offsetHeight -> 可见区域：height + padding + border offsetTop -> 上级定位标签的高度 scrollHeight -> 全文高：height + padding scrollTop -> 滚动高度 特别的： document.documentElement代指文档根节点*/<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body style="margin: 0;"> <div style="height: 900px;"> </div> <div style="padding: 10px;"> <div id="i1" style="height:190px;padding: 2px;border: 1px solid red;margin: 8px;"> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>asdf</p> </div> </div> <script> var i1 = document.getElementById(‘i1‘); console.log(i1.clientHeight); // 可见区域：height + padding console.log(i1.clientTop); // border高度 console.log(‘=====‘); console.log(i1.offsetHeight); // 可见区域：height + padding + border console.log(i1.offsetTop); // 上级定位标签的高度 console.log(‘=====‘); console.log(i1.scrollHeight); //全文高：height + padding console.log(i1.scrollTop); // 滚动高度 console.log(‘=====‘); </script></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><style> body{ margin: 0px; } img { border: 0; } ul{ padding: 0; margin: 0; list-style: none; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .wrap{ width: 980px; margin: 0 auto; } .pg-header{ background-color: #303a40; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); box-shadow: 0 2px 5px rgba(0,0,0,.2); } .pg-header .logo{ float: left; padding:5px 10px 5px 0px; } .pg-header .logo img{ vertical-align: middle; width: 110px; height: 40px; } .pg-header .nav{ line-height: 50px; } .pg-header .nav ul li{ float: left; } .pg-header .nav ul li a{ display: block; color: #ccc; padding: 0 20px; text-decoration: none; font-size: 14px; } .pg-header .nav ul li a:hover{ color: #fff; background-color: #425a66; } .pg-body{ } .pg-body .catalog{ position: absolute; top:60px; width: 200px; background-color: #fafafa; bottom: 0px; } .pg-body .catalog.fixed{ position: fixed; top:10px; } .pg-body .catalog .catalog-item.active{ color: #fff; background-color: #425a66; } .pg-body .content{ position: absolute; top:60px; width: 700px; margin-left: 210px; background-color: #fafafa; overflow: auto; } .pg-body .content .section{ height: 500px; }</style><body onscroll="ScrollEvent();"><div class="pg-header"> <div class="wrap clearfix"> <div class="logo"> <a href="#"> <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> </a> </div> <div class="nav"> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">功能一</a> </li> <li> <a href="#">功能二</a> </li> </ul> </div> </div></div><div class="pg-body"> <div class="wrap"> <div class="catalog"> <div class="catalog-item" auto-to="function1"><a>第1张</a></div> <div class="catalog-item" auto-to="function2"><a>第2张</a></div> <div class="catalog-item" auto-to="function3"><a>第3张</a></div> </div> <div class="content"> <div menu="function1" class="section"> <h1>第一章</h1> </div> <div menu="function2" class="section"> <h1>第二章</h1> </div> <div menu="function3" class="section"> <h1>第三章</h1> </div> </div> </div></div> <script> function ScrollEvent(){ var bodyScrollTop = document.body.scrollTop; if(bodyScrollTop>50){ document.getElementsByClassName(‘catalog‘)[0].classList.add(‘fixed‘); }else{ document.getElementsByClassName(‘catalog‘)[0].classList.remove(‘fixed‘); } } </script></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><style> body{ margin: 0px; } img { border: 0; } ul{ padding: 0; margin: 0; list-style: none; } h1{ padding: 0; margin: 0; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .wrap{ width: 980px; margin: 0 auto; } .pg-header{ background-color: #303a40; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); box-shadow: 0 2px 5px rgba(0,0,0,.2); } .pg-header .logo{ float: left; padding:5px 10px 5px 0px; } .pg-header .logo img{ vertical-align: middle; width: 110px; height: 40px; } .pg-header .nav{ line-height: 50px; } .pg-header .nav ul li{ float: left; } .pg-header .nav ul li a{ display: block; color: #ccc; padding: 0 20px; text-decoration: none; font-size: 14px; } .pg-header .nav ul li a:hover{ color: #fff; background-color: #425a66; } .pg-body{ } .pg-body .catalog{ position: absolute; top:60px; width: 200px; background-color: #fafafa; bottom: 0px; } .pg-body .catalog.fixed{ position: fixed; top:10px; } .pg-body .catalog .catalog-item.active{ color: #fff; background-color: #425a66; } .pg-body .content{ position: absolute; top:60px; width: 700px; margin-left: 210px; background-color: #fafafa; overflow: auto; } .pg-body .content .section{ height: 500px; border: 1px solid red; }</style><body onscroll="ScrollEvent();"><div class="pg-header"> <div class="wrap clearfix"> <div class="logo"> <a href="#"> <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> </a> </div> <div class="nav"> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">功能一</a> </li> <li> <a href="#">功能二</a> </li> </ul> </div> </div></div><div class="pg-body"> <div class="wrap"> <div class="catalog" id="catalog"> <div class="catalog-item" auto-to="function1"><a>第1张</a></div> <div class="catalog-item" auto-to="function2"><a>第2张</a></div> <div class="catalog-item" auto-to="function3"><a>第3张</a></div> </div> <div class="content" id="content"> <div menu="function1" class="section"> <h1>第一章</h1> </div> <div menu="function2" class="section"> <h1>第二章</h1> </div> <div menu="function3" class="section"> <h1>第三章</h1> </div> </div> </div></div> <script> function ScrollEvent(){ var bodyScrollTop = document.body.scrollTop; if(bodyScrollTop>50){ document.getElementsByClassName(‘catalog‘)[0].classList.add(‘fixed‘); }else{ document.getElementsByClassName(‘catalog‘)[0].classList.remove(‘fixed‘); } var content = document.getElementById(‘content‘); var sections = content.children; for(var i=0;i<sections.length;i++){ var current_section = sections[i]; // 当前标签距离顶部绝对高度 var scOffTop = current_section.offsetTop + 60; // 当前标签距离顶部，相对高度 var offTop = scOffTop - bodyScrollTop; // 当前标签高度 var height = current_section.scrollHeight; if(offTop<0 && -offTop < height){ // 当前标签添加active // 其他移除 active var menus = document.getElementById(‘catalog‘).children; var current_menu = menus[i]; current_menu.classList.add(‘active‘); for(var j=0;j<menus.length;j++){ if(menus[j] == current_menu){ }else{ menus[j].classList.remove(‘active‘); } } break; } } } </script></body></html>
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><style> body{ margin: 0px; } img { border: 0; } ul{ padding: 0; margin: 0; list-style: none; } h1{ padding: 0; margin: 0; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .wrap{ width: 980px; margin: 0 auto; } .pg-header{ background-color: #303a40; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); box-shadow: 0 2px 5px rgba(0,0,0,.2); } .pg-header .logo{ float: left; padding:5px 10px 5px 0px; } .pg-header .logo img{ vertical-align: middle; width: 110px; height: 40px; } .pg-header .nav{ line-height: 50px; } .pg-header .nav ul li{ float: left; } .pg-header .nav ul li a{ display: block; color: #ccc; padding: 0 20px; text-decoration: none; font-size: 14px; } .pg-header .nav ul li a:hover{ color: #fff; background-color: #425a66; } .pg-body{ } .pg-body .catalog{ position: absolute; top:60px; width: 200px; background-color: #fafafa; bottom: 0px; } .pg-body .catalog.fixed{ position: fixed; top:10px; } .pg-body .catalog .catalog-item.active{ color: #fff; background-color: #425a66; } .pg-body .content{ position: absolute; top:60px; width: 700px; margin-left: 210px; background-color: #fafafa; overflow: auto; } .pg-body .content .section{ height: 500px; border: 1px solid red; }</style><body onscroll="ScrollEvent();"><div class="pg-header"> <div class="wrap clearfix"> <div class="logo"> <a href="#"> <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> </a> </div> <div class="nav"> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">功能一</a> </li> <li> <a href="#">功能二</a> </li> </ul> </div> </div></div><div class="pg-body"> <div class="wrap"> <div class="catalog" id="catalog"> <div class="catalog-item" auto-to="function1"><a>第1张</a></div> <div class="catalog-item" auto-to="function2"><a>第2张</a></div> <div class="catalog-item" auto-to="function3"><a>第3张</a></div> </div> <div class="content" id="content"> <div menu="function1" class="section"> <h1>第一章</h1> </div> <div menu="function2" class="section"> <h1>第二章</h1> </div> <div menu="function3" class="section" style="height: 200px;"> <h1>第三章</h1> </div> </div> </div></div> <script> function ScrollEvent(){ var bodyScrollTop = document.body.scrollTop; if(bodyScrollTop>50){ document.getElementsByClassName(‘catalog‘)[0].classList.add(‘fixed‘); }else{ document.getElementsByClassName(‘catalog‘)[0].classList.remove(‘fixed‘); } var content = document.getElementById(‘content‘); var sections = content.children; for(var i=0;i<sections.length;i++){ var current_section = sections[i]; // 当前标签距离顶部绝对高度 var scOffTop = current_section.offsetTop + 60; // 当前标签距离顶部，相对高度 var offTop = scOffTop - bodyScrollTop; // 当前标签高度 var height = current_section.scrollHeight; if(offTop<0 && -offTop < height){ // 当前标签添加active // 其他移除 active // 如果已经到底部，现实第三个菜单 // 文档高度 ＝ 滚动高度 + 视口高度 var a = document.getElementsByClassName(‘content‘)[0].offsetHeight + 60; var b = bodyScrollTop + document.documentElement.clientHeight; console.log(a+60,b); if(a == b){ var menus = document.getElementById(‘catalog‘).children; var current_menu = document.getElementById(‘catalog‘).lastElementChild; current_menu.classList.add(‘active‘); for(var j=0;j<menus.length;j++){ if(menus[j] == current_menu){ }else{ menus[j].classList.remove(‘active‘); } } }else{ var menus = document.getElementById(‘catalog‘).children; var current_menu = menus[i]; current_menu.classList.add(‘active‘); for(var j=0;j<menus.length;j++){ if(menus[j] == current_menu){ }else{ menus[j].classList.remove(‘active‘); } } } break; } } } </script></body></html>
7.提交表单
document.geElementById(‘form‘).submit()
8.其他操作
console.log 输出框alert 弹出框confirm 确认框 // URL和刷新location.href 获取URLlocation.href = "http://www.mamicode.com/url" 重定向location.reload() 重新加载 // 定时器setInterval 多次定时器clearInterval 清除多次定时器setTimeout 单次定时器clearTimeout 清除单次定时器四.事件
对于事件需要注意的要点：
- this
- event
- 事件链以及跳出
this标签当前正在操作的标签，event封装了当前事件的内容
实例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>title</title></head><body><h1 onclick="this.innerHTML=‘Ooops!‘">点击文本!</h1></body></html>
<!DOCTYPE html><html><head><meta charset="utf-8"><title>title</title></head><head><script>function myFunction(){ var x=document.getElementById("fname"); x.value=x.value.toUpperCase();}</script></head><body>输入你的名字: <input type="text" id="fname" onchange="myFunction()"><p>字母变大写</p></body></html>
<!DOCTYPE html><html><head><meta charset="utf-8"><title>title</title></head><body><div onmouseover="mOver(this)" onm ouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div><script>function mOver(obj){ obj.innerHTML="Thank You"}function mOut(obj){ obj.innerHTML="Mouse Over Me"}</script></body></html>
<!DOCTYPE html><html><head><meta charset="utf-8"><title>title</title></head><body><h1 onmouseover="style.color=‘red‘"onmouseout="style.color=‘black‘">将鼠标移至文部上</h1></body></html>
<!DOCTYPE html><html><head><meta charset="utf-8"><title>title</title></head><head><script>function mymessage(){ alert("消息在 onl oad 事件触发后弹出。");}</script></head><body onload="mymessage()"></body></html>
<!DOCTYPE html><html> <head> <meta charset=‘utf-8‘ /> <title></title> <style> .gray{ color:gray; } .black{ color:black; } </style> <script type="text/javascript"> function Enter(){ var id= document.getElementById("tip") id.className = ‘black‘; if(id.value==‘请输入关键字‘||id.value.trim()==‘‘){ id.value = ‘‘ } } function Leave(){ var id= document.getElementById("tip") var val = id.value; if(val.length==0||id.value.trim()==‘‘){ id.value = ‘请输入关键字‘ id.className = ‘gray‘; }else{ id.className = ‘black‘; } } </script> </head> <body> <input type=‘text‘ class=‘gray‘ id=‘tip‘ value=‘请输入关键字‘ onfocus=‘Enter();‘ onblur=‘Leave();‘/> </body></html>
<!DOCTYPE html><html> <head> <meta charset=‘utf-8‘ > <title>欢迎blue shit莅临指导 </title> <script type=‘text/javascript‘> function Go(){ var content = document.title; var firstChar = content.charAt(0) var sub = content.substring(1,content.length) document.title = sub + firstChar; } setInterval(‘Go()‘,1000); </script> </head> <body> </body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .style_before { color: lightgrey; } .style_after { color: black; } </style></head><body> <h3>爱好</h3> <div> <ul id="i1"> <li><input type="checkbox" value="1">篮球</li> <li><input type="checkbox" value="2">足球</li> <li><input type="checkbox" value="3">乒乓球</li> </ul> </div> <button onclick="Cheakall()">全选</button> <button onclick="Cancleall()">取消全选</button> <button onclick="Reversall()">反选</button> <script> function Cheakall() { var i1 = document.getElementById("i1"); var cheak = i1.getElementsByTagName("input"); for (i=0;i<cheak.length;i++) { cheak[i].checked = true; } } function Cancleall() { var i1 = document.getElementById("i1"); var cheak = i1.getElementsByTagName("input"); for (i=0;i<cheak.length;i++) { cheak[i].checked = false; } } function Reversall() { var i1 = document.getElementById("i1"); var cheak = i1.getElementsByTagName("input"); for (i=0;i<cheak.length;i++) { if (cheak[i].checked) { cheak[i].checked = false; }else { cheak[i].checked = true; } } } </script></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .hide { display: none; } .c1 { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.6); z-index: 2; } .c2 { position: fixed; width: 400px; height: 300px; top: 50%; left: 50%; z-index: 3; margin-top: -150px; margin-left: -200px; background-color: white; text-align: center; padding-top: 150px; } </style></head><body> <div><input type="button" value="登录" onclick="hihi()"></div> <div id="cc1" class="c1 hide"></div> <div id="cc2" class="c2 hide"> <div>用户名：<input type="text"></div> <div>密 码：<input type="text"></div> <input type="button" value="确定"> <input type="button" value="取消" onclick="hisl()"> </div> <script> function hihi() { document.getElementById("cc1").classList.remove("hide"); document.getElementById("cc2").classList.remove("hide"); } function hisl() { document.getElementById("cc1").classList.add("hide"); document.getElementById("cc2").classList.add("hide"); } </script></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; background-color: #dddddd; } .w{ margin: 0 auto; width: 980px; } .pg-header{ background-color: black; color: white; height: 48px; } .pg-body .menu{ position: absolute; left: 200px; width: 180px; background-color: white; float: left; } .pg-body .menu .active{ background-color: #425a66; color: white; } .pg-body .fixed{ position: fixed; top: 10px; } .pg-body .content{ position: absolute; left: 385px; right: 200px; background-color: white; float: left; } .pg-body .content .item{ height: 900px; } </style></head><body onscroll="Hua();"> <div class="pg-header"> <div class="w"></div> </div> <div class="pg-body"> <div id="menu" class="menu"> <ul> <li>第一章</li> <li>第二章</li> <li>第三章</li> </ul> </div> <div id="content" class="content"> <div class="item">床前明月管</div> <div class="item">疑是地上霜</div> <div class="item" style="height: 100px">我是郭德纲</div> </div> </div> <script> function Hua() { var xo = document.getElementById("menu"); var huaGao = document.body.scrollTop; if (document.body.scrollTop>48){ xo.classList.add("fixed"); }else { xo.classList.remove("fixed"); } var bod = document.body.offsetHeight; var conAbs = document.getElementsByClassName("content")[0].offsetHeight; var ck = document.documentElement.clientHeight;// console.log((bod + conAbs) == (ck + huaGao)); if ((bod + conAbs) == (ck + huaGao)) { var lenLi = xo.getElementsByTagName("li"); for (var i=0;i<lenLi.length;i++){ if (i == lenLi.length - 1){ lenLi[i].className = "active"; }else { lenLi[i].className = ""; } } return } var item = document.getElementById("content").children; for (var i=0;i<item.length;i++){ var currentItem = item[i]; var currentItemBodyTop = currentItem.offsetTop + currentItem.offsetParent.offsetTop; var currentItemWindowTop = currentItemBodyTop - huaGao; var currentHeight = currentItem.offsetHeight; var bottomHeight = currentItemBodyTop + currentHeight; var ziJi = xo.getElementsByTagName("li")[i]; if (currentItemWindowTop<0 && huaGao < bottomHeight){ ziJi.className = "active"; } else { ziJi.className = ""; } } } </script></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ul{ list-style: none; padding: 0; margin: 0; } ul li{ float: left; background-color: #2459a2; color: white; padding: 8px 10px; } .clearfix:after{ display: block; content: ‘.‘; height: 0; visibility: hidden; clear: both; } .hide{ display: none; } .tab-menu .title{ background-color: #dddddd; } .tab-menu .title .active{ background-color: #0099dd; color: black; } .tab-menu .content{ border: 1px solid #dddddd; min-height: 150px; } ul li:hover { cursor: pointer; } </style></head><body> <div style="width: 400px; margin: 0 auto;"> <div class="tab-menu"> <div class="title clearfix"> <ul> <li target="h1" class="active" onclick="Show(this);">索尼</li> <li target="h2" onclick="Show(this);">谷歌</li> <li target="h3" onclick="Show(this);">腾讯</li> </ul> </div> <div id="content" class="content"> <div con="h1">1...</div> <div con="h2" class="hide">2...</div> <div con="h3" class="hide">3...</div> </div> </div> </div> <script> function Show(ths) { var Showli = ths; var littarget = Showli.getAttribute("target"); var liclass = Showli.parentNode.children; for (var i=0;i<liclass.length;i++) { if (liclass[i].getAttribute("target") == littarget) { liclass[i].classList.add("active"); }else { liclass[i].classList.remove("active"); } } var liycontent = document.getElementById("content").children; for (var i=0;i<liycontent.length;i++) { if (liycontent[i].getAttribute("con") == littarget) { liycontent[i].className = ""; }else { liycontent[i].className = "hide"; } } } </script></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .go-top { position: fixed; right: 28px; bottom: 19px; width: 38px; height: 40px; background-color: aliceblue; } .hide { display: none; } </style></head><body onscroll="Func();"> <div style="height: 2000px"></div> <div id="i2" class="go-top hide"> <a onclick="GoTop();">返回顶部</a> </div> <script> function Func() { var scrolltop = document.body.scrollTop; var ii = document.getElementById("i2"); if (scrolltop>300) { ii.classList.remove("hide"); }else { ii.classList.add("hide"); } } function GoTop() { document.body.scrollTop = 0; } </script></body></html>
DOM操作及实例操作
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。