DOM编程进阶（JS）

一、DOM节点基本介绍

网页所有内容都是节点（标签、属性、文本、注释等）。在DOM中，节点使用Node来表示。
所有的节点都可以通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建删除。
节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）三个基本属性

二、节点层级

1、父级节点

利用DOM树可把节点划分不同的关系

node.parentNode:可返回最近的一个父节点，如果没有返回null

2、子节点

parentNode.childNodes(标准)：返回指定节点的子节点的集合;返回值包括所有的子节点、元素节点、文本节点。
parentNodes.children(非标准)：一个只读属性，只返回所有子元素节点，其他节点不返回；获取所有元素节点，需要其他特殊处理，一般不推荐使用childNode，但浏览器都支持。

var ul=document.querySelector('ul');
for(var i = 0; i < ul.childNodes.lenth; i++) {
   
        if(ul.childNodes[i].nodeType == 1) {
   
        //ul.childNodes[i] 是元素节点
        console.log(ul.childNodes[i]);
        }
    }

parentNode.firstChild:返回一个子节点，找不到返回null，包含所有的节点。
parentNode.lastChild:返回最后一个子节点，找不到返回null，也包含所有节点
以下两个有兼容问题，只支持IE9以上
parentNode.firstElementChild:返回第一个子节点，找不到返回null。
parentNode.lastElementChild:返回最后一个元素节点，找不到返回null。

3、兄弟节点

全部节点
node.nextSibling:返回当前元素的下一个兄弟节点，找不到返回null，包括所有节点。
node.previousSibling:返回当前元素的上一个兄弟节点，找不到返回null，包括所有节点。
指定节点（只支持IE9以上）
node.nextElementSibling:返回当前元素下一个兄弟元素节点，找不到返回null。
node.nextpreviousElementSibling:返回当前元素上一个兄弟节点，找不到返回null。

三、节点操作

1、创建节点

document.createElement():方法创建由tagName指定的html元素（动态创建元素点）。

2、添加节点

node.appendChild():方法将一个节点添加到父节点的子节点列表末尾。
node.insertBefore(child,指定元素):例子：

// 添加节点 node.appendChild(child)  node 父级  child子级
var ul = document.querySelector('ul');
ul.appendChild(li);
//node.insertBefore(child,指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili,ul.children[0]);

3、删除节点

node.removeChild(child):方法从DOM中删除一个子节点，返回删除的节点

4、复制节点（克隆）

node.clonenode:方法返回调用改方法的节点的一个副本。（复制节点）

• 参数为空或null，则只复制节点本身，不复制子节点。例：node.cloneNode()
• 参数为true。则复制节点本身节点本身和里面所有子节点。例：node.cloneNode(true)

3、三种创建元素的区别

document.write是直接将内容卸载页面的内容流，如果文档流执行完毕，则会导致页面全部重绘。

innerHTML是将内容写入DOM节点，不会导致页面全部重绘，创建元素效率更高，结构复杂
createElement()创建多个元素效率第一点，但是结构清晰。

四、JavaScript表格对象

我们在网页中看到的表格，想对表格进行操作，我们可以通过DOM获取表格中的子节点

1、HTML DOM Table 对象

1）table 对象

-table对象代表一个表格，在HTML中出现一个

标签就是一个表格

2）table对象集合

w3c标准
cells：返回包含表格中所有单元格的一个数组 w3c：NO
rows:返回包含表格中所有行的一个数组 w3c:Yes

3）table 对象方法

deleteRow:从表格删除一行。 w3c:Yes
insertRow:在表格中插入一个新行。 w3c:Yes

2、td/th 对象

1）td th 对象

td/th 对象代表一个数据单元

2）td/th 对象属性

以下参考：
| 属性 | 描述 | W3C |
| :----- | :------ | :----- |
| abbr | 设置或返回单元格中内容的缩写版本。 | Yes |
| align | 已废弃。 设置或返回单元格内部数据的水平排列方式。| D|
| axis | 设置或返回相关单元格的一个逗号分隔的列表。| Yes |
| background| 已废弃。 设置或返回表格的背景图片。 | D |
| bgColor | 已废弃。 设置或返回表格的背景颜色 | D |
| cellIndex | 返回单元格在某行的单元格集合中的位置。| Yes |
| ch | 设置或返回单元格的对齐字符。| Yes |
| chOff | 设置或返回单元格的对齐字符的偏移量。 | Yes |
| colSpan | 单元格横跨的列数。 | Yes |
| headers | 置或返回 header-cell 的 id 值。| Yes |
| height | 已废弃。 设置或返回数据单元的高度 | D |
| noWrap | 已废弃。 nowrap 属性规定表格单元格中的内容不换行。 | D |
| rowSpan | 设置或返回单元格可横跨的行数。| Yes |
| vAlign | 设置或返回表格单元格内数据的垂直排列方式。 | Yes |
| width | 已废弃。设置或返回单元格的宽度。| D |

3、tr 对象

1）tr 对象

对象代表一个数据单元

2）tr 对象集合

cells:返回表格行中所有的

3）tr 对象属性

以下参考：
| 属性| 描述| W3C |
| :----- | :---- | :--- |
| align|已废弃。 设置或返回在行中数据的水平排列。| D |
| bgColor|已废弃。 设置或返回表格行的的颜色。| D |
| ch | 设置或返回在行中单元格的对齐字符。| Yes |
| chOff | 设置或返回在行中单元格的对齐字符的偏移量。| Yes |
| height | 已废弃。设置或返回表格行的高度。使用 style.height 取代 | D |
| rowIndex | 返回该行在表中的位置。| Yes |
| sectionRowIndex | R返回在 tBody 、tHead 或 tFoot 中，行的位置。| Yes |
| vAlign | 设置或返回在行中的数据的垂直排列方式。| Yes |

4）tr 对象方法

deleteCell():删除行中的指定的单元格。
insertCell():在一行中的指定位置插入一个空的元素。

上一章：DOM编程基础（JS）
下一章：JS和CSS的交互