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行对象