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:获取已知节点的父节点,并对父节点进行操作,增删查改之类的;

 

posted @ 2015-07-27 23:53  Jeff_lzf  阅读(256)  评论(0编辑  收藏  举报