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;
     }
   }