HTML加载完毕，渲染引擎会在内存中把html文档，生成一个DOM树 是获取内中DOM上的元素。然后操作的时候修改的是该元素的属性
document是文档对象模型的一部分
DOM是一个复合的数据类型。
在HTML当中一切都是节点……
由于结构图中我们可以看到，整个文档就是一个文档
每一个HMTL标签都是一个元素节点（标签）。
标签中的文字则是文字节点。（文本）
标签的属性是属性节点。（属性）
操作节点，必须首先中找到该元素。又是那种方法来做这件事：
通过id找到HTML元素
document。getElementById("demo");
通过标签名找到HTML元素
document.getElementByTagName("div");
通过类名找到HTML元素
document.getElementsByClassName("a");
通过类名查找HTML元素在IE5,6,7,8中无效
标签 = document。getElementById("demo");通过ID获得标签
他的返回值是一个标签，可以直接使用。获得属性值，设置属性。
标签数组=document.getElementsByTagName("div");通过签名获得标签数组
标签数组=document。getElementsByClassName("a");通过类名获得标签数组
他们两个的返回值是标签数组，习惯性是遍历之后再使用。
特殊情况：数组的值只有1个。
document.getElementsByTagName("div")[0];取数组中第一个元素
document.getElementsByClass("a");取数组中的第一个元素
调用者就是节点。一个节点只有一个父节点。调用的方式就是节点.parentNode.
Sibling 就是兄弟的意思
Next：下一个的意思
Previous:前一个的意思
nextSibling:调用者是节点。IE678中指示下一个元素节点（标签）。
在火狐谷歌IE9+以后都指的是下一个节点（包括空文档和换行节点）。
nextElementSibling:在火狐谷歌IE9都指的是下一个元素节点。
总结：在IE678中用nextSibling,在火狐谷歌IE9+以后用nextElementSibling
下一个兄弟节点= 节点 . nextElementSibling || 节点 . nextSibling
1.6.3单个子节点
firstChild:调用者是父节点。IE678中指第一个元素节点（标签）在火狐哥哥IE9+以后都指的是第一个节点（包括空文档和换行节点）。
firstElementChlid:在火狐谷歌IE9都指的第一个元素节点
第一个子节点 = 父节点 . firstElementChild || 父节点 . firstChild
lastChild:调用者是父节点。IE678中指最后一个子元素节点（标签）在火狐谷歌IE9+以后都指的是最后一个节点（包括空文档和换行节点）。
lastElementChild：在火狐谷歌IE9都指的最后一个元素节点。
childNode：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点（他还是W3C的亲儿子 ）
火狐 谷歌等高版本会把换行也看做子节点
nodeType == 1 时才是元素节点（标签）；
nodeType == 1 表示的是元素节点 元素就是标签
nodeType == 2 表示属性节点
nodeType == 3 表示文本节点
子节点数组 = 父节点 . childNodes; 获取所有节点。
children：非标准属性，它返回指定元素的子元素集合。
但它只返回HTML节点，甚至不返回文本节点，虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。
children在IE6/7/8 中包含注释节点
在IE678中，注释节点不要写在里面
子节点数组 = 父节点 . children；用得最多
节点自己 . parentNode . children [index] ;随意得到兄弟节点
作为了解内容：
function sibling(elm) {
var a = [] ;
var p=elm . parentNode .children;
for(var i =0 , pl=p.length; i<pl;i++){
if(p[i] !== elm)a.push(p[i]);
}
return a;
}
定义一个函数。必须传递自己。定义一个数组，获得自己的父亲，在获得自己父亲所有儿子（包括自己）。
遍历所有的儿子，只要不是自己就放进数组中。
paretNode 和 children 这两个属性
节点的访问关系都是属性。 节点的操作都是函数或者方法
使用方法是这样的document.createElement();
新的标签（节点）= document 。createElement("标签名");
使用方法：父节点 .appendChild();
父节点 . appendChild(新节点)； 父节点的最后插入一个新的节点
使用方法：父节点 .insertBefore(要插入的节点，参考节点)；
父节点 .insertBefore(新节点 ,参考节点)；在参考节点前插入
如果参考节点为null，name他将在节点最后插入一个节点。
1.7.3删除节点
用法：用父节点删除子节点
父节点 .removerChild(子节点)；必须制定制定要删除的子节点
节点自己删除自己
不知道父级的情况，可以这么写：node.parentNode.removerChild(node);
想要复制的节点调用这个函数cloneNode(),得到一个新的节点。方法内部可以传参，入股是true,深层复制，
如果是false，只复制节点本身。
新节点 = 要复制的节点 .cloneNode(参数);参数可选复制节点
用于复制节点，接受一个布尔值参数，true表示深层复制（复制节点及所有子节点），false表示浅复制（复制节点本身，不复制子节点）
获取：getAttribute(名称)
设置：setAttribute(名称，值)
删除：removerAtrribute（名称）
注意：IE6、7不支持
调用者：节点。 有参数。 没有返回值。
每个方法意义不同
DOM就是html文档的模型抽象。数据以树的形式在内存中排列。
节点就是DOM的组成。是一个对象，有属性和方法。获取方式有多种。
节点分为：元素节点（标签），文本节点，属性节点。
区分方法：nodeType: 1是标签 2是属性 3是文本
1.老版本的火狐不支持innerText； IE678不支持textContent
2. p不能嵌套p。h1不能嵌套h1。 a连接内部不能嵌套a连接
原文：https://www.cnblogs.com/BingBing-Deng/p/10356960.html