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";
  }