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

dom獲取

DOM獲取

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

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

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


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

2 元素節(jié)點操作

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

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

3 節(jié)點類型

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

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

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

//如果 firstChild、lastChild、previousSibling 和 nextSibling 在獲取節(jié)點的過程中遇到
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;
}