DOM节点的操作

节点操作(增、删、改、查)
查询:
id,类,标签,name
关系:父子、兄弟
父节点    parentNode
子节点    childNodes
第一个子节点    firstChild
最后一个子节点        lastChild
前一个兄弟节点    previousSibling
下一个兄弟节点    nextSibling


1、增加节点
步骤:创建节点     增加到指定的位置

创建节点 createElement
格式:document.createElement("标签")

document.createElement("p")   --创建p标签

增加节点  
1)appendChild      --在指定对象(父级)的末尾增加
格式:父级对象.appendChild(新节点)

2)insertBefore      --在指定对象(同级)的前面增加
格式:指定对象的父级.insertBefore(新节点,指定对象)

2、删除节点 removeChild
步骤:找到需要删除的对象,删除
格式:指定对象的父级.removeChild(指定对象)

3.复制节点 cloneNode(false/true)
1、找到需要复制的节点,复制
2、到目标位置粘贴(增加)
格式:对象.cloneNode()     
false: --默认,只复制节点,不复制节点中的后代
true: --复制节点及节点中的后代

4.替换节点replaceChild
1、新对象(创建,复制)
2、找到旧对象,替换
格式:替换对象的父级.replaceChild(新对象,旧对象)

另外表格也有自己的节点的操作方式

表格的属性和方法(对表格中行和列的操作)
rows    --集合,表格中所有的行
rows[n]    --第n行(下标从0开始)
length属性:长度(行数)

cells     --集合,一行中列的集合
cells[n]   --第n个单元格(列)
length属性:长度(列数)

1、先添加行(表格的最后或指定位置)
2、添加单元格,设置单元格中的内容

添加行:insertRow
格式:表格对象.insertRow(n)     --n表示插入行在表格中的位置;缺省时,添加在表格的最后

添加单元格(列):insertCell
格式:行对象.insertCell(n)     --n表示插入单元格在行中的位置;缺省时,添加在行的最后


删除行:deleteRow
删除指定的行
格式:表格对象.deleteRow(n)    --n表示行号(指定的行)

rowIndex属性    --行号
格式:行对象.rowIndex 

你可能感兴趣的:(DOM节点的操作)