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