javascript
javascript DOM（08-21）
1.createElement()和createTextNode()
-
//創建一個li新元素?
-
var newChild=document.createElement('li');?
-
//創建一個a 新元素?
-
var newLink=document.createElement('a')?
-
//創建一個 Text 節點?
-
var newText=document.createTextNode('My Wiki');
最常見的JavaScript DOM方法實戰-修改文檔樹中，用到的appendChild()或insertBefore()將它們附加到文檔樹中。
-
var nav=document.getElementById("nav");?
-
//創建一個li新元素?
-
var newChild=document.createElement('li');?
-
//創建一個a 新元素?
-
var newLink=document.createElement('a')?
-
//創建一個 Text 節點?
-
var newText=document.createTextNode('My Wiki');?
-
//把Text添加到a元素節點中?
-
newLink.appendChild(newText);?
-
//給a元素節點設置屬性href和內容?
-
newLink.setAttribute('href',"#");?
-
//把a元素節點添加到新的li元素節點中?
-
newChild.appendChild(newLink);?
-
//把新的li元素節點添加到 ul 元素節點里?
???????? nav.appendChild(newChild);
?
2.用來動態創建HTML內容的“老”技巧：document.write()方法和innerHTML屬性
?
3.insertBefore()方法：將把一個新元素插入到一個現有元素的前面
parentElement.insertBefore(newElement,targetElement);
其中：newElement是想插入的元素；targetElement是想把新元素newElement插入到哪個現有元素(targetElement)的前面；
parentElement是上面兩元素newElement、targetElement共同的父元素（這兒的父元素一般是targetElement元素的parentNode屬性）
例如：
var? gallery = document.getElementById("imagegallery");
?gallery.parentNode.insertBefore(placeholder,gallery); //把placeholder元素插入到圖片清單的前面
DOM中沒有insertAfter()方法
自身定義insertAfter()方法。如下：
????????????? function insertAfter(newElement,targetElement) {
????????????? var parent = targetElement.parentNode;? //把目標元素的parentNode屬性
?????????????????????????????????????????????????????????????????????????????值提取到變量parent里
????????????? if(parent.lastChild == targetElement) {? //檢查目標元素是不是parent的最后一
????????????????????????????????????????????????????????????????????????????個子元素?????
? parent.appendChild(newElement);
????????????? } else {
???????????????????? parent.insertBefore(newElement,targetElement.nextSibling);? //targetElement.nextSibling為目標元素
??????????????????????????????????????????????????????????????? 下一個子元素即目標元素的下一個兄弟節點
?}
???????????? }
?
?
?
?
?---------------------------------------------
08-21
一.Dom中創建，添加，刪除，修改，替換，復制，網頁中的標簽和文本內容的方法如下．
在網頁中的創建一個標簽元素：createElement
創建一段文本內容：createTextNode
向網頁中添加元素：appendChild
刪除元素的Dom方法是：removeChild
修改網頁中標簽元素的屬性：setAttribute
替換已存在的標簽或元素：replaceChild
復制克隆已存在的標簽或元素：cloneNode
獲取和修改元素內的html標簽與文本內容：innerHTML
獲取或修改元素的文本內容，僅支持IE：innerText
獲取或修改元素的文本內容，支持FF：textContent
?二.HTML Dom中還專門提供了一組接口用來操作網頁中的表格Table元素
HTML Dom中的insertRow方法可以為表格增加一行
刪除表格中一行的方法是：deleteRow
HTML Dom中的insertCell方法可以為表格某行中增加一列
刪除行中的一列的方法是：deleteCell
HTML Dom中的createCaption方法可以為表格創建一個標題
HTML Dom中的createTHead方法可以為表格創建一個Thead
HTML Dom中的createTFoot方法可以為表格創建一個TFoot
引用表格中所有行的屬性為：rows
引用表格中某行的所有列：cells
移動表格中的行，只支持IE：moveRow
?
?三.查找并訪問節點
1.你可通過若干種方法來查找您希望操作的元素：
- 通過使用 getElementById() 和 getElementsByTagName() 方法
- 通過使用一個元素節點的 parentNode、firstChild 以及 lastChild 屬性
?
2.getElementById()
語法：document.getElementById("ID");
返回的類型是一個對象Object，該對象對應著文檔里的一個特定的元素節點
?
3.etElementsByTagName()
語法：document.getElementsByTagName("標簽名稱"); 返回的是一個數組
或者：document.getElementById('ID').getElementsByTagName("標簽名稱");
?
4.DOM其他屬性
childNodes:? 此屬性讓我們可以從給定文檔的節點樹里把任何一個元素的所有子元素檢索出???? 來。childNodes屬性將返回一個數組，這個數組包含給定元素節點的全體子元素????? element.childNodes
nodeValue屬性：如果想改變某個文本節點的值，就使用DOM提供的nodeValue屬性。它的用途就是檢索和設置節點的值???
node.nodeValue
?
nodeName:? nodeName屬性含有某個節點的名稱。?
元素節點的nodeName是標簽名稱??
屬性節點的nodeName是屬性名稱?
文本節點的nodeName永遠是#text?
文檔節點的nodeName永遠是#document?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
轉載于:https://www.cnblogs.com/peng14/archive/2012/08/17/2644492.html
總結
以上是生活随笔為你收集整理的javascript DOM（08-21）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 编程的奥义
- 下一篇： JavaScript公共运行库