javascriptDOM的基本操作

HTML DOM结构代码

    <ul id = "box">
        <li><input type="radio" name="color" id="color" value="green"/><label for="color">绿色</label></li>
        <li></li>
        <li></li>
    </ul>

获取节点

一、document

1、.getElementById
语法：document.getElementById(元素ID);
功能：通过元素ID获取节点
例：

    var oUl = document.getElementById("box");

2、 getElementByName
语法：document.getElementByName(元素name属性)；
功能：通过元素name属性获取节点
例：

    var aInp = document.getElementsByName('color');

3、 gedElementByTagName
语法：document.getElementByTagName(元素标签)；
功能：通过元素标签获取节点
例：

    var aLi = oUl.getElementsByTagName('li');

二、 节点指针

1、 firstChild || firstElementChild
语法：父节点.firstChild || 父节点.firstElementChild
功能：获取元素的首个子节点
例：

    var oFirLi = oUl.fistChild;  //IE下可以获得第一个li，非IE下通常会获得第一个文本节点#text，并不是li
    var oFirLi1 = oUl.firstElementChild; //IE下不兼容，非IE下可以获得第一个元素节点li

2、 lastChild || lastElementChild
语法：父节点. lastChild || 父节点. lastElementChild
功能：获取元素的最后一个子节点
例：

    var oLastLi = oUl.lastChild;  //IE下可以获得最后一个li，非IE下通常会获得最后一个文本节点#text，并不是li
    var oLastLi1 = oUl.lastElementChild; //IE下不兼容，非IE下可以获得最后一个元素节点li

3、 childNodes
语法：父节点. childNodes
功能：获取元素子节点列表
例：

    var aLi = oUl.childNodes; //IE下会获取3个li节点（ie不会为空白符或换行符创建一个文本节点），非IE下会获得7个节点（4个文本节点，3个元素节点li）

注：nodeType判断区分元素节点（返回值为1）和文本节点（返回值为3）

4、 previousSibling || previousElementSibling
语法：兄弟节点.previousSibling || 兄弟节点.previousElementSibling
功能：获取已知节点的前一个节点
例：

    var oLi1 = aLi[1].previousSibling;  //IE下可以获得li[0]，非IE下通常会获得前一个文本节点#text，并不是li[0]
    var oLi1 = aLi[1].previousElementSibling; //IE下不兼容，非IE下可以获得前一个元素节点li

5、 nextSibling || nextElementSibling
语法：兄弟节点.nextSsibing || 兄弟节点.nextElementSibling
功能：获取已知节点的后一个节点
例：

    var oLi2 = aLi[1].nextSibling;  //IE下可以获得li[2]，非IE下通常会获得后一个文本节点#text，并不是li[2]
    var oLi2 = aLi[1].nextElementSibling; //IE下不兼容，非IE下可以获得后一个元素节点li

6、 parentNode
语法：子节点.parentNode
功能：获取已知节点的父节点
例：

    var oUl1 = aLi[1].parentNode; //通过li获取ul 

---

操作节点

一、创建节点

1、 createElement
语法：document.createElement(元素标签)
功能：创建元素节点
例：

    var div = document.createElement("div"); //创建新div ，但并未加入DOM
    div.id = "myNewDiv";
    div.className = "box";
    console.log(div);//输出div的信息

2、 createAttribute
语法：document.createAttribute(元素属性)
功能：创建属性节点
例：

    var atrr = document.createAttribute("align"); //创建arr 
    attr.value = "left";
    console.log(attr);//输出align=left

注：属性节点特性就是存在于元素的attributes 属性中的节点，nodeType返回值为2
3、 createTextNode
语法：document.createTextNode(文本内容)
功能：创建文本节点
例：

    var txt = document.createTextNode("123"); //创建文本节点 
    console.log(txt);//输出123

4、createDocumentFragment
语法：document.createDocumentFragment()
功能：创建文档片段
例：

    var fragment = document.createDocumentFragment(); 
    //文档片段不占资源，可以包含和控制节点，nodeType返回值为11，作为一个“仓库”来使用，即可以在里面保存将来可能会添加到文档中的节点

二、 插入节点

1、 appendChild
语法：appendChild(所添加的新节点)
功能：向节点的子节点末尾添加新的子节点
例：

    var oLi = document.createElement("li");
    oLi.id = "newLi";
    oUl.appendChild(oLi);

2、 insertBefore
语法：insertBefore（所要添加的新节点，已知子节点）
功能：在已知的子节点前插入一个新的子节点
例：

    var oLi2 = document.createElement("li");
    inserBefore(oLi2，oLi); //在id为newLi的li前插入一个li

三、 替换节点

replaceChild
语法：replaceChild(要插入的新元素，将被替换的旧元素)
功能：将某个子节点替换为另一个
例：

    var oLi3 = document.createElement("li");
    replaceChild(oLi3，oLi);// 替换id为newLi的li

四、 复制节点

cloneNode
语法：需要被复制的元素.cloneNode(true/false)
功能：创建指定节点的副本
参数：true—-复制当前节点及其所有子节点
false—-仅复制当前节点
例：

    oUl.cloneNode(true); //复制ul及其所有li
    oUl.cloneNode(false);//只复制ul

五、 删除节点

1、removeChild
语法：removeChild(要删除的节点)
功能：删除指定节点
例：

    oUl.removeChild(aLi[1]);//删除第2个li

2、remove
语法：remove()
功能：删除所有子节点，无参
例：

    oUl.remove();//删除所有li

---

属性操作

一、 获取属性

getAttribute
语法：元素节点.getAttribute(元素属性名)
功能：获取元素节点中指定属性的属性值
例：

    var oInp = document.getElementById('color');
    console.log(oInp.getAttribute('name'));//color

二、 设置属性

setAttribute
语法：元素节点.setAttribute(属性名，属性值)
功能：创建或改变元素节点的属性
例：

    var oInp = document.getElementById('color');
    oInp.setAttribute('value','red')
    console.log(oInp.getAttribute('value'));//red

三、 删除属性

removeAttribute
语法：元素节点.removeAttribute(属性名)
功能：删除元素中的指定属性
例：

    var oInp = document.getElementById('color');
    oInp.removeAttribute('value')

---

文本操作

1、 insertData(offset,string) 从offset指定的位置插入string
2、 appendData(string) 将string插入到文本节点的末尾处
3、 deleteData(offset,count) 从offset其删除count个字符
4、 replaceData(off,count,string) 从off将count个字符用string代替
5、 splitText(offset) 从offset起将文本节点分成两个节点
6、 substring(offset,count) 返回由offset起的count个节点
例：

<ul id = "box">
    <li></li>
    <li></li>
    <li></li>
    <p>0123456789</p>
</ul>

    var oUl = document.getElementById("box");
    var oP = oUl.getElementsByTagName('p')[0];
    var txt = oP.firstChild;
    txt.insertData(2,'abc'); //'01abc23456789'
    txt.appendData('abc'); //'01abc23456789abc'
    txt.deleteData(2,3); //'0123456789abc'
    txt.replaceData(2,3,'abc'); //'01abc56789abc'
    var newTxt=txt.splitText(2); 
    console.log(txt)//'01'
    console.log(newTxt)//'abc56789abc'
    var newTxt2 = newTxt.substringData(3, 5);
    console.log(newTxt2);//'56789'