JS有三个部分组成 ES DOM BOM
DOM就是专门操作HTML内容的API
DOM分为核心DOM 与 HTML DOM两种，前者能够操作所有结构化文档，后者就对常用的API进行简化
网页中一切在内存中都是以树形结构存储的 存储上下级包含关系最直观的结构
HTML中的每一个元素：元素，属性，文本 都是一个节点对象（Node） document对象是整棵树的根节点
节点对象（Node） 三大属性：
1.nodeType number
专门区分节点的类型：
9 document
1 element
2 attribute
3 text
需要区分节点类型的时候使用
2.nodeName 节点名 字符串
document #document
element 全大写的标签名
attribute 属性名
文本节点 #text
进一步区分元素的名称时使用
3.nodeValue 节点值
document null
element null
attribute 属性值
text 文本的内容
DOM就是对DOM树进行增删查改
document.getElementById() 按照ID查找属性 ,只能document调用，返回一个元素
document.getElementsByTagName() 按照标签元素查找属性 ，任何父元素都可以调用 ，返回值哪怕只有哦一个，也放在集合中 没有找到符合要求的子节点 返回一个空数组，查找不仅只查直接子节点，而且查找所有子代节点
document.getElementsByName() 按照name属性查找属性 ,只能document调用，返回动态数组
document.getElementsByClassName()按class属性查找属性 ，任何父元素都能调用
object.innerHTML 对双标签元素进行获取，写入；object.value 对单标签元素进行获取，写入
1.三个元素不需要找，直接获得：
<html> document.documentElement
<head> document.head
<body> document.body
2.节点之间的关系：
1）父子关系
node.parentNode 获得node的父节点
node.childNodes 获得node的所有子节点
node.firstChild 获得node下的第一个子节点
node.lastChild 后的node下最后一个子节点
2）兄弟关系
node.preivousSibling: 返回当前节点的前一个兄弟节点
node.nextSibling:返回当前节点的下一个兄弟节点
但是网页中的一切都是节点，包括换行和空字符
所以我们可以用元素树:仅包含元素节点的树结构 ---不是一颗新树 ，仅是节点数的子集
1）父子关系
elem.parentElement 返回一个父元素对象
elem.childen IE8支持 返回子元素对象集合
elem.firstElementChild 返回第一个子元素对象
elem.lastElementChild 返回最后一个子元素
2）兄弟关系
返回当前节点的前一个兄弟元素
elem.preivousElementSibling
返回当前节点的下一个兄弟元素
elem.nextElementSibling
document.createElement()在内存中创建一个元素。
document.body.appendChild()尾部插入结点。
parent.insertBefore(elem,oldElem);在现有子元素之前插入新元素
parent.replaceChild(elem,oldElem);替换现有子元素
elem.parentNode.removeChild(elem);移除元素
原文地址：https://www.cnblogs.com/yzxyzx/p/11369864.html