DOM manipulation

DOM manipulation

DOM節點（Node）一般對應於一個標籤，一個文本，或者一個HTML屬性。DOM節點有一個nodeType屬性用來表示當前元素的類型，它是一個整數：

• Element，元素
• Attribute，屬性
• Text，文本

1. DOM結構 —— 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。

   • 當前對象爲node
   • 返回父節點：node.parentNode, node.parendElement,
   • 返回全部子節點：node.childNodes（包含文本節點及標籤節點）,node.children
   • 返回第一個子節點：node.firstChild
   • 返回最後一個子節點： node.lastChild
   • 返回同屬上一個子節點：node.nextSibling
   • 返回同屬下一個子節點：node.previousSibling
   • parentNode和parentElement功能同樣，childNodes和children功能同樣。可是parentNode和childNodes是符合W3C標準的，能夠說比較通用。而另外兩個只是IE支持，不是標準，Firefox就不支持 ,因此你們只要記得有parentElement和children就好了
     移位 -> http://www.cnblogs.com/QingFl...

2. DOM操做 ——如何添加、移除、移動、複製、建立和查找節點等。

   • // 添加、刪除子元素
   • ele.appendChild(el);
   • ele.removeChild(el);
   • // 替換子元素
   • ele.replaceChild(el1, el2);
   • // 插入子元素
   • parentElement.insertBefore(newElement, referenceElement);
   • //克隆元素
   • ele.cloneNode(true) //該參數指示被複制的節點是否包括原節點的全部屬性和子節點

3. childNodes vs children 返回全部子節點：

   • node.childNodes（包含文本節點及標籤節點）,
   • node.children
   • Element.children returns only element children(元素節點), while Node.childNodes returns all node children. Note that elements are nodes, so both are available on elements.（node節點包括element 節點）

4. getElementsByClassName(H5) compatible version

   function getElementsByClassName(node, classname) {
     if (node.getElementsByClassName) {
       return node.getElementsByClassName(classname);
     } else {
       var results = new Array();
       var elems = node.getElementsByTagName('*');
       for (var i = 0; i < elems.length; i++) {
         if (elems[i].className.indexOf(classname) != -1) {
           result.push(elems[i]);
         }
       }
       return results;
     }
   }