DOM：Document Object Model 文档对象模型
DOM分类：Dom core;HTML Dom;Css Dom;
一、根据层次访问节点：
parentNode 返回节点的父节点
childNodes 返回子节点集合，childNodes[i]
firstChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild 返回节点的最后一个子节点
nextSibling 下一个节点
previousSibling 上一个节点
二、解决浏览器兼容问题：
firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild 返回节点的最后一个子节点
nextElementSibling 下一个节点
previousElementSibling 上一个节点
例如：ONext = OParent.nextElementSibling || OParent.nextSibling
三、节点信息：
nodeName：节点名称
nodeValue：节点值
nodeType：节点类型
四、操作节点样式：
<script type="text/javascript">
//第一种方式：元素.style.样式属性
function whtmouseover(){
//要让张三字体变小 颜色变绿
document.getElementById("zs").style.fontSize="15px";
document.getElementById("zs").style.color="green";
};
function whtmouseout(){
//要让张三字体变小 颜色变绿
document.getElementById("zs").style.fontSize="8px";
document.getElementById("zs").style.backgroundColr="pink";
};
//第二种方式：元素.className 事先在样式中创建名为.className的值的样式列表
function lbmouseover(){
document.getElementById("zhao").className="zhao";
};
function lbmouseout(){
document.getElementById("zhao").className="zhao";
};
//第三种方式：元素.style.cssText="css属性值"
function llmouseover(){
document.getElementById("ww").style.cssText="color:red;font-size:10px";
}
function llmouseout(){
document.getElementById("ww").style.cssText="color:black;font-size:60px";
}
</script>
五、元素属性：
offsetLeft 返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop 返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight 返回元素的高度
offsetWidth 返回元素的宽度
offsetParent 返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop 返回匹配元素的滚动条的垂直位置
scrollLeft 返回匹配元素的滚动条的水平位置
clientWidth 返回元素的可见宽度
clientHeight 返回元素的可见高度
六、元素属性应用：
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
或者
document.body.scrollTop;
document.body.scrollLeft;
七、制作固定广告：
var adver;
window.onload=function(){
adver=document.getElementById("adver");
}
//onscroll:滚动条滚动时触发
window.onscroll=function(){
//获取滚动条滚动大小
var scorlltop=document.documentElement.scrollTop||document.body.scrollTop;
var scorllleft=document.documentElement.scrollLeft||document.body.scrollLeft;
//元素跟随滚动条一起变化
adver.style.top=scorlltop+30+"px";
adver.style.left=scorllleft+10+"px";
}
JavaScript操作DOM对象
原文：https://www.cnblogs.com/1314Justin/p/10980734.html
