javascriptDOM基本操作方法汇总

DOM基本操作方法汇总

最近越来越发现DOM操作是js，jquery最基本功，自己总是觉得会用起来比较吃力费时间，于是乎总结DOM基本的操作（包括js和jquery的用法），话不多说，直接切入正题。
首先，说一下自己写的整片文章的脉络，即总结js DOM基本操作的方法，然后在js，jquery在用法上进行比较举例，相信这是最让人记忆的法子。

js DOM基本操作方法

获取节点

常用获取节点的方法有：

getElementById() 功能：通过元素ID获取节点
getElementsByTagName() 功能：通过元素标签名获取节点
getElementsByName() 功能：通过元素Name属性获取节点
getElementsByClassName() 功能：通过元素类名获取节点

节点指针有：

 firstChild  语法：父节点.firstChild  功能：获取节点列表第一个
    lastChild   语法：父节点.lastChild   功能：获取节点列表最后一个
    childNodes  语法：父节点.childNodes  功能：获取元素的子节点列表
    previousSibling 语法：兄弟节点.previousSibling 功能：获取前一个节点
    nextSibling 语法：兄弟节点.nextSibling  功能：获取已知节点的后一个节点
    parentNode  语法：子节点.parentNode     功能：获取已知节点的父节点

节点操作

创建节点
其中节点包括元素节点、属性节点以及文本节点，当然也有注释节点，以下就前三个节点进行说明

createElement()   语法：document.createElement() 功能：创建元素节点
createAttribute() 语法：document.createAttribute() 功能：创建属性节点
createTextNode()  语法：document.createTextNode() 功能：创建文本节点

插入节点

   appendChild()     语法：被添加的节点.appendChild(所添加的新节点)
    insertBefore()  语法：被添加的节点.insertBefore(添加的新节点，已知节点)

替换节点
    replaceChild() 语法:replace(要插入的新元素，将被替换的元素)

复制节点

cloneNode() 语法：需要被复制的节点.cloneNode(true/false)
true是指复制当前节点及其所有子节点 false是指仅复制当前节点

删除节点

removeChild() 语法：removeChild(要删除的节点)
注意：该方法可以删除指定节点及其包含的所有子节点，并返回这些内容

属性操作

属性操作分为：获取属性、设置属性、删除属性，如以下：
    getAttribute() 功能：获取元素节点中指定属性的属性值
    setAttribute() 功能：创建或改变元素节点的属性
    removeAttribute()  功能：删除元素中指定属性

文本操作

insertData(offest,string)  从offest指定位置插入string
    appendData(string)  将string插入到文本节点的末尾处
    deleteData(offest,count) 从offest起删除count个字符
    replace(offest,count,string) 从offest将count个字符用String替代
    splitData(offset)  从offset起将文本节点分成2哥节点
    subString(offset,count) 返回由offset起的count个字符串的节点。

js进行比较举例

创建节点

js用法

<script>
        window.οnlοad=function(){
            var div=document.createElement("div");
            var txt=document.createTextNode("DOM");
            div.appendChild(txt);
            document.body.appendChild(div);
            div.setAttribute("title","盒子");
        }
    </script>