DOM / DOM操作表格

Posted 2020-09-10 渡劫的机器猫

DOM

 

　【获取层次节点的常用属性】

 

 1 .childNodes:（数组）获取UL里面的所有子节点（包含元素节点/文本节点）；

 2 .firstChild：获取元素的第一个子节点；

 3 .lastChild： 获取元素的最后一个子节点；

 4 .ownerDocument：获取当前文档根节点。在html文档中，为document节点；

 5 .parentNode： 获取当前节点的父节点；

 6 .previousSibling：获取当前节点的前一个兄弟节点；

 7 .nextSibling： 获取当前节点的后一个兄弟节点；

 8 .attributes：获取当前元素节点的所有属性节点；

 

   注：上述属性，均会获得所有的元素节点和文本节点，如果只需要元素节点，需要使用对应ELemengt属性，例如，firstChild-->firstElementChild

 

 

【创建并新增节点】

 

 1 .createElement("标签名")：创建一个新的节点。需要配合 .setAttriibute()方法设置新节点的相关属性；

 2 .appendChild(节点名)：在某元素的最后追加一个新节点

 3 .insertBefore(新节点名，目标节点名)：将新节点，插入到目标节点之前

 4 .克隆对象 .cloneNode(true/false):需要克隆谁，就用谁去调用克隆对象；

   >>>传递参数可以为true或false：

 ①true表示：克隆当前节点及所有子节点

 ②false表示: 只克隆当前节点，不克隆子节点。

 

 【删除/替换节点】

 1、 .removeChild(需要删除节点)：从父容器中，删除指定节点；

 2、 .replaceChild(新节点，被替换节点)：用新节点替换制定节点。如果新节点为页面中已有节点，将会被此节点删除后，替换到指定节点。

 

 

DOM操作表格

 

 【表格对象】

 1、 rows属性： 返回表格中的所有行，数组；

 2、 insertRow(index)： 在表格的第index+1行，插入一个新行

 3、 deleteRow(index)： 删除表格的第index+1行。

 

 【表格的行对象】

 1、 cells属性： 返回当前行中的所有单元格，数组；

 2、 rowIndex属性： 返回当前行，在表格中的索引顺序，从0开始；

 3、 insertCell(index)： 在当前行的第index+1处插入一个<td>

 4、 deleteCell(index)： 删除当前行的第index+1个<td>

 

 【表格的单元格对象】

 1、 cellIndex属性：返回单元格在改行的索引顺序，从0开始；

 2、 innerHTML属性： 返回或设置当前单元格中的HTML代码；

 3、 align属性： 设置当前单元格的水平对齐方式；

 4、 className属性： 设置单元格的class名称；