JavaScript--DOM编程

1、DOM:Document Object Model(文本对象模型)：

--D:文档-html文档或xml文档；

--O:对象-document对象的属性和方法；

--M:模型；

--DOM是针对xml(html)的基于树的API；

--DOM树：节点(node)的层次；

--DOM把一个文档表示为一颗家谱树（父、子、兄弟）；

--DOM定义了Node的接口以及许多节点类型来表示XML节点的多个方面。

2、节点(node):来源于网络理论，代表网络中的一个连接点。网络是由节点构成的集合。

--1）元素节点；

--2）属性节点：元素的属性，可以直接通过属性的方式来操作；

--3）文本节点：是元素节点的子节点，其内容为文本。

3、获取元素节点：

--1）document.getElementById: 根据元素id属性获取对应的单个节点；

--2）document.getElementsByTagName:根据标签名获取指定节点名字的数据，该方法是node接口的方法，每一个节点都具有该方法；

--3）document.getElementsByName:根据节点的name属性获取符合条件的几点数组，但IE的实现方式与W3C标准有差别,在html文档中若某节点(li)没有name属性，则IE无法使用该方法获取指定的节点。

4、读写属性节点：

--直接使用元素节点来获取相应的属性节点并对其进行相应的操作：

alert(nameNode.value);
nameNode.value = "ABCD";

--通过元素节点的getAttributeNode方法来获取属性节点，然后再通过nodeValue来读写属性值；

5、获取元素节点的子节点（只有元素节点才有子节点）：

--childNodes属性可以获取全部子节点，但是因为可以通过元素节点的getElementsByTagName来获取指定的子节点，所以该方法不实用；

--firstChild属性获取第一个子节点；

--lastChild属性获取最后一个子节点。

6、获取文本节点：

--文本节点也是元素节点的子节点，可以直接通过元素节点来获取文本节点，然后通过文本节点的nodeValue属性来读写其内容。

7、三种类型的节点都具有以下三个属性：

--nodeType : 节点类型:1表示元素节点；2表示属性节点；3表示文本节点

--nodeName：节点名称

--nodeValue：节点值

--其中nodeType和nodeName两个属性是只读属性，而nodeValue可修改。

8、创建元素节点：

--1） createElement():按照给定的标签名创建一个新的元素节点；

--2）方法只有一个参数：被创建的元素节点的名字，为字符串类型；

--3）方法的返回值是一个指向新建节点的引用指针，是一个元素节点，nodeType为1；

--4）新元素节点不会自动添加到文档里，它只是存在于JavaScript上下文的对象。

9、创建文本节点：

--1） createTextNode():创建一个包含着给定文本的新文本节点；

--2）参数：新建文本节点所包含的文本字符串；

--3）方法的返回值是一个指向新建节点的引用指针，是一个文本节点，nodeType为3；

--4）新元素节点也不会自动添加到文档里

10、为元素节点添加子节点：

--1） appendChild(): var reference = element.appendChild(newChild);

--2） 指定子节点newChild将成为给定元素节点element的最后面一个子节点；

--3） 方法的返回值是一个指向新增子节点的引用指针。

11、节点的替换：

--1） replaceChild():把一个给定父元素里的一个子节点替换为另一个给定的子节点；

--2）var reference = element.replaceChild(newChild, oldChild);

--3）返回值是一个指向已被替换的子节点的引用指针；

--4）该改节点除了替换的功能以外还有移动的功能；

--5）改方法只能完成单向替换，若需要使用双向替换，需要自定义函数：

function replaceBoth(aNode, bNode){
    //若两个节点相等，则直接返回
    if(aNode == bNode){
        return;
    }
    //获取两个节点的父节点
    var aParent = aNode.parentNode;
    var bParent = bNode.parentNode;
                
    //若父节点都不为空
    if(aParent && bParent){
        //获取两个节点其中一个节点的克隆
        var aNodeClone = aNode.cloneNode(true);
        
        //克隆的节点不包括原节点的响应函数和其他一些属性，因此需手动为其添加
        aNodeClone.onclick = aNode.onclick;
        aNodeClone.index = aNode.index;
        
        //使用父节点的replaceChild()方法进行互换
        bParent.replaceChild(aNodeClone, bNode);
        aParent.replaceChild(bNode, aNode);
    }
}

12、删除节点：

--1） removeChild():从一个给定元素里删除一个子节点；

--2） var reference = element.removeChild(node);

--3）返回值是一个指向已被删除的节点的引用指针；

--4）某个节点被removeChild()方法删除时，这个节点所包含的所有子节点将同时被删除。

13、插入节点：

--1）insertBefore():将一个节点插入到一个给定元素节点的给定子节点的前面；

--2）var reference = element.insertBefore(newNode, targetNode);

--3）节点newNode将被插入到element中并出现在targetNode的前面；

--4）targetNode必须是元素节点element的子节点。

--5）可以使用insertBefore()方法实现insertAfter()方法：

function insertAfter(newNode, refNode){
    //获取被插入节点的父节点
    var parentNode = refNode.parentNode;
    //若存在父节点
    if(parentNode){
        //若被插入节点为父节点的最后一个子节点，则直接将新节点插入到父节点的最后一个子节点处
        if(refNode == parentNode.lastChild){
            parentNode.appendChild(newNode);
        }
        //否则，先获取被插入子节点的后一个兄弟节点，然后再在兄弟节点前面插入新节点
        else{
            var nextNode = refNode.nextSibling;
            parentNode.insertBefore(newNode, nextNode);
        }
    }
}

14、innerHTML属性：

--1）浏览器几乎都支持该属性，但不是DOM标准的组成部分；

--2）innerHTML属性可以用来读写某给定元素里的HTML内容；