第三章JavaScript操作DOM对象

A.DOM操作分为 DOM Core, HTML-DOM和 CSS-DOM三个方面。

B.在HTML-DOM中查找节点的标准方法是 getElement系列方法，也可以使用 parentNode， firstChild,lastChild,nextSibling,previousSibling按层次关系查找节点，为避免浏览器兼容性，也使用 firstElementChild,lastElementChild,nextElementSibling,prevousElementSibling按层次关系查找节点。

 alert(document.getElementById("news").lastChild.innerHTML)//返回子节点li标签最后一个
        alert(document.getElementById("news").firstChild.innerHTML)//返回子节点li标签里面包括的所有内容
        alert(document.getElementById("news").parentNode.innerHTML)//返回父节点里面包括的所有内容
       alert(document.getElementById("11").nextSibling.innerHTML)//返回下一个节点
       alert(document.getElementById("12").previousSibling.innerHTML)//返回上一个节点
       alert(document.getElementById("news").firstChild.firstChild.nodeName)//标签的名称节点名称 

  alert(document.getElementById("news").firstChild.firstChild.nodeType)//标签的元素1节点类型
       alert(document.getElementById("11").innerText);

C. 在Core DOM中访问和设置节点属性值的标准方法是getAttribute（）和setAttribute（）。

  img.setAttribute("src","images/e.jpg");
  img.setAttribute("alt","我和狗狗一起活下来");
  img.nextSibling.innerHTML(我和狗狗一起活下来);

D.创建和增加节点的方法是 insertBefore(),appendChild(),createElement()和cloneNode,删除和替换节点的方法是removeChild()和replaceChild()。

  //删除的方法
    function hehe() {
        var info=document.getElementById("f");
        info.parentNode.removeChild(info);
    }

//替换
    function th() {
        var info=document.getElementById("f1");
       var infos=document.createElement("img");
       infos.setAttribute("src","images/ee.png");
       info.parentNode.replaceChild(infos ,info);
    }



    //增加
    function  zeng() {
        var info=document.getElementsByTagName("div")[0];
        var infos=document.createElement("img");
        infos.setAttribute("src","images/ee.png");
        info.appendChild(infos);

    }

E.使用JavaScript改变样式的两种方法是使用style属性和className属性。

document.getElementById("cartList").style.display="none";
function over(){
    document.getElementById("cart").style.backgroundColor="#ffffff";
     document.getElementById("cart").style.zIndex="100";
     document.getElementById("cart").style.borderBottom="none";
     document.getElementById("cartList").style.display="block";
     document.getElementById("cartList").style.position="relative";
     document.getElementById("cartList").style.top="-1px";
}
function out(){
     document.getElementById("cart").style.backgroundColor="#f9f9f9";
     document.getElementById("cart").style.borderBottom="solid 1px #dcdcdc";
     document.getElementById("cartList").style.display="none";
}

F.使用style对象获取内联样式属性表，使用 currentStyle对象在IE浏览器中获取样式中的属性值，DOM提供了 getComputedStyle（）方法以获取样式中的属性值。

G.制作随鼠标 滚动的广告图片。