js中的DOM

选取文档元素

通过id选择元素，在同一个文档中id值必须唯一。如果要根据一组id查找对应的元素，可以使用这样一个函数

   function getElements(id1, id2, id3...){
      var elements = {};
      for(var i = 0; i < arguments.length; i++){
          //取出所有id
          var id = arguments[i];
          var item = document.getElementById(id);
          if(item == null)
             throw new Error('No element with id:' + id);
          elements[id] = item;
      }
      return elements;
   }

在低于IE8版本的浏览器中，getElementById()对匹配元素的ID不区分大小写，而且也返回匹配name属性的元素，所以尽量不要将name属性和id属性写成一样
getElementsByName定义在HTMLDocument类中，而不在Document类中，所以它只针对HTML文档可用(XML就不能使用)。
getElementsByTagName可以用来获取所有文档元素

   var all = document.getElementsByTagName('*');
   all;   // [html, head, meta, body, script, ...]

HTMLDocument类定义了一些快捷属性来访问节点，比如

   document.forms.id

文档结构和遍历

document对象，element对象和表示文本的text对象都是Node对象。Node对象有以下几个属性

parentNode
    //该节点的父节点，document对象的父节点是null(不用考虑空格节点)
childNodes
    //只读的类数组对象(NodeList对象)，包括了空格节点，所以我们会封装childElements来去掉空格节点(对nodeType进行判断)
firstChild，lastChild
    //该节点的子节点的第一个和最后一个，如果没有的话为null。这里同样包括了空格节点
nextSibling，previousSibling
    //具有相同父节点的两个节点为兄弟节点，这里同样包括了空格节点
nodeType
    //该节点的类型，9代表document节点，1代表element节点，3代表text节点，11代表documentFragment节点
nodeValue
    //只有text节点和comment节点有这个属性，代表文本内容
nodeName
    //元素的标签名，以大写形式标识

当我们想忽略文本内容和空白时，可以封装一些函数

   function parent(e, n){
       //n代表往上搜寻的层级
       if(n === undefined) n = 1;
       while(n-- && e) e = e.parentNode;
       //null和document,documentFragment返回null
       if(!e || e.nodeType !== 1) return null;
       return e;
   }

关于Node对象的其他属性可以参考文档Element属性与方法

属性

有些属性在js中是保留字，比如html的for属性(label元素)，所以在js中变成了htmlFor，这就是React中的JSX的写法。元素的style属性只能获取到html中的内嵌样式，但是可以对样式进行修改，而且优先级最高。

创建，插入和删除节点

创建节点主要是createElement 方法和createTextNode 方法。还有一个cloneNode 可以对一个节点进行深拷贝。
插入节点主要使用appendChild 和 insertBefore 方法
删除节点是在元素的父节点上调用replaceChild 和 removeChild 方法，比如我们要删除节点b

   b.parentNode.removeChild(b)

查询元素的几何尺寸

判定一个元素的尺寸和位置最简单的方法是调用它的getBoundingClientRect 方法，它不需要参数，返回一个有left，right，top和bottom属性的对象。left和top属性表示元素的左上角的X和Y坐标，right和bottom属性代表元素的右下角的X和Y坐标

   var box = e.getBoundingClientRect();
   var w = box.width || (box.right - box.left);
   var h = box.height || (box.bottom - box.top)

兼容性更好的是使用offsetLeft和offsetTop属性，如果想得到文档坐标，可以封装这样一个方法

   function getElementPosition(e){
       var x = 0, y = 0;
       while(e != null){
          x += e.offsetLeft;
          y += e.offsetTop;
          //offsetParent属性指定offsetTop这些属性所相对的父元素
          e = e.offsetParent;
       }
       return {x: x, y: y };
   }