摘要：得到空白節點之后，移到父節點上，刪除子節點如果和在獲取節點的過程中遇到

dom獲取

DOM獲取

//參數是字符串
document.getElementById() 獲取特定 ID 元素的節點
document.getElementsByTagName() 獲取相同元素的節點列表
document.getElementsByName() 獲取相同名稱的節點列表
document.getAttribute() 獲取特定元素節點屬性的值

//參數是ccs選擇器字符串
document.querySelectorAll(".b1 .c"); 
document.querySelector(".b1 .c"); 

//層次節點操作
childNodes 獲取當前元素節點的所有子節點
firstChild 獲取當前元素節點的第一個子節點
lastChild 獲取當前元素節點的最后一個子節點
ownerDocument 獲取該節點的文檔根節點，相當與 document
parentNode 獲取當前節點的父節點
previousSibling 獲取當前節點的前一個同級節點
nextSibling 獲取當前節點的后一個同級節點
attributes 獲取當前元素節點的所有屬性節點集合  


//增刪改
write() 這個方法可以把任意字符串插入到文檔中
createElement() 創建一個元素節點
cloneNode() 復制節點
removeChild() 移除節點        
repalceChild() 將新節點替換舊節點
insertBefore() 將新節點插入在前面
insertAfter() 將新節點插入在前面
function insertAfter(newElement, targetElement) {
  //得到父節點
  var parent = targetElement.parentNode;
    if (parent.lastChild === targetElement) {
      parent.appendChild(newElement);
    } else {
      parent.insertBefore(newElement, targetElement.nextSibling);
    }
}
    
appendChild() 將新節點追加到子節點列表的末尾
createTextNode() 創建一個文件節點                 

2 元素節點操作

//內容操作
document.getElementById("box").tagName; //元素名
document.getElementById("box").innerHTML; //元素內容
//屬性操作 
//接受兩個參數,屬性名,屬性值              盡量不要用
setAttribute() 設置特定元素節點屬性的值
removeAttribute() 移除特定元素節點屬性

//改變樣式
document.getElementById("box").id; //獲取 id
document.getElementById("box").id = "person"; //設置 id
document.getElementById("box").title; //獲取 title
document.getElementById("box").title = "標題" //設置 title
document.getElementById("box").style; //獲取 CSSStyleDeclaration 對象
document.getElementById("box").style.color; //獲取 style 對象中 color 的值
document.getElementById("box").style.color = "red"; //設置 style 對象中 color 的值
document.getElementById("box").className; //獲取 class
document.getElementById("box").className = "box"; //設置 class

3 節點類型

//節點可以分為元素節點、屬性節點和文本節點，而這些節點又有三個非常有用的屬性 ，
//分別為：nodeName、nodeType 和 nodeValue。
節點類型 nodeName nodeType nodeValue
元素     元素名稱     1      null
屬性     屬性名稱     2     屬性值
文本     #text       3     文本內容(不包含 html)

4 在非 IE 中，標準的 DOM 具有識別空白文本節點的功能，所以在火狐瀏覽器是 7
個，而 IE 自動忽略了，如果要保持一致的子元素節點，需要手工忽略掉它。

function filterSpaceNode(nodes) {
  for (var i = 0; i < nodes.length; i ++) {
    if (nodes[i].nodeType == 3 && /^s+$/.test(nodes[i].nodeValue)) {
      //得到空白節點之后，移到父節點上，刪除子節點
      nodes[i].parentNode.removeChild(nodes[i]);
    }
  }
  return nodes;
}

//如果 firstChild、lastChild、previousSibling 和 nextSibling 在獲取節點的過程中遇到
function removeWhiteNode(nodes) {
  for (var i = 0; i < nodes.childNodes.length; i ++) {
    if (nodes.childNodes[i].nodeType === 3 && /^s+$/.test(nodes.childNodes[i].nodeValue)) {
      nodes.childNodes[i].parentNode.removeChild(nodes.childNodes[i]);
    }
  }
  return nodes;
}