​軟體測試：DOM節點

軟體測試： DOM 節點

DOM 不 僅 可以查詢節點，也可以建立節點、複製節點、插入節點、刪除節點和替換節點。

節點操作方法

方法 說明

write() 把任意字串插入到文件中

createElement() 建立一個元素節點

appendChild() 將新節點追加到子節點列表的末尾

createTextNode() 建立一個檔案節點

insertBefore() 將新節點插入在前面

repalceChild() 將新節點替換舊節點

cloneNode() 複製節點

removeChild() 移除節點

 

1.write() 方法

write() 方法可以把任意字串插入到文件中去。

document.write('<p> 這是一個段落！ </p>')' ; // 輸出任意字串

 

2.createElement() 方法

createElement() 方法可以建立一個元素節點。

document.createElement('p');     // 建立一個元素節點

 

3.appendChild() 方法

appendChild() 方法講一個新節點新增到某個節點的子節點列表的末尾上。

var box = document.getElementById('box');   // 獲取某一個元素節點

var p = document.createElement('p');   // 建立一個新元素節點 <p>

box.appendChild(p);       // 把新元素節點 <p> 新增子節點末尾

 

4.createTextNode() 方法

createTextNode() 方法建立一個文字節點。

var text = document.createTextNode(' 段落 ');   // 建立一個文字節點

p.appendChild(text);       // 將文字節點新增到子節點末尾

 

5.insertBefore() 方法

insertBefore() 方法可以把節點建立到指定節點的前面。

box.parentNode.insertBefore(p, box);   // 把 <div> 之前建立一個節點

 

PS ： insertBefore() 方法可以給當前元素的前面建立一個節點，但卻沒有提供給當前元素的後面建立一個節點。那麼，我們可以用已有的知識建立一個 insertAfter() 函式。

function insertAfter(newElement, targetElement) {

// 得到父節點

var parent = targetElement.parentNode;  

// 如果最後一個子節點是當前元素，那麼直接新增即可

if (parent.lastChild === targetElement) {

parent.appendChild(newElement);

} else {

// 否則，在當前節點的下一個節點之前新增

parent.insertBefore(newElement, targetElement.nextSibling);

}

}

 

var input = null;

if (BrowserDetect.browser == 'Internet Explorer' && BrowserDetect.version <= 7) {

input = document.createElement("<input type=\"radio\" name=\"sex\">");

} else {

// 標準瀏覽器，使用標準方式

input = document.createElement('input');

input.setAttribute('type', 'radio');

input.setAttribute('name', 'sex');

}

document.getElementsByTagName('body')[0].appendChild(input);

 

6.repalceChild() 方法

replaceChild() 方法可以把節點替換成指定的節點。

box.parentNode.replaceChild(p,box);   // 把 <div> 換成了 <p>

 

7.cloneNode() 方法

cloneNode() 方法可以把子節點複製出來。

var box = document.getElementById('box');  

var clone = box.firstChild.cloneNode(true);   // 獲取第一個子節點， true 表示複製內容

box.appendChild(clone);       // 新增到子節點列表末尾

 

8.removeChild() 方法

removeChild() 方法可以把

box.parentNode.removeChild(box);   // 刪除指定節點