節點的增刪改查

@(js 高級教程（es5）)

本文不會詳細講解，只是簡單提及知識要點，詳細可以參考《dom高級編程》。

1. document.write

document.write(‘<h1>創建節點</h1>‘);

創建的節點會，重新生成一個html的DOM覆蓋之前的，所以不可用。

2. create 系列創建

常用有四種方法，分別如下：

• document.createCommot() 創建註釋
• document.createDocumentFragment()
• document.createTextNode()
• document.createElement()

說明：DocumentFragment，它作為一個“倉庫”來使用，即可以在裏面保存將來可能會添加到文檔中的節點。

例子：

var comment = document.createCommot(‘A comment‘);
var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null;
for (var i=0; i < 3; i++){
	li = document.createElement("li");
	li.appendChild(document.createTextNode("Item " + (i+1)));
	fragment.appendChild(li);
}
ul.appendChild(fragment);
document.body.innerBefore(comment,document.body.firstChild);
 

3.高效的創建節點

• innerHTML
• outerHTML 包含自身節點的hmtl的返回
• innerText 剔除所有tag，返回文本節點,等同於textContent
• textContent 與innerText 區別在與 innerText不剔除標簽轉行的空格
• outerText 在查詢時與innerText幾乎一樣，區別在於賦值，outerText會將自身的節點替換掉，不建議使用

window.onload = function () {
  var div = document.getElementById(‘div‘);
  var str = "<p> this is document element demo</p>";
  div.innerHTML = str;
  console.log(‘outerHTML‘,div.outerHTML); 
  console.log(‘innerText‘,div.innerText);
  console.log(‘textContent‘,div.textContent);
  console.log(‘outerText‘,div.outerText);
}
 

4. 查找節點

有兩套api，一套是node，另一套則是document。

Node

• fistChild
• lastChild
• nextSibling
• previousSibling
• parentNode
• childNodes[i]
• childNodes.item(1)

例子：

// 遍歷文本節點
// 遞歸
window.onload = function() {
  var s = "";

  function travel(space, node) {
    if (node.tagName) {
      s += space + node.tagName + ‘<br />‘;
    }

    var len = node.childNodes.length;
    for (var i = 0; i < len; i++) {
      travel(space + ‘|-‘, node.childNodes[i]);
    }

  }
  travel("", document);
  document.write(s);
}

DOM

實際上這套api解決了空白節點

• firstElementChild
• lastElementChild
• nextElementSibling
• previousElementSibling
• children[1]

5. 類數組NodeList

NodeList 對象是一個節點的集合，是由 Node.childNodes 和 document.querySelectorAll 返回的. 詳細地址

具體實例如下如下：

var div = document.getElementById(‘div‘);
var nodes = div.childNodes; // nodes就是一個NodeList的實例化

function makeArray(Nodelist) {
  var arr = null;
  try {
    return Array.prototype.slice.call(NodeList);
  } catch(e) {
    arr = [];
    for(var i = 0, len = nodeList.length; i < len; i++) {
      arr.push(nodeList[i])
    }
  }
  return arr;
}

6. 類數組對象HTMLCollection

HTML簡單來說是節點集合，例如，獲取ul下的所有li，就是一個HTMLCollection，HTMLCollection 是即時更新的。 詳細地址

它與Nodelist的區別，前者主要用在element，後者主要用於node。另外，他們是否時時更新，點擊詳細地址查看。

• getElementsByTagName
• document.scripts
• document.links
• document.images
• document.forms
• tr.cells
• select.options
• 略

7. 類數組對象NamedNodeMap

NamedNodeMap 接口表示屬性節點 Attr 對象的集合。 詳細地址

  var box = document.querySelector(‘.box‘);
  var attrs = box.attributes;
  console.log(attrs);
  console.log(‘class‘,attrs.class);
  console.log(‘data-role‘,attrs[‘data-role‘]);

8. 類數組的對象的動態性

時時更新是什麽? 舉個例子：

var divs = document.getElementsByTagName(‘div‘);
console.log(divs.length);
document.body.appendChild(‘div‘);
console.log(divs.length)

你會發現前後兩次輸出的divs.length是不一樣的。這是簡單例子，實際上事件委托也是利用動態性，e.target 和上面divs.length非常類似。

9. 現代瀏覽器查找元素的方法

1. 元素和節點區別。（節點包含元素）
2. Api

• document.getElementById
• getElementsByTagName
• document.getElementsByName
• getElementsByClassName
• querySelector
• querySelectorAll

10. 添加節點操作

詳細地址

• appendChild 節點內部末尾位置
• insertBefore 可以插入節點內部的任何位置
• replaceChild
• cloneNode 通過傳參可以拷貝內部節點，也可以不拷貝內部節點
• normalize 移除空的文本節點，並連接相鄰的文本節點。
• splitText splitText方法可以根據指定的偏移量將一個文本節點分割成前後兩個獨立的兄弟節點

11. 刪除節點

• removeChild
• removeNode
• innerHTML
• deleteContents
• textContent

節點的增刪改查