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

本文固定链接: http://www.js-code.com/node-js/node-js_29993.html