JavaScript操作DOM对象

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：节点类型

操作节点：
  节点属性：
    getAttribute("属性名")
    setAttribute("属性名","属性值")

创建和插入节点：
   createElement( tagName) 创建一个标签名为tagName的新元素节点
   A.appendChild( B) 把B节点追加至A节点的末尾
   insertBefore( A,B ) 把A节点插入到B节点之前
   cloneNode(deep) 复制某个指定的节点

删除和替换节点：
   removeChild( node) 删除指定的节点
   replaceChild( newNode, oldNode)属性attr 用其他的节点替换指定的节点

操作节点样式：
   

/* 元素.style.样式属性 */
function whtmouseover() {
//要让王洪涛字体变小 颜色变绿
document.getElementById("wht").style.fontSize="15px";
document.getElementById("wht").style.color="green";
};
function whtmouseout() {
//要让王洪涛字体变小 颜色变绿
document.getElementById("wht").style.fontSize="8px";
document.getElementById("wht").style.backgroundColor="pink";
};
/* 元素.className 事先在样式中创建名为.className的值的样式列表*/
function lbmouseover() {
document.getElementById("lb").className="lb";
};
function lbmouseout() {
document.getElementById("lb").className="lbout";
};

/* 第三种方式： 元素.style.cssText="css属性值"*/
function llmouseover() {
document.getElementById("ll").style.cssText="color:red;font-size:10px;";
}
function llmouseout() {
document.getElementById("ll").style.cssText="color:black;font-size:60px;";
}

元素属性：
   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";
}