一、DOM Tree
专门用来操作htnl页面内容的API，js的三个重要组成部分：ES(核心语法) DOM BOM
使用原生js完成某个内容
DOM W3C指定的标准
DOM： 核心DOM 能够操作所有结构化文档 （HTML，XML） 万能 复杂 繁琐
HTML DOM 专门操作HTML内容的API 常用的API进行简化 -- 简单 不是万能
实际开发中：先用简单，如果简单的不能解决问题、实现不了在用核心DOM补充
网页中一切在内存中都是以树形结构存储的 存储上下级包含关系最直观的结构
HTML中的每一个元素：元素，属性，文本 都是一个节点对象（Node） document对象是整棵树的根节点
节点对象（Node）三大属性
1、 nodeType number
9、document Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问
1、element HTML 元素
2、attribute 属性
3、text 文本
2、nodeName 节点名 字符串
document #document
elsement 全大写的标签名
attribute 属性名
进一步区分元素的名称时候用
3、nodeValue 节点值
document null
element null
attribute 属性值
text 文本的内容
二、节点
什么是节点呢？
根据DOM,XML文档中的每一个成分都是一个节点
整个文档是一个文档节点 document
标签是一个元素节点 document.getElementsByTagName(“body”) 这就是一个body节点
元素中的文本就是一个文本节点
每一个属性是一个属性节点
注释是一个注释节点
三、节点的获取
知道了什么是节点，那么我们要用节点来进行相关操作，比如找到一个<h1>标签我们要给他增加属性，属性值，内容等，那么我们首先需要先找到这一个节点。
同一个html页面内一个标签，属性，选择器可能存在多个，所以通过这些方式查找的内容通过一个类数组的方式放回，或者讲，只要有可能返回的是多个内容的可能，那么返回都是一个类数组来存这些内容，那么想要获得单个内容还得加上下标。
1、 通过标签名称来找节点。
var arr = document.getElementByTagName(“标签名”)[*];
2、 通过选择器获得节点
单个：var n = document.querySelector(“table>tbody tr:first-child>td:first-child”)
多个：var arr = document.querySelectorAll(“var n = document.querySelector(“table>tbody tr:first-child>td”)
”);
3、 通过id来获得节点
var abc = document.getElementById(“id名”);
4、 通过类名来查找节点
var arr = document.getElementsByClassName(“类名”);
5、 通过name属性值来查找，一般不使用
var arr = document.getElementByName(“name的属性值”);
确定一个节点，通过关系查找其他节点
1、 三个元素不需要查找，直接获得
<html> document.documentElement html
<head>document.head head
<body>document.body body
2、 节点之间的关系 node代表的是已经确定的节点对象
1） 父子关系
node.parentNode 获得node的父节点
var tbody = document.getElementsByTagName("tr")[0].parentNode;
node. childNodes 获得node的所有子节点
var td = document.getElementsByTagName("tr")[0].childNodes;
node.firstChild 获得node下的第一个子节点
node.lastChild 后的node下最后一个子节点
2）兄弟关系
node.preivousSibling: 返回当前节点的前一个兄弟节点
var tr0 = document.getElementsByTagName("tr")[1].preivousSibling;
node.nextSibling:返回当前节点的下一个兄弟节点
var tr2 = document.getElementsByTagName("tr")[1].nextSibling;
问题：网页中的一切都是节点，包括换行和空字符
3、 用元素树:仅包含元素节点的树结构 ---不是一颗新树 ，仅是节点数的子集
elem代表的是已经确定的节点
1）父子关系
elem.parentElement 返回一个父元素对象（父节点）
var tr = document.getElementsByTagName("tr")[0];
var father = tr.parentElement;
elem.childen IE8支持 返回子元素对象集合
elem.firstElementChild 返回第一个子元素对象
elem.lastElementChild 返回最后一个子元素
2）兄弟关系
返回当前节点的前一个兄弟元素
elem.preivousElementSibling
返回当前节点的下一个兄弟元素
elem.nextElementSibling
问题：IE9+支持
四、获得节点中的内容
1、双标签中的内容增，删，改，查
a)、查
var abc = node.innerHTML
b)、改
node.innerHTML = “想要在标签中显示的内容”;
c)、删
node.innerHTML =””;为空就是把标签中的内内容全给删完
d)、增
node.innerHTML =node.innerHTML +”想要增加的内容”; 添加原有的内容的后面
2、单标签的内容 增、删、改、查 单标签内容一般存在value值里
a) 、查
var abc = node.value;
b)、改
node.value = “修改的内容”;
c)、删
node.value = “” value的属性 值为空就删除了value这个属性值
d)、增
node.value = node.value+“增加的内容”;添加在原有的属性值后面
3、属性的 增， 删， 改， 查
a)、查 查的是属性值
var abc = node.getAttribute(“属性名”)
var abc = node.属性名
var abc = document.getElementsByTagName("input")[0].value;
b)、改
node.属性名 = “要修改的内容”;
node. setAttribute("原有属性","更改的属性值");
c)、删
1、node.属性名 = “” 只删掉属性值
2、node.RemoveAttribute("要删除的属性"); 这样会把属性名和属性值一起删掉
3、node.RemoveAllAttributes(); 移除当前节点的所有属性和属性值
4、node. setAttribute("原有属性","");
d)、增
node.要添加的属性名=“要添加的属性值”