DOM（文档对象模型）

在浏览器中，DOM是window的子级，是window下最常用的一部分。
Dom是文档中的最高点，html则是标签的顶端。Dom节点包括了所有的标签、文本、属性。
通常情况下，DOM节点有以下五类 ：

• Document 根节点 (文档节点)：整个文档树的顶层节点
• Element 元素节点：网页的各种HTML标签（比如、<a>等）
• Attribute 属性节点：网页元素的属性（比如class=“right”）
• Text 文本节点：标签之间或标签包含的文本，其中空格也算
• Comment 注释节点：HTML或XML的注释

Document和Element是两个重要的DOM类。

---

元素节点的获取

var li = document.getElementsByTagName("li"); 获取该元素
var ul = document.getElementsByTagName("ul");

1. 父元素获取方法：
   • 获取该元素的父节点
     li[0].parentNode;
   • 获取该节点的父元素节点
     li[0].parentElement;
2. 子元素获取方法：
   • 获取该元素的子节点（不分类型）
     ul[0].childNodes;
   • 返回该元素的子元素节点数量
     ul[0].childElementCount;
   • 获取所有的子元素节点
     ul[0].children;
   • 获取第一个子元素节点
     ul[0].firstElementChild;
   • 获取第一个子节点
     ul[0].firstChild;
   • 获取最后一个子节点
     ul[0].lastChild;
   • 获取最后一个子元素节点
     ul[0].lastElementChild
3. 兄弟节点的获取方法：
   • 获取该元素的下一个兄弟节点
     li[0].nextSibling
   • 获取该元素的下一个兄弟元素节点
     li[0].nextElementSibling
   • 获取该元素的上一个兄弟节点
     li[1].previousSibling
   • 获取该元素的上一个兄弟元素节点
     li[1].previousElementSibling

---

元素的修改

• 元素的创建 [^创建完成的元素不在DOM树中，需要主动添加]
  document.creatElement( "创建的元素内容" )；
• 元素的添加
  目标元素.appendChild("添加内容");将元素添加到目标元素中的最后一位
  父元素.insertBefore(新的节点，已有节点);将新的节点添加到已有节点之前
• 元素的删除
  删除目标父元素.removeChild(删除目标);
制定目标.remove;
• 元素的替换
  替换目标父元素.replaceChild(替换元素,被替换元素);
• 元素的克隆
  需要克隆元素.cloneNode( ); 会返回克隆体，需要新建节点接收
  • 返回节点名称 nodeName
  • 返回节点属性 nodeValue
  • 返回节点类型 nodeType
  • 本文均属个人理解