DOM1

<!-- 总结：理解nodelist及其近亲HTMLCollection，NamedNodemap是透彻理解DOM的关键 -->

    <!-- 

        Node类型：

        节点类型：nodeType （1-12组成）；

        属性：nodeName 返回元素标签名

             nodeValue 返回文本节点的值

        节点关系：

            Node => childNodes => NodeList

            每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList中的节点可以通过中括号访问，也可以通过item（）来访问

            parentNode previousSibiling nextSibiling firstChil lastChild

            方法：hasChildNodes（）包含一个或多个子节点的情况下返回true

            所有节点都有一个属性ownerDocument，指向整个文档的文档节点

        操作节点：

            appendChild（）：childNode末尾添加节点，返回新增节点。如果传入节点已经是文档节点，则将该节点从原来位置转移到新我位置

            insertBefore（）：（参数：要插入的节点和作为参照的节点）如果参照节点是null，则和appendChild执行相同的操作

            replaceChild（）：（参数：要插入的节点和要替换的节点），插入节点会复制所有要替换的节点的指针，呗替换的接待你仍在文档中，单没有了位置

            removeChild（）：移除节点，节点移除但仍在文档中，只是没有了位置

            cloneNode（）： 传入boolean值为true执行深度赋值，false时执行浅复制

            normalize（）

     -->

     <!-- 

         Document类型

         document时HTMLDocument的一个实例

         document的三种重要属性：documentElement  childNodes body

         var html = document.documentElement

         alert(html == document.childNodes[0]) // true

        var body = document.body

        document四种不常用属性：

            title：修改或获得title标签内容

            URL

            domain:域名

            referrer：来源页面的URL

        查找元素：

            getElementById（）

            getElementByTagName（）

            getElementsByTagName()会返回一个对象HTMLCollection

                访问HTMLCollection的元素方法：

                var p = document.getElementsByTagName('p');

                alert(p.length)

                alert(p[0])

                alert(p.item(0))

            HTMLCollection对象中还有一个方法nameItem（），通过该方法可以获得返回元素中name属性的元素

            HTMLCoolection还支持按名称访问元素

                var pName = p['name'];

                参数：数值时调用item（）方法，为字符串时调用nameItem（）方法

            HTMLDocument类才有的方法：getElementsByName（）

            文档写入：

                write（）

                writeIn（）：末尾添加一个/n换行

                close（）

                open（）：关闭文档写入流

      -->

      <!-- 

        Element类型

            访问元素标签名：nodeName和tagName属性

            取得特性：

                getAttribute（），setAttribute（） removeAttribute（）

                两类特殊的特性通过getAttribute（）访问和通过Dom属性方式访问返回值不同

                    style：getAttribute（）访问返回包含css的文本， 属性访问返回一个对象

                    事件： getAttribute（）访问返回想用代码字符串，属性访问返回javascript函数

                    注意：开发经常使用属性的方式访问，只有取得自定义特性时才用getAttribute（）

            attributes属性：

                元素的attributes属性一般不用，只有遍历元素特性时才会使用

                function outPutAttribute(element){

                    var pairs = new Array(),

                    attrName,

                    attrValue,

                     i,

                    len;

                    len=element.attributes.length;

                    for(i=0; i<len; i++){

                        attrName = element.attributes[i].nodeName;

                        attrValue = element.attributes[i].nodeValue;

                        if(element.attributes[i].specified){ // 兼容早期ie

                             pairs.push(attrName + "= " + attrValue  )

                        }

                    }

                    return pairs.join('')

                }

            创建元素节点：

                document.creatElement()

     -->

     <!-- 

         Text类型：

            可以通过nodeValue属性或者data属性访问Text节点包含的文本，length属性表示文本包含字符数目（nodeValue.length和data.length一样）

            创建文本节点：

                document.createTextNode()

            文本合并：

                文本节点父元素调用normalize（）方法合并多个文本节点为一个

                splitText（）分隔文本节点

      -->

      <!-- Comment类型  注释 -->

      <!-- CDATASECTION类型 针对xml文档 -->

      <!--

           DocumentFragment类型 文档片段

            一般当作仓库使用：如一下代码

            <ul id="mylist"></ul>

            var fragment = document.creatDocumentFragment();

            var ul = document.getElementById("mylist");

            var li = null;

            for(var i=0; i<3; i++){

                li = document.creatElement('li');

                li.appendChild(document.creatTextNode("item"+(i+1)));

                fragment.appendChild(li);

            }

            ul.appendChild(fragment)

      -->

      <!-- Attr类型 特性节点 -->