JavaScript DOM 6 - 節(jié)點(diǎn)的創(chuàng)建，插入，替換，刪除

liuchengxu 發(fā)布于2019-08-20 17:31 / 2907人閱讀

摘要：來看一個(gè)在本文檔嵌入一個(gè)來自中的節(jié)點(diǎn)的例子節(jié)點(diǎn)的插入在父節(jié)點(diǎn)上調(diào)用方法，參數(shù)是想要插入的子節(jié)點(diǎn)，執(zhí)行的結(jié)果是，這個(gè)子節(jié)點(diǎn)會(huì)被成為父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)。必須傳入一個(gè)或者，不能省略。

1: 節(jié)點(diǎn)的創(chuàng)建
新建一個(gè)新節(jié)點(diǎn)的方式主要有三種：
1: createElement()

document.createElement(tagName); //返回一個(gè)HTMLElement類型的節(jié)點(diǎn)，參數(shù)為字符串類型的標(biāo)簽名字

var p = document.createElement("p"); //

2: createTextNode()

document.createTextNode(text);//返回一個(gè)Text類型的節(jié)點(diǎn)，參數(shù)為這個(gè)節(jié)點(diǎn)里的內(nèi)容，字符串

var text = document.createTextNode("text node content"); //"text node content"

3: cloneNode()

targetElement.cloneNode(deepClone);//它接受一個(gè)參數(shù)，如果為true,就返回對(duì)targetElement的深拷貝，也就是返回targetElement包含它的后代子節(jié)點(diǎn)；如果為false，就只返回targetElement本身，不包含任何的子節(jié)點(diǎn)

比如，我們有一段HTML：


    book 1
    book 2

我們對(duì)"

4: importNode()

document.importNode(externalNode, deep);

externalNode: 來自別的document的node, 比方說一個(gè)iframe的node
deep: 是否深拷貝，默認(rèn)值為false. 在DOM4的時(shí)候，在deep缺省的情況下，它的默認(rèn)值是true，但是后來又變?yōu)閒alse。所以為了向前向后兼容，deep永遠(yuǎn)給一個(gè)值，不要缺省。

來看一個(gè)在本文檔嵌入一個(gè)來自iframe中的節(jié)點(diǎn)的例子：

var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentWindow.document.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);

2: 節(jié)點(diǎn)的插入
1: appendChild()

parentNode.appendChild(childNode)

在父節(jié)點(diǎn)上調(diào)用appendChild（）方法，參數(shù)是想要插入的子節(jié)點(diǎn)，執(zhí)行的結(jié)果是，這個(gè)子節(jié)點(diǎn)會(huì)被成為父節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)。
假如我們之前有一段HTMl:


    book 1
    book 2

我們現(xiàn)在先新建一個(gè)"

"元素，然后把它添加到"

var lastBook = document.createElement("li");
lastBook.textContent = "last book";
var bookList = document.getElementsByClassName("bookList")[0];
bookList.appendChild(lastBook);

再執(zhí)行完上面的代碼之后，之前的HTML就會(huì)變成：


    book 1
    book 2
    last book

2: insertBefore()

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

newNode: 想要插入的節(jié)點(diǎn)
referenceNode: 新的節(jié)點(diǎn)插入到referenceNode節(jié)點(diǎn)之前。必須傳入一個(gè)node或者null，不能省略。

還是上面的一段HTML:


    book 1
    book 2

我們嘗試在最后一個(gè)"

"前面插入一個(gè)新的"

var bookList = document.getElementsByClassName("bookList")[0];
var lastLi = bookList.lastElementChild;
var newLi = document.createElement("li");
newLi.textContent = "new book";
bookList.insertBefore(newLi, lastLi);

執(zhí)行完上面的代碼之后，原來的"

"就變?yōu)椋?/p>
```
    book 1
    new book
    book 2
```
3: insertAdjacentHTML()
```
element.insertAdjacentHTML(position, HTMLText);//參數(shù)為一段HTML文本
element.insertAdjacentElement(position, Element);//參數(shù)為一個(gè)Element
element.insertAdjacentText(position, text); //插入一段純文本
```
以上的三個(gè)方法，都是根據(jù)position的值，在特定的位置插入一個(gè)節(jié)點(diǎn)，只是參數(shù)的類型不一樣。position的值有四個(gè)：
```
1: ‘beforeBegin’
2: "afterBegin"
3: "beforeEnd"
4: "afterEnd"
```
以上四個(gè)值，駝峰和全小寫都可以。

1: 先來就以上三個(gè)不同的方法的使用和效果做一個(gè)對(duì)比：
還是先準(zhǔn)備一段HTML:
```
 
    book 1
    book 2
 
```
1: element.insertAdjacentHTML(position, HTMLText);
```
var bookList = document.getElementsByClassName("bookList")[0];
bookList.insertAdjacentHTML("afterBegin"," new node
");
```
執(zhí)行完之后，原來的HTML變成這樣：

2: element.insertAdjacentElement(position, Element);
還是之前的那段HTML,然后我們執(zhí)行：
```
var bookList = document.getElementsByClassName("bookList")[0];
var newLi = document.createElement("li");
newLi.textContent = "new node";
bookList.insertAdjacentElement("afterBegin", newLi)
```
執(zhí)行完之后，效果變這樣：

3: element.insertAdjacentText(position, text)
還是之前的那段HTML, 然后我們執(zhí)行：
```
var bookList = document.getElementsByClassName("bookList")[0];
bookList.insertAdjacentText("afterBegin", "text content")
```
執(zhí)行之后，會(huì)在"
- "元素?fù)Q掉：
```
var bookList = document.getElementsByClassName("bookList")[0];
var oldLi = bookList.firstElementChild;
var newLi = document.createElement("li");
newLi.textContent = "new node";
bookList.replaceChild(newLi, oldLi);
```
  執(zhí)行完上面的代碼之后呢，之前的HTML就變成了這樣：
```
    new node
    book 2
```
  4: 節(jié)點(diǎn)的刪除
```
targetNode.parentNode.removeChild(targetNode);
```
  依然是在目標(biāo)元素的父節(jié)點(diǎn)上調(diào)用這個(gè)方法，把目標(biāo)元素作為參數(shù)傳進(jìn)去。
  還是我們之前的那段HTML:
```
    book 1
    book 2
 
  
```
  我們嘗試著把第一個(gè)"
- "刪掉：
```
var bookList = document.getElementsByClassName("bookList")[0];
bookList.removeChild(bookList.firstElementChild);
```
  這之后，就只剩下一個(gè)"
- "元素了：
```
        
    book 2
  
```
  removeChild()會(huì)對(duì)父節(jié)點(diǎn)的childNodes產(chǎn)生影響，刪掉了一個(gè)節(jié)點(diǎn)，它后面的節(jié)點(diǎn)會(huì)在childNodes里依次往前移動(dòng)。