DOM编程

1.DOM模型简介

    1.1 DOM含义：Document Object Model的缩写，简称文档对象模型

    1.2  DOM的相关概念：

        a)根节点(唯一性):文档中的html标签(顶层标签，唯一的)

        b)元素节点：文档中的其他标签(除html标签外)

        c)属性节点：标签的属性,如:<a href="test.html"></a>

d)文本节点：网页上的文字,如：<p>静夜思</p>

         e)节点之间的关系:同级关系、父子关系

        f)DOM树形图：从html根节点起，向下扩散节点
形成倒置树状；

2. W3C访问DOM树节点

        2.1  W3C:万维网联盟,Web技术的标准发布机构(相当于技术领域的联合国)

       2.2  W3C提供的三类DOM标准
            CoreDOM:核心DOM,适用于各种结构化文档;
             结构化文档:HTML、XML
            XMLDOM:专用于XML文档的标准;
            HTMLDOM:专用于HTML文档的标准。

3. CoreDom

    3.1 查看/修改属性节点

             getAttribute("属性名")

            setAttribute("属性名","属性值")

    3.2 层次查找节点

            firstElementChild:父节点下的第一个子节点

            lastElementChild:父节点下的最后一个子节点

            previousElementSibling:下一个同级节点

            parentNode:父节点

    3.3 创建和增加节点

         a)创建节点：

                document.createElement("标签名")

        b)父节点末尾增加子节点：

                父节点.appendChild(子节点) 

        c)在指定节点前面添加新节点：

                父节点.insertBefore(新节点,指定节点) 

       d)克隆节点：

               //旧节点下所有子节点都克隆

        旧节点.cloneNode(true);  

3.4 删除和替换节点

         a)删除节点：

                    父节点.removeChild(子节点)

         b)替换节点：
父节点.replaceChild(新节点,旧节点)