DOM : Document Object Model 文档对象模型
文档：html页面
文档对象：页面中元素
文档对象模型：定义 为了能够让程序(js)去操作页面中的元素
DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵数中的每一个元素（节点）
元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 Node.TEXT_NODE(3) CDATA节点 Node.CDATA_SECTION_NODE(4) 实体引用名称节点 Node.ENTRY_REFERENCE_NODE(5) 实体名称节点 Node.ENTITY_NODE(6) 处理指令节点 Node.PROCESSING_INSTRUCTION_NODE(7) 注释节点 Node.COMMENT_NODE(8) 文档节点 Node.DOCUMENT_NODE(9) 文档类型节点 Node.DOCUMENT_TYPE_NODE(10) 文档片段节点 Node.DOCUMENT_FRAGMENT_NODE(11) DTD声明节点 Node.NOTATION_NODE(12)
obj.childNodes：返回节点的子节点集合，是对象，需要用对象的处理方法。
obj.children：获取obj的元素子节点，是个数组，
使用例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM</title> <script type="text/javascript"> window.onload = function(){ var oUl = document.getElementById('ul1'); alert(oUl.childNodes.length); //9，因为除了标签，还有文本节点也算。 alert(oUl.nodeType); //1，说明是元素节点。 alert(oUl.childNodes[0].nodeType); //3，说明是文本节点。 alert(oUl.childNodes[1].nodeType); //1，说明是元素节点。 /*for (var i = 0; i < oUl.childNodes.length; i++) { if (oUl.childNodes[i].nodeType == 1) { oUl.childNodes[i].style.background = 'red'; } }*/ for (var i = 0; i < oUl.children.length; i++) { oUl.children[i].style.background = 'red'; } //标准浏览器下，基本都可以使用这个，不需要采用备注的方法。除非碰到IE7以下。 } </script> </head> <body> <ul id="ul1"> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> </ul> </body> </html>
obj.firstChild :第一个子节点
obj.firstElementChild :第一个元素类型子节点，标准常用。举例如下（ul的第一个子节点的背景颜色变换）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function(){ var oUl = document.getElementById('ul1'); oUl.firstElementChild.style.background = 'red'; //标准浏览器下直接用 /*if (oUl.firstElementChild) { oUl.firstElementChild.style.background = 'red'; }else{ oUl.firstChild.style.background = 'red'; }*/ } </script> </head> <body> <ul id="ul1"> <li>11111</li> <li>11111</li> <li>11111</li> <li>11111</li> </ul> </body> </body> </html>
obj.lastChild：最后一个子节点
obj.lastElementChild：最后一个元素子节点，标准浏览器下常用
obj.nextSibling：下一个兄弟节点
obj.nextElementSibling：下一个兄弟元素节点，标准浏览器常用。
obj.previousSibling：上一个兄弟节点
obj.previousElementSibling：上一个兄弟元素节点，标准浏览器常用。
obj.parentNode：父节点（无兼容问题），父节点举例如下（实现点击隐藏的功能，a的父节点就是每个li）：
obj.offsetParent：最近的一个有定位元素的父节点。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>parentNode</title> <script type="text/javascript"> window.onload = function(){ var aA = document.getElementsByTagName('a'); for (var i = 0; i < aA.length; i++) { aA[i].onclick = function(){ // a的父节点就是每个li this.parentNode.style.display = 'none'; } } } </script> </head> <body> <ul id="ul"> <li>1111111<a href="#">隐藏</a></li> <li>22222<a href="#">隐藏</a></li> <li>333333<a href="#">隐藏</a></li> <li>444444<a href="#">隐藏</a></li> </ul> </body> </html>
offsetParent举例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>offsetParent</title> <style type="text/css"> div{padding:40px 50px;} #div1{background: red;position: relative;} #div2{background: yellow;} #div3{background: green;} </style> <script type="text/javascript"> window.onload = function(){ var oDiv3 = document.getElementById('div3'); alert(oDiv3.parentNode.id); //div2 alert(oDiv3.offsetParent.id); //div1 } </script> </head> <body id='body1'> <div id="div1"> <div id="div2"> <div id="div3">div3</div> </div> </div> </body> </html>
offsetLeft/offsetTop：当前元素到定位父级的距离（与offsetParent很相似）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>offsetLfet/offsetTop</title> <style type="text/css"> div{padding:40px 50px;} #div1{background: red;position: relative;} #div2{background: yellow;} #div3{background: green;} </style> <script type="text/javascript"> window.onload = function(){ var oDiv3 = document.getElementById('div3'); alert(oDiv3.offsetLeft); //100,因为此时是div3到div1的左边距 } </script> </head> <body> <div id="div1"> <div id="div2"> <div id="div3">div3</div> </div> </div> </body> </html>
style.width：样式宽
clientWidth：样式宽+padding（可视区域）
offsetWidth：样式宽+padding+boeder宽（占位宽）
例：页面的任何元素到页面的距离，无论该元素父级是否有定位：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>getTop</title> <style type="text/css"> div{padding:40px 50px;} #div1{background: red;position: relative;} #div2{background: yellow;position: relative;} #div3{background: green;} </style> <script type="text/javascript"> window.onload = function(){ var oDiv3 = document.getElementById('div3'); var iTop = 0; var obj = oDiv3; while (obj) { iTop += obj.offsetTop; //iTop等于obj到有定位父级的距离。 obj = obj.offsetParent; //obj等于obj的有定位的父级的元素 } alert(iTop); //88,因为40+40+8 } </script> </head> <body> <div id="div1"> <div id="div2"> <div id="div3">div3</div> </div> </div> </body> </html>
封装成函数（// 获取任何一个元素到界面的左边距和上边距）：
// 获取任何一个元素到界面的左边距和上边距。
function getPos(obj){
var pos = {left:0,top:0};
while(obj){
pos.left += obj.offsetLeft;
pos.top += obj.offsetTop;
obj = obj.offsetParent;
}
return pos;
}
document.createElement('li')：创建一个元素li
父元素.appendChild(obj)：添加子元素obj到父元素中，添加到子节点最后一位。
父元素.insertBefore(obj,已有子元素)：添加子元素到obj到父元素中，添加到已有子元素的前面。默认插入到子元素第一位。
父元素.remove(obj)：将obj元素删除。
以下为留言板的例子（自由留言和删除）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>元素的创建</title> <script type="text/javascript"> window.onload = function(){ // 接下来做一个留言板。为什么不用innerHTML，因为采用inneHTML每次都得加上原有内容，如果数据量大，根本没有办法完成。 var oText = document.getElementById('text1'); var oBtn = document.getElementById('btn1'); var oUl = document.getElementById('ul1'); oBtn.onclick = function(){ // 创建元素li var oLi = document.createElement('li'); // oLi.innerHTML = oText.value + '<a href="javascript:;" title="">删除</a>'; oLi.innerHTML = oText.value; var oA = document.createElement('a'); oA.innerHTML = '删除'; oA.href = 'javascript:;'; oLi.appendChild(oA); oA.onclick = function(){ oUl.removeChild(this.parentNode); } /*以下这个方法，留言每次都添加到最后。*/ oUl.appendChild(oLi); // 以下为什么不能直接用insertBefore，因为insertBefore在IE下刚开始没有子节点是不能添加的，所以刚开始appendChild就好了，而就算是IE下，有了第一个子节点，那么接下来就会走insertBefore了。 if (oUl.children[0]) { oUl.insertBefore(oLi,oUl.children[0]); }else{ oUl.appendChild(oLi); } } } </script> </head> <body> <input id="text1" type="text" name="" value="" placeholder="请输入留言"> <input id="btn1" type="button" name="" value="留言"> <ul id="ul1"></ul> </body> </html>
body为父元素的时候，直接写document.body。就可以在js中找到body这个节点。
父元素.replaceChild(obj，被替换的节点)
以下为replaceChild的实例（点击的时候，用div1替换p）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); var oBtn = document.getElementById('btn1'); var oP = document.getElementById('p1'); oBtn.onclick = function(){ document.body.replaceChild(oDiv,oP); } } </script> </head> <body> <div id="div1">div1</div> <input id="btn1" type="button" name="" value="替换"> <hr/> <p id="p1">ppppppppppppp</p> </body> </html>
——————appendChild、insertBefore、replaceChild，都可以操作动态创建出来的新节点，也可以操作已有节点。类似于剪切操作，发生改变之后，原有的就没了。
例子：构建函数function getElementsByClassName(parent,tagName,classN)，实现通过className来获取元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>getElementsByClassName</title> <script type="text/javascript"> window.onload = function(){ var oUl1 = document.getElementById('ul1'); var oUl2 = document.getElementById('ul2'); var aLi = getElementsByClassName(document,'li','box'); for (var i = 0; i < aLi.length; i++) { aLi[i].style.background = 'red'; // console.log(aLi); //查看日志 } function getElementsByClassName(parent,tagName,classN){ var aEls = parent.getElementsByTagName(tagName); var arr = []; for (var i = 0; i < aEls.length; i++) { // 这个方法在碰到一个class含多个值得时候，会不识别，所以我们需要用split方法把多个class值拆分成数组，然后遍历对比。 /*if (aEls[i].className == className) { arr.push(aEls[i]); }*/ var aClassName = aEls[i].className.split(' '); for (var j = 0; j < aClassName.length; j++) { if (aClassName[j] == classN) { arr.push(aEls[i]); } } } return arr; } } </script> </head> <body> <ul id="ul1"> <li>11111111</li> <li class="box box2">2222222222</li> <li class="box1">133333333333</li> <li class="box">444444441</li> </ul> <ul id="ul2"> <li>11111111</li> <li class="box">2gfsdfdsf2</li> <li class="box1">133gdsgdsgfds33333</li> <li class="box">44gdsgdsgds41</li> </ul> </body> </html>
表格格式。也可以直接把thead和tbody拿掉，直接留tr和td
<table>
<thead>
<tr>
<th>header</th>
<th>header</th>
<th>header</th>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
表格操作：
tHead：表格头
tBodies：表格正文
tFoot：表格尾
rows：行
cells：列
例子：弹出第1个正文的第2行，第2列。
var oTab = document.getElementById('tab'); alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);
以下是表格操作的示例，实现了表格数据的填充和删除。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格操作</title> <script type="text/javascript"> window.onload = function(){ var data = [ {id:1,username:'leo',sex:'男'}, {id:2,username:'小美',sex:'女'}, {id:3,username:'王亮',sex:'男'}, {id:4,username:'杜鹏',sex:'男'}, ]; var oTab = document.getElementById('tab'); var oTbody = oTab.tBodies[0]; for (var i = 0; i < data.length; i++) { var oTr = document.createElement('tr'); var oTd = document.createElement('td');//创建td，插入到tr的子项 oTd.innerHTML = data[i].id; oTr.appendChild(oTd); if (i % 2 == 0) { oTr.style.background = '#ccc'; } oTd = document.createElement('td');//创建td，再插入到tr的子项 oTd.innerHTML = data[i].username; oTr.appendChild(oTd); oTd = document.createElement('td');//创建td，再插入到tr的子项 oTd.innerHTML = data[i].sex; oTr.appendChild(oTd); oTd = document.createElement('td');//创建td，再插入到tr的子项 // oTd.innerHTML = '<a href="javascript">删除</a>'; oTr.appendChild(oTd); // 先创建td，然后往td里面插入a标签。 var oA = document.createElement('a'); oA.innerHTML = '删除'; oA.href="javascript:;"; oA.onclick = function(){ oTbody.removeChild(this.parentNode.parentNode); for (var i = 0; i < oTbody.rows.length; i++) { if (i % 2 == 0) { oTbody.rows[i].style.background = '#ccc'; }else{ oTbody.rows[i].style.background = '#fff'; } } } oTd.appendChild(oA); oTbody.appendChild(oTr); } } </script> </head> <body> <table id="tab" width='100%' border='1px' cellspacing="0" > <thead> <tr> <th>编号</th> <th>姓名</th> <th>男</th> <th>操作</th> </tr> </thead> <tbody> <!-- <tr> <td>1</td> <td>leo</td> <td>男</td> <td><a href="javascript:;">删除</a></td> </tr> <tr> <td>2</td> <td>小美</td> <td>女</td> <td><a href="javascript:;">删除</a></td> </tr> --> </tbody> </table> </body> </html>
表单操作：
在表单操作中有一种更方便的获取形式，那就是使用name来获取，那就是oForm.name，而且name在提交数据的时候也是必不可少的。如下：
这里面的oForm.text1.value指的就是form之下的name为'text1'的元素的value值。
onchange：当表单里面的值发生改变的时候触发。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单操作</title> <script type="text/javascript"> window.onload = function(){ var oForm = document.getElementById('form1'); oForm.text1.onchange = function(){ alert(this.value) } } </script> </head> <body> <form id="form1" action="" method="get" accept-charset="utf-8"> <input type="text" name="text1" value="what"> </form> </body> </html>
以下是表单操作实例2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单操作</title> <script type="text/javascript"> window.onload = function(){ var oForm = document.getElementById('form1'); // alert(oForm.text1.value); oForm.text1.onchange = function(){ alert(this.value); } oForm.sex.onchange = function(){ } // oForm.a[0]=>>即，html被选中的时候触发 oForm.a[0].onchange = function(){ alert(1); } // alert(oForm.city.value); oForm.city.onchange = function(){ alert(oForm.city.value); } oForm.btn.onclick = function(){ for (var i = 0; i < oForm.sex.length; i++) { if (oForm.sex[i].checked) { alert(oForm.sex[i].value + '是被选中的'); }else{ alert(oForm.sex[i].value + '是非选中状态'); } } } } </script> </head> <body> <form id="form1" action="" method="get" accept-charset="utf-8"> <input type="text" name="text1" value="what"> <!-- checked是默认被选中的意思，如果被选中了，就一定有这个属性，可以用这个做一些判断当前元素是否被选中。 --> <input type="radio" name="sex" value="man" checked>男 <input type="radio" name="sex" value="women">女 <input type="radio" name="sex" value="other">其他 <input type="checkbox" name="a" value="html">html <input type="checkbox" name="a" value="javascript">javascript <input type="checkbox" name="a" value="css">css <select name="city"> <option value="">请选择城市</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> </select> <input type="button" name="btn" value="按钮"> </form> </body> </html>
表单事件：
onsubmit：表单提交的时候触发。
onreset：表单重置的时候触发。
confirm：选择对话框，选确定，返回的是true，选取消，返回的是false。
例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>onsubmit/onreset</title> <script type="text/javascript"> window.onload = function(){ var oForm = document.getElementById('form'); oForm.onsubmit = function(){ if (this.text1.value == '') { alert('请输入内容'); return false;//当为空的时候，不提交，跟onreset类似。返回false，则不重置。 } } oForm.onreset = function(){ return confirm('确定要重置吗？'); } } </script> </head> <body> <form id="form" action="https://www.baidu.com" method="get" accept-charset="utf-8"> <input type="text" name="text1"> <input type="submit" name="dosubmit" value="提交"> <input type="reset" name="reset" value="重置"> </form> </body> </html>
BOM的操：定义了JS操作浏览器的模型
因为BOM中大部分都是window下的操作，所有window可以不写。
window.open(url)：打开新的窗口。
window.close()：关闭窗口，很少用。
BOM操作例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BOM</title> <script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById('btn'); var opener = null; oBtn.onclick = function(){ opener = window.open(); // alert(opener == window); //返回false，说明是新窗口，而不是当前窗口。说明我们可以直接对新窗口进行操作 opener.document.body.style.background = '#f00'; } } </script> </head> <body> <input id="btn" type="submit" value="打开"> </body> </html>
window.navigator.userAgent：当前浏览器的信息。
window.location：浏览器地址信息。
window.location.search：url?后面的内容。
window.location.hash：url#后面的内容。
举例：
window.onload = function(){
alert(window.navigator.userAgent);
alert(window.location);
}
document.documentElement.clientWidth //可视区宽度（看得到的）
document.documentElement.clientHeight //可视区高度（看得到的）
document.body.scrollTop //页面的滚动上边距
document.body.scrollLeft //页面的滚动左边距
document.documentElement.scrollTop //如oDiv.sscrollTop，如果div有滚动条的话。
document.body.scrollHeight：内容高度
document.documenElement.offsetHeight：文档高度 document.body.offsetHeight（chrome下）
// 为什么需要||呢，因为chrome认为滚动条是属于body的。
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
alert(scroll);
onscroll：当滚动的时候触发。
onresize：当窗口大小发生改变的时候触发。
window.onload = function(){
var i = 0;
onscroll = function(){ //onreset同理
document.title = document.body.scrollTop;
// document.title = i++;
}
}
事件详解：
焦点事件：为了使浏览器能够接收（区分）用户输入的对象，当一个元素有焦点的时候，就可以接收用户的输入操作。比如输入、按钮、选项、a标签。就是按tab键的时候，能够跳转到下一元素的。DIV就没有焦点。
onfoucs：进入焦点
onblur：离开焦点
obj.focus：给指定元素设置焦点。
所以，当出现鼠标放到输入框的时候，想要清空元素，可以用以下方法：
<script type="text/javascript"> window.onload = function(){ var oText = document.getElementById('text1'); oText.onfocus = function(){ if (this.value = '请输入内容') { this.value = ''; } } oText.onblur = function(){ if (this.value = '') { this.value = '请输入内容'; } } } </script>
event：对象事件，当一个事情发生时，和当前对象发生的事件的有关的信息都会被保存到一个指定的地方-event对象。供我们需要的时候调用。
IE/chrome：event是一个内置的全局对象。
ev.clientX：事件发生时候，鼠标距离左边的距离。
距离：鼠标点击，弹出距离左边的值。
window.onload = function(){ function fn1(ev){ var ev = ev ||event /*for (var attr in ev) { console.log(attr + '=' + ev[attr]); }*/ alert(ev.clientX); } document.onclick = fn1;//事件调用，所以event有内容。 }
例子2：实现div跟着鼠标走动。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>event</title> <style type="text/css"> #div1{width: 100px;height: 100px;background: #f00;position: absolute;} </style> <script type="text/javascript"> window.onload = function(ev){ // var i = 0; var oDiv = document.getElementById('div1'); document.onmousemove = function(){ // document.title = i++; var ev = ev||event; var scrollTop = document.documentElement.scrollTop ||document.body.scrollTop; oDiv.style.left = ev.clientX + 'px'; oDiv.style.top = ev.clientY + scrollTop + 'px'; } } </script> </head> <body> <div id="div1"> </div> </body> </html>
事件冒泡：当一个元素接收到事件以后，会把它的事件传播给他的父级。例子（点击div3，会弹出div3，div2，div1）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件冒泡</title> <style type="text/css"> div{padding:40px;} #div1{background: red;} #div2{background: blue;} #div3{background: green;} </style> <script type="text/javascript"> window.onload = function(){ var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var oDiv3 = document.getElementById('div3'); function fn1(){ alert(this.id); } oDiv1.onclick = fn1; oDiv2.onclick = fn1; oDiv3.onclick = fn1; } </script> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"> </div> </div> </div> </body> </html>
我们现在需要讲到一个有BUG的事情，点击按钮出现，点击其他位置消失。
// 这时候你会发现，你点击oBtn是没有用的，因为冒泡原理使得onclick也传递给了父级document
oBtn.onclick = function(){
oDiv.style.display = 'block';
}
document.onclick = function(){
oDiv.style.display = 'none';
}
————以上只要阻止了oBtn的事件，不让它传到父级document即可。加入阻止函数。如下。
oBtn.onclick = function(){
var ev = ev || event;
ev.cancelBubble = true; //阻止冒泡事件
oDiv.style.display = 'block';
}
document.onclick = function(){
oDiv.style.display = 'none';
}
例子二：实现分享（鼠标移入出现，离开消失）：
window.onload = function(){
oDiv1 = document.getElementById('div1');
// 当鼠标移入div2的时候，会传给div1（冒泡给父级）去做这件事情。
oDiv1.onmouseover = function(){
this.style.left = '-100px';
}
oDiv1 = document.getElementById('div1');
// 当鼠标移入div2的时候，会传给div1（冒泡给父级）去做这件事情。
oDiv1.onmouseout = function(){
this.style.left = '0px';
}
}
obj.attachEvent(事件,事件函数)：绑定事件
标准下：obj.addEventListener(事件,事件函数,是否捕获)
事件捕获：
call()方法：能够通过传参改变函数内部this的指向。即call(第一个参数)，中的第一个参数，就是把this给替代了。例子：
function fn1(a,b){
alert(this);
alert(a+b);
}
fn1.call(1,10,20);//this是1,a+b是30
onkeydown：按下键盘的时候触发
onkeyup：拿起键盘时候触发。
event.keyCode：键值。键盘上的每个键都有固定的值。
例子：用键盘控制div的移动：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jianpanchufa</title> <script type="text/javascript"> window.onload = function(){ oDiv1 = document.getElementById('div1'); document.onkeydown = function(ev){ var ev = ev || event; switch(ev.keyCode) { case 37: oDiv1.style.left = oDiv1.offsetLeft - 10 + 'px'; break; case 38: oDiv1.style.top = oDiv1.offsetTop - 10 + 'px'; break; case 39: oDiv1.style.left = oDiv1.offsetLeft + 10 + 'px'; break; case 40: oDiv1.style.top = oDiv1.offsetTop + 10 + 'px'; break; } } } </script> </head> <body> <div id="div1" style="width: 100px;height: 100px;background: #f00;position: absolute;"></div> </body> </html>
事件默认行为：比如在浏览器里，回车默认滚动条往下。右键点击有菜单等，如下：
oncontextmenu：右键菜单
那么要阻止这些默认事件，只要设置事件发生时候，直接返回false即可。例子如下：
// 以下阻止了浏览器右键菜单。
document.oncontextmenu = function(){
return false;
}
————所以，如果网站想要点击右键出来自定义菜单，只要把自定义菜单的内容（即该DIV）放在return false之前即可。
拖拽DIV的效果代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <style type="text/css"> #div1{width: 100px;height: 100px;background: #f00;position: absolute;} </style> <script type="text/javascript"> window.onload = function(){ // 原理：onmousedown选择元素，onmousemove移动元素，onmouseup释放元素 oDiv = document.getElementById('div1'); oDiv.onmousedown = function(ev){ var ev = ev || event; var disX = ev.clientX - this.offsetLeft; var disY = ev.clientY - this.offsetTop; document.onmousemove = function(ev){ var ev = ev || event; oDiv.style.left = ev.clientX - disX + 'px'; oDiv.style.top = ev.clientY - disY + 'px'; } oDiv.onmouseup = function(){ document.onmousemove = document.onmouseup = null; } } } </script> </head> <body> <div id="div1"></div> </body> </html>
最后，这是占位符！！！
983
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
