1. 关于DOM
文档对象模型(DocumentObject Model)，是基于浏览器编程的一套API接口，W3C出台的推荐标准，每个浏览器都有一些细微的差别，其中以Mozilla(火狐)的浏览器最与标准接近。
通过 DOM，可以访问所有的 HTML元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。
2. 动态改变文档内容
要想对页面的内容做修改，需要如下方式来操作：
a.解析文档(如HTML)并生成DOM树
b.通过DOM提供的属性和方法，获取或改变文档的内容
2.1 DOM的节点
HTML 文档中的每个成分都是一个节点(Node)
DOM 是这样规定的：
- 整个文档是一个文档节点
- 每个 HTML 标签是一个元素节点
- 包含在 HTML 元素中的文本是文本节点
- 每一个 HTML 属性是一个属性节点
- 注释属于注释节点
2.1.1 节点间的关系
节点彼此都有等级关系
父节点、子节点、兄弟节点(同级节点)
2.2 DOM标准接口
W3C提供了三类DOM标准接口,如下：
a. 核心DOM，适用于各种结构化文档
b.HTML DOM,专用于HTML文档
c. XML DOM,专用于XML文档
3. 核心DOM操作
3.1 访问节点
访问节点兼容处理
getElement系列方法
使用getElement系列方法来访问指定的节点
- getElementById():返回对拥有指定id的第一个对象的引用
- getElementsByTagName():返回带有指定名称的对象集合
- getElementsByClassName()：返回指定的类选择器的集合
- getElementsByName():返回带有指定名称的对象集合(注意不是所有标签都有name属性)
3.1.1 节点信息1
每个节点都拥有包含节点某些信息的属性
- nodeName(节点名称)
- nodeValue(节点值)
- nodeType(节点类型)
3.1.2 节点信息2
nodeName
- 元素节点的 nodeName (节点名称)是标签名称
- 属性节点的 nodeName 是属性名称
- 文本节点的 nodeName 永远是 #text
- 文档节点的 nodeName 永远是 #document
nodeValue
- 对于文本节点，nodeValue 属性包含文本
- 对于属性节点，nodeValue 属性包含属性值
nodeType
- 元素 1 、属性 2、 文本 3、 注释 8、 文档 9
- 上面不同的数值代表不同的节点类型
3.2 创建和操作节点
3.2.1 主要方法
方法 说 明
createElement( tagName) 创建一个名为tagName的新元素节点,用法Document.createElement(标签名)
ANode.appendChild( BNode) 把子节点B追加到父节点A里面的末尾
insertBefore( ANode,BNode ) 把A节点插入到B节点之前
Node.loneNode(deep) deep为true则复制该节点以及该节点的所有子节点，为false则只复制该节点和其属性
3.2.2 操作节点的属性
3.3 删除和替换节点
方法 说 明
removeChild( node) 删除指定的节点(用父级元素去调用它)
replaceChild( newNode, oldNode) 用newNode来替换oldNode(https://www.cnblogs.com/zzq919101/p/6017152.html)
3.3.1 removeChild()示例代码如下
var tb = document.getElementById("tb");//先找到要删除的节点，这里要删除一行var tr = tb.lastChild.lastChild;//这里也需要父节点操作子节点tr.parentNode.removeChild(tr);3.3.2 replaceChild()示例代码
var tb = document.getElementById("tb");var tr = document.createElement("tr");var td1 = document.createElement("td");var td2 = document.createElement("td");td1.innerHTML = "我的内容1";td2.innerHTML = "我的内容2";tr.appendChild(td1);tr.appendChild(td2);//父节点操作子节点//两个参数，第一个表示新节点，第二个表示旧节点，这里用心节点替换旧节点tb.lastChild.replaceChild(tr,tb.lastChild.firstChild);3.4 其他
id,value等操作
innerHTML和innerText的区别
- 如果内容中有html标签，使用innerHTML时，内容中的html标签会被解析出来，而使用innerText时，html只会被当作文本显示出来
元素.style.样式
className
3.5 示例
代码1：
结果1：
代码2：
结果2：
代码3：
结果3：
4. HTML DOM操作
HTML文档中的每个节点，都是DOM对象,每个DOM对象都有属于自己的属性和方法.
HTML DOM在操作表格时，我们把一个表格看成是一个table对象，那么一个table对象是由若干个行对象(row)组成的，而其中每个行对象又是由若干个单元格对象(cell)组成的
Table对象可以操作行对象，行对象可以操作单元格对象
4.1 table表格对象
类别 名称 描述
属性 rows[] 返回包含表格中所有行的一个数组
方法 insertRow() 在表格中插入一个新行
方法 deleteRow() 从表格中删除一行
4.2 row行对象
类别 名称 描述
属性 cells[] 返回包含行中所有单元格的一个数组
属性 rowIndex 返回该行在表中的位置
方法 insertCell() 在一行中的指定位置插入一个空的
标签方法 deleteCell() 删除行中指定的单元格
另，对于单元格对象，还有cellIndex可以获取单元格的索引号
例如,这里需要在表格的末尾追加一行：
var tb = document.getElementById("tb");//添加之前，tb中共有多少个tr,返回的是一个数组var alltrs = tb.lastChild.rows;//先在tb中添加一行，此时行虽然添加了，但行中没有任何内容//此时传递的参数了，是一个添加的位置，是tr的索引号,这里是在末尾追加var newtr = tb.insertRow(alltrs.length);//再在新添加的行中，添加单元格对象var td1 = newtr.insertCell(0);var td2 = newtr.insertCell(1);//然后还需要往td中添加内容td1.innerHTML = "html dom";td2.innerHTML = "测试";
