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名称;