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 = "测试";​