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:獲取已知節點的父節點，並對父節點進行操做，增刪查改之類的；