原始JS實作增刪改查插

1. 增

创建元素节点 ：document.createElement(“p”); 
创建text节点 ：document.createTextNodet(“内容”); 
复制一个节点： var newNode = node.cloneNode();//参数为true复制所有子节点，参数为false只执行一次浅复制。

2. 刪

removeChild()；//该方法不是在待删除的节点上调用，而是在它的父元素节点上调用。 
node.parentElement.removeChild(node); 
replaceChild()；//删除一个子节点，并用一个新的节点取代它。第一个参数是新节点，第二个参数是要删除的节点。 
node.parentElement.replaceChild(newNode,node);

3. 改

許多時候需要對節點屬性和內容進行修改。
對屬性的修改
屬性分為標準HTML屬性和非標準的HTML屬性。
* HTML屬性作為Element的屬性
   HTML Element 定義了通用的HTTP屬性，像id、標題lang和dir的屬性，以及事件的處理程序屬性（onclick）。特定的element子類型還有特定的屬性，例如img的src屬性。

var oImg = document.getElementById("img1");oImg.id = "newID";oImg.className = "className";oImg.src = "...";

取得和設定非標準的HTML屬性
Element定義了getAttribute和setAttribute方法來查詢和設定非標準屬性，hasAttribute和removeAttribute來偵測命名屬性是否存在和完全刪除屬性。

對內容的修改
innerHTML：包含標籤的內容
innerText（火狐支援不好）：純文字的元素內容
textContent（IE不支援）：純文字的元素內容

4. 查詢

• 一步找出到位
  

• document.getElementById()   返回对拥有指定 id 的第一个对象的引用。 
  document. getElementsByClassName()  返回文档中所有指定类名的元素集合。 
  document.getElementsByName()    返回带有指定名称的对象集合。 
  document.getElementsByTagName() 返回带有指定标签名的对象集合。

• 尋找父子兄弟
  

• #

  对于一个Node节点，包含很多种，像：Document节点、Text节点、Comment节点、Element节点，我们常常需要获得的是元素节点，忽略掉Text和Comment节点： 
  firstElementChild,lastElementChild； 
  children   => 数组类型：children[0] ,第一个子节点 
  nextElementSibling,previousElementSibling => 兄弟节点 
  parentElement => 父亲节点

5. 插頁

Node有方法appendChild（）和insertBefore（）。 
parent.appendChild(child); // 插入到最后 
parent.insertBefore(newNode,node);//插入到node之前

以上是原始JS實作增刪改查插的詳細內容。更多資訊請關注PHP中文網其他相關文章！