js DOM

DOM
   DOM 是文档对象模型（Document Object Model）的简称，它的基本思想是把结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。
   所有的节点和最终的树状结构，都有规范的对外接口，以达到使用编程语言操作文档的目的，所以，DOM 可以理解成文档（HTML 文档、XML 文档）的编程接口。

   节点
       DOM 的最小组成单位叫做节点（node），一个文档的树形结构（DOM 树），就是由各种不同类型的节点组成。
       对于 HTML 文档，节点主要有以下六种类型：
           节点           名称           含义
           Document       文档节点       整个文档（window.document）
           DocumentType   文档类型节点   文档的类型
           Element           元素节点       HTML 元素（比如<head>、<body>等）
           Attribute       属性节点       HTML 元素的属性（比如 class="right"）
           Text           文本节点       HTML 文档中出现的文本
           DocumentFragment   文档碎片节点   文档的片段

   选取文档元素
       通过ID选取元素
           使用方法 getElementById() 通过元素的 ID 而选取元素

                <html>
                <body>
                <div id="my_div"></div>

                <script>
                    document.getElementById("my_div").style.height="100px";  // 设置 my_div 高度为 100px
                    document.getElementById("my_div").style.background="red"; // 设置 my_div 颜色为 红色
                </script>

                </body>
                </html>

       通过名字（Name）或标签名（TagName）选取元素
           除了通过 ID 选择元素，我们还可以使用 getElementsByName() 方法或者 getElementsByTagName() 方法找到元素

                <html>
                <body>
                <input type="text" />
                <input type="text" />

                <script>
                document.getElementsByTagName("input")[0].value="hello";   // 下标为 [0] 表示选取第 1 个 input 标签
                document.getElementsByTagName("input")[1].value="shiyanlou"; // 下标为 [1] 表示选取第 2 个 input 标签
                </script>

                </body>
                </html>

   节点、属性操作和文档遍历
       查询和设置元素的属性
       可以通过 getAttribute() 和 setAttribute() 查询和设置元素的属性：

            <html>
            <head>
            <style>
            .class_1 {
                height:100px;
                width:100px;
                background:red;
            }
            .class_2 {
                height:100px;
                width:100px;
                background:blue;
            }
            </style>
            </head>

            <body>
            <div id="div_1" class="class_1"></div>
            <br/>
            <a>before:</a>

            <script>
            document.write(document.getElementById("div_1").getAttribute("class")); // 查询 div_1 的属性
            </script>

            <br/>
            <a>after:</a>

            <script>
            document.getElementById("div_1").setAttribute("class","class_2");  // 修改 div_1 的属性为 class_2
            document.write(document.getElementById("div_1").getAttribute("class")); // 再次查询 div_1 的属性
            </script>

            </body>
            </html>

父节点
通过 parentNode() 方法可以查看并操作一个节点的父节点，示例：找到 id 为 demo 的元素的父节点，并输出其 class 的名称：

               <html>
                <body>
                <div class="demo-parent">
                    <div id="demo">        
                    </div>
                </div>

                <script>
                    document.write(document.getElementById("demo").parentNode.getAttribute("class"));
                </script>
                </body>
                </html>

       创建和插入节点
           createElement()、appendChild() 方法，它们的作用分别是创建节点和插入节点。
           比如：创建一个 div 并为其设置高度（100px）和背景色（red），并追加到 body 后面：

                <html>
                <body>
                <div style="background:#00F; height:100px"></div>
                <script>
                    var mydiv = document.createElement("div");
                    mydiv.style.height = "100px";
                    mydiv.style.background = "red";
                    document.getElementsByTagName("body")[0].appendChild(mydiv);
                </script>
                </body>
                </html>

删除节点
通过 removeChild() 方法：

                <html>
                <head>
                </head>
                <body>
                <div>
                    <div id="div_red" style="background:#F00; height:100px"></div>
                    <div id="div_blue" style="background:#00F; height:100px"></div>
                </div>
                <script>
                function remove_red(){
                    var obj = document.getElementById("div_red");
                    obj.parentNode.removeChild(obj);
                    }
                </script>
                <button onclick="remove_red()">remove red div</button>
                </body>
                </html>

......