js操作DOM

1、 document.getElementById(id)   

       返回id等于指定值的element

<div id="div1">div1</div>
<script type="text/javascript">
    document.getElementById("div1").style.color="red";
</script>

2、document.getElementsByTagName(tagName) 

      返回一个包含所有的标签名等于某个指定值的elementList
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<script type="text/javascript">
    document.getElementsByTagName("div")[0].style.color="red";
    document.getElementsByTagName("div")[1].style.color="red";
    document.getElementsByTagName("div")[2].style.color="red";
</script>

3、getElementsByName(name)

      通过name属性来取得某一堆元素（作为数组）

ID是HTML文档中要求唯一的，name可以不是唯一，如checkbox、radio等地方会用到多个input用同一个name来识别是否为同党。对了，getElementsByName(name)仅用于取得input、radio、checkbox等元素，如<input name="myradio" type="radio" />

4、document.createElement(tagName) 

      创建一个element如<div></div>
      document.createTextNode(string) 

      创建包含文本text的textNode (就是一段文本了)
      Node.appendChild(node) 

      将node添加到childNodes的末尾

<div id="div1">div1</div>
<script type="text/javascript">
    var elemUi = document.createElement("ul");
    var elemLi = document.createElement("li");
    var elemLiText = document.createTextNode("li文本");
    elemUi.appendChild(elemLi);
    elemLi.appendChild(elemLiText);  
    document.getElementById("div1").appendChild(elemUi); 
</script>

5、Node.removeChild(node)

     从childNodes中删除node

<div id="div1">
    <ul>ul1</ul>
    <ul>ul2</ul>
</div>
<script type="text/javascript">
    var elemUl = document.body.getElementsByTagName("ul")[0];
    elemUl.parentNode.removeChild(elemUl);
</script>

运行结果:<div id="div1">
                    <ul>ul2</ul>
             </div>

6、Node.replaceChild(newNode,oldNode)

     替换 使用new替换old

<div id="div1">
    <ul>ul1</ul>
   <ul>ul2</ul>
</div>
<script type="text/javascript">
    var elemUl = document.body.getElementsByTagName("ul")[0];
    
    var elemUl3 = document.createElement("ul");
    var elemUl3Text = document.createTextNode("ul3");
    elemUl3.appendChild(elemUl3Text);
    
    elemUl.parentNode.replaceChild(elemUl3, elemUl);
</script>

运行结果:<div id="div1">
                     <ul>ul3</ul>
                     <ul>ul2</ul>
             </div>

7、Node.insertBefore(newNode,oldNode) 

     插到之前 把new插到old之前
<div id="div1">
    <ul>ul1</ul>
    <ul>ul2</ul>
</div>
<script type="text/javascript">
    var elemUl = document.body.getElementsByTagName("ul")[0];
    
    var elemUl3 = document.createElement("ul");
    var elemUl3Text = document.createTextNode("ul3");
    elemUl3.appendChild(elemUl3Text);
    
    elemUl.parentNode.insertBefore(elemUl3, elemUl);
</script>
运行结果:<div id="div1">
                    <ul>ul3</ul>
                    <ul>ul1</ul>
                    <ul>ul2</ul>
            </div>

8、nodeName,nodeValue,nodeType

    元素节点 
        如:<div></div>就属于元素节点
        nodeName为DIV(即它的标签)
        nodeValue为null
        nodeType为1(即所有元素节点的nodeType都为1)
    属性节点
        如:<div id="div2" align="center"></div>其中的id和align都属于属性节点
        以align为例
            nodeName为align
            nodeValue为value
            nodeType为2
    文本节点
        如:<div id="div3">文本</div>其中的 (文本) 就是文本节点
            nodeName为#text
            nodeValue为文本
            nodeType为3
     注释节点
        如:<!--注释-->
            nodeType为8
     文档节点
        即:document
            nodeName为#document
            nodeValue为null
            nodeType为9

元素结点
<div id="div1"></div>
属性结点
<div id="div2" align="center"></div>
文本结点
<div id="div3">文本</div>
<script type="text/javascript">
    var elemDiv1 = document.getElementById("div1");
    document.writeln(elemDiv1.nodeName+","+elemDiv1.nodeValue+","+elemDiv1.nodeType);
    //DIV,null,1 
    
    var elemDiv2 = document.getElementById("div2");
    var elemDiv2Attr = elemDiv2.attributes.getNamedItem("align");
    document.writeln(elemDiv2Attr.nodeName+","+elemDiv2Attr.nodeValue+","+elemDiv2Attr.nodeType);
    //align,center,2 
     
    var elemDiv3 = document.getElementById("div3");
    var text=elemDiv3.childNodes[0]; 
    document.writeln(text.nodeName+","+text.nodeValue+","+text.nodeType);
    //#text,文本,3 
    
    document.writeln(document.nodeName+","+document.nodeValue+","+document.nodeType);
    //#document,null,9   
</script>
访问attribute的方法
var elemDiv2 = document.getElementById("div2");
第一种:
    var elemDiv2Attr = elemDiv2.attributes.getNamedItem("align");
    然后可以使用 属性的 nodeName,nodeValue,nodeType
第二种
    getAttribute(name) 等于attributes.getNamedItem(name).value;
    setAttribute(name,newvalue) 等于attribute.getNamedItem(name).value=newvalue;
    removeAttribute(name) 等于attribute.removeNamedItem(name);

转载下面文章，方便学习之用
http://www.cnblogs.com/a-peng/archive/2008/03/31/1131238.html