一.直接引用結點 1.document.getElementById(id); --在文檔裏面通過id來找結點 2.document.getElementByTagName(tagName); --返回一個數組,包含對這些結點的引用 --如:document.getElementByTagName("span");將返回所有類型爲span的結點 二.間接引用結點 3.element.childNodes --返回element的所有子結點,可以用element.childNodes[i]的方式來調用 --element.firstChild=element.childNodes[0]; --element.lastChild=element.childNodes[element.childNonts.length-1]; 4.element.parentNode --引用父結點 5.element.nextSibling; //引用下一個兄弟結點 element.previousSibling; //引用上一個兄弟結點 三.獲得結點信息 6.nodeName屬性獲得結點名稱 --對於元素結點返回的是標記名稱,如:<a herf><a>返回的是"a" --對於屬性結點返回的是屬性名稱,如:class="test" 返回的是test --對於文本結點返回的是文本的內容 7.nodeType返回結點的類型 --元素結點返回1 --屬性結點返回2 --文本結點返回3 8.nodeValue返回結點的值 --元素結點返回null --屬性結點返回undefined --文本結點返回文本內容 9.hasChildNodes()判斷是否有子結點 10.tagName屬性返回元素的標記名稱 --這個屬性只有元素結點纔有,等同於元素結點的nodeName屬性 四.處理屬性結點 11.每個屬性結點都是元素結點的一個屬性,可以通過(元素結點.屬性名稱)訪問 12.利用setAttribute()方法給元素結點添加屬性 --elementNode.setAttribute(attributeName,attributeValue); --attributeName爲屬性的名稱,attributeValue爲屬性的值 13.使用getAttribute()方法獲得屬性值 --elementNode.getAttribute(attributeName); 五.處理文本結點 14.innerHTML和innerText屬性,這兩個方法相信大家都很熟悉,不介紹了,值得注意的是無論是ie還是firefox都容易把空格、換行、製表符等當成文本結點。所有一般通過element.childNodes[i]引用文本結點的時候,一般要處理: <script language"javaScript" type="text/javascript"> function cleanWhitespace(element) { for(var i=0; i<element.childNotes.length; i++) { var node = element.childNodes[i]; if(node.nodeType == 3 && !//S/.test(node.nodeValue)) { node.parentNode.removeChild(node); } } } </script> 六.改變文檔的層次結構 15.document.createElement()方法創建元素結點 --如:document.createElement("Span"); 16.document.createTextNode()方法創建文本結點 --如:document.createTextNode(" "); //注:他不會通過html編碼,也就是說這裏創建的不是空格,而是字符串 17.使用appendChild()方法添加結點 --parentElement.appendChild(childElement); 18.使用insertBefore()方法插入子節點 --parentNode.insertBefore(newNode,referenceNode); --newNode爲插入的節點,referenceNode爲將插入的節點插入到這之前 19.使用replaceChild方法取代子結點 --parentNode.replaceChild(newNode,oldNode); --注:oldNode必須是parentNode的子結點, 20.使用cloneNode方法複製結點 --node.cloneNode(includeChildren); --includeChildren爲bool,表示是否複製其子結點 21.使用removeChild方法刪除子結點 --parentNode.removeChild(childNode); 七.表格的操作 --注:ie中無法直接將一個完整的表格結點插入到文檔中 22.添加行和單元格 var _table=document.createElement("table"); //創建表 table.insertRow(i); //在table的第i行插入行 row.insertCell(i); //在row的第i個位置插入單元格 23.引用單元格對象 --table.rows[i].cells[i]; 24.刪除行和單元格 --table.deleteRow(index); --row.deleteCell(index); 25.交換兩行獲得兩個單元格的位置 node1.swapNode(node2); --這個方法在firefox中將出錯 通用方法: function swapNode(node1,node2) { var _parent=node1.parentNode; var _t1=node1.nextSubling; var _t2=node2.nextSubling; if(_t1)parent.insertBefore(node2,_t1); else _parent.appendChild(node2); if(_t2)parent.insertBefore(node1,_t2); else _parent.appendChild(node1); } |
DOM的基本方法
DOM的基本方法
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.