<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .div1 { width: 200px; height: 200px; position: relative; background-color: grey; } .div2 { width: 100px; height: 100px; left: 50px; top: 50px; position: absolute; background-color: springgreen; } </style> <script type="text/javascript"> window.onload = function(){ var oDiv1 = document.getElementsByClassName('div1')[0]; var timer = setInterval(function(){ if (oDiv1.offsetLeft > 800) { clearInterval(timer) } oDiv1.style.left = oDiv1.offsetLeft + 2 + "px"; },30); }; </script> </head> <body> <!-- 元素属性的操作方式： oDiv.style.display = 'block'; oDiv.style['display'] = 'block'; DOM方式，即采用函数： 获取 getAttribute(parm) 设置 setAttribute(parm1,parm2) 删除 removeAttribute(parm) IE 谷歌chrome 火狐FF 浏览器对DOM的支持分别是10% 50% 99% IE9之后对DOM支持的多一点 子节点：childNodes children childNodes属性和nodeType属性 children 属性只包含元素节点不包含文本节点 用的多 推荐children不推荐childNodes,都是子节点,不包括孙节点等 父节点：parentNode 应用举例：单机链接，隐藏整个li offsetParent 用来获取一个元素用来定位的那个父级元素 详见CSS中的相对定位/绝对定位 注意:div1 包含 div2,两个块元素,div2有绝对定位,div1不设置position,这个时候div1移动的时候div2不会移动,只有给div1设置相对定位,div2才会跟着div1移动而移动 如果div1不设置相对定位，div2.offsetParent是body，只有给div1设置相对定位，div2.offsetParent才是div1 首尾子节点 有兼容性问题 firstChild、firstElementChild lastChild、lastElementChild firstChild存在兼容性问题，IE6-8下可用，高版本的浏览器不可用，高版本及其他高级浏览器需要使用firstElementChild 使用if else 解决兼容性问题 if(oUl.firstElementChild) { oUl.firstElementChild.style.background='red'; }else { oUl.firstChild.style.background='red'; } 兄弟节点 nextSibling、nextElementSibling previousSibling、previousElementSibling 用className选择元素 function getByClass(oParent,sClass) { var aResult=[]; var aEle = oParent.getElementsByTagName('*'); for(var i = 0; i<aEle.length;i++) { if(aEle[i].className == sClass) { aResult.push(aEle[i]); } } return aResult; } DOM应用： 创建、插入和删除元素 创建DOM元素，createElement(标签名)、appendChild(节点) 插入元素，insertBefore(节点,原有节点) 删除DOM元素，removeChild(节点) --> <div class="div1"> <div class="div2"></div> </div> </body> </html>
详见：html基础总结&html5新特性