DOMDOM树 DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划

DOM树

DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。例如下面的html代码就会被解析成后图中的树型结构：

<!DOCTYPE html>
<html lang="en">
<head>
<title>文档标题</title>
</head>
<body>
    <a href="#">我的链接</a>
    <h1>我的标题</h1>
</body>
</html>

这里的每一对标签，都是dom树上的一个节点

使用JS操作DOM

获取元素的方法

document.getElementById()，getElementById是Document上的一个方法，用元素Id把单个元素整块抠出来（包括其孩子）
document.getElementsByTagName(), element.getElementsByTagName()通过标签名把元素及其孩子抠出来（包括其孩子）
document.getElementsByClassName(), element.getElementsByClassName()通过元素类名把元素整块抠出（包括其孩子）
document.querySelector(), element.querySelector()通过类名，id名，标签名把单个元素整块抠出来类名 (.), id名 (#), 标签名 (div)
document.querySelectorAll(), element.querySelectorAll()通过类名，id名，标签名把多个元素整块抠出来类名 (.), id名 (#), 标签名 (div)

html，body的获取方法

console.log(document.body);
console.log(document.documentElement);

示例代码：

    <!-- 示例代码 -->
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>getElement</title>
      </head>
      <body>
        <ul class="myUl">
          <li id="myLiId">1-1</li>
          <li id="myLiId">2-1</li>
          <li id="myLiId">3-1</li>
        </ul>
        <hr />
        <ul class="myUl">
          <li id="myLiId">2-1</li>
          <li id="myLiId">2-2</li>
          <li id="myLiId">2-3</li>
        </ul>
        <hr />
        <ul class="myUl">
          <li id="myLiId">3-1</li>
          <li id="myLiId">3-2</li>
          <li id="myLiId">3-3</li>
        </ul>
        <script>
          console.log("getElementById:");
          var myLiId = document.getElementById("myLiId");
          console.log(myLiId);
          console.log("------------------------------------");
          console.log(" ");

          console.log("getElementsByClassName:");
          var myUls = document.getElementsByClassName("myUl");
          console.log(myUls);
          console.log("------------------------------------");
          console.log(" ");

          console.log("element.getElementsByTagName:");
          var myLis = myUls[0].getElementsByTagName("li");
          console.log(myLis);
          console.log("------------------------------------");
          console.log(" ");

          console.log("document.getElementsByTagName:");
          console.log(document.getElementsByTagName("li"));
          console.log("------------------------------------");
          console.log(" ");

          console.log("document.querySelectorAll:");
          console.log(document.querySelectorAll("li"));
          console.log("------------------------------------");
          console.log(" ");

          console.log("document.querySelectorAll:");
          console.log(document.querySelectorAll(".myUl"));
          console.log("------------------------------------");
          console.log(" ");

          console.log("document.querySelector:");
          console.log(document.querySelector("#myLiId"));
          console.log(document.querySelector("#myLiId").innerHTML);
          console.log("------------------------------------");
          console.log(" ");

          console.log(document.body);
          console.log(document.documentElement);
        </script>
      </body>
    </html>

元素节点操作

父子节点

node.parentNode
- parentNode属性返回当前节点的最近父节点（元素节点）
- 如果没有父节点，返回null
body.children
- 只返回元素的子节点中的元素节点（不是文本节点，也不是属性节点）
node.childNodes
- 返回元素的所有子节点（包括元素节点，文本节点）
示例代码：

    <!-- 示例代码 -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>父子节点</title>
    </head>
    <body>
    <div>
        <h2><a href="#">日常</a></h2>
        <ul>
            <li value="yummy">吃饭</li>
            <li>睡觉</li>
            <li>打豆豆</li>
        </ul>
    </div>
    <script>
    var ul = document.querySelector("ul");
    console.log(ul.parentNode);
    console.log(ul.children);
    console.log(ul.childNodes);
    </script>
    </body>
    </html>

第一个子节点和最后一个子节点

node.children[0]----node.children[node.children.length - 1]----元素节点
firstChild----lastChild----元素节点和文本节点
firstElementChild----lastElementChild----元素节点（不兼容旧浏览器）

兄弟节点

node.nextSibling----node.previousSibling----所有节点
node.nextElementSibling----node.previousElementSibling----元素节点（不兼容旧浏览器）

创建、追加、删除节点

document.createElement("tagName")----创建节点（标签）
node.appendChild(child)----把child追加到node子节点列表末尾
node.insertBefore(newChild, child)----Node.insertBefore()
node.removeChild(child)----删除child，返回值为被删除的child节点

复制节点（拷贝节点，克隆节点）

node.cloneNode()
括号内可传入false, true，不传默认为浅拷贝，false为浅拷贝，true为深拷贝，浅拷贝就是只克隆标签，抛弃内容，深拷贝就是克隆标签以及内层的所有东西。返回值就是克隆出来的节点。