Dom元素中的元素应用

1.建立与修改table元素：

建立表格：var a=document.createElement("table");

建立表格中的tbody,而且添加入表格a中：var b=document.createElemrnt("tbody");a.appendChild(b);

同理便可以建立添加出 行tr 列td；

另外一种方法：

b.insertRow(0); //建立第一行

b.rows[0].insertCell(0); //在第一行中建立第一列

b.rows[0].cells[0].appendChild(document.createTextNode("单元格 1,1"))；//在第一行第一列中添加单元格内容；

删除中示例 parentNode的使用：

<script type="text/javascript">
function a(r) {
var as = r.parentNode.parentNode.rowIndex;
document.getElementById("mytable").deleteRow(as);
}
</script>

<table id="mytable" border="1">
<tr>
<td>row 1</td>
<td><input type="button" value="删除" onclick="a(this)" /></td>
</tr>

</table>

 

2.innerHTML属性：

相对于DOM中的添加方法，innerHTML中更加简化；

var el=document.createElemrnt("div");

el.innerHTML='What are you looking at? <img src="imagename.gif" alt="I\'m wearing glasses." height="200" width="200">';

一次性的插入，更DOM元素中重复添加不同；

 

3.标准DOM元素修改方法：

1》建立新节点：通常create开头，具体不做列举，经常使用的有 createTextNode(text);

2》添加节点：appendChild()；

3》删除节点：removeChild();

4》替换节点：replaceChild(new,old);

5》在特定节点以前插入：insertBefore(new,old);

6》建立一个文档碎片：createDocumentFragment();

var a=document.createDocumentFragment();

a.appendChild(op);//op表明元素，若for了不少个op元素出来，能够添加到a这个文档碎片中

document.body.appendChild(a);//添加文档碎片a

做用：若使用for添加元素op到body中，则每添加一次就会刷新一次页面，下降效率，过程缓慢，因此将添加的for所有添加到文档碎片a中，最后再一次添加入页面body，就会加快效率；

 

4.在DOM元素间移动：

1》经过父节点获取：
parentObj.firstChild:若是节点为已知节点parentObj的第一个子节点，就可使用这个方法。能够递归；

parentObj.lastChild:这个属性是获取已知节点parentObj的最后一个子节点。能够递归使用；

parentObj.childNodes:获取已知节点的子节点数组，而后能够经过循环或者索引找到须要的节点;

parentObj.getElementsByTagName():它返回已知节点的全部子节点中类型为指定值的子节点数组。

2》经过邻居节点获取：

neighbourNode.previousSibling:获取已知节点（neiwghbourNode）同一级别的前一个节点，可使用递归；

3》经过子节点获取：

childNode.parentNode:获取已知节点的父节点，并对父节点进行操做，增删查改之类的；