原生JavaScript学习笔记之——DOM

全称：Document Object Model 文档对象模型

DOM会把文档看做是一个树状结构，同时定义了很多方法，来操作这个树
每一个标签都是一个节点(标签 即 元素 即 节点)
**不仅仅只有标签才算节点，也有文本节点
    text文本节点   =>   空格 换行 回车
已知一个节点,能找到任何一个节点
    oUl.nodeType  =>   object   

一、节点查找操作(类似CSS选择器)

1、元素.nodeType;   
        只读属性   当前节点类型
        DOM节点类型有多种  12种(W3C)定义
            元素.nodeType;
                1) 元素节点  <==>   1  
                2) 属性节点  <==>   2
                3) 文本节点  <==>   3
2、元素.Attributes;   
        只读属性        属性列表集合
3、元素.childNodes;  
        只读属性
        子节点列表集合(只包含以及子节点，不包含后辈孙级以下节点)
            标准下：   包含了文本和元素类型的节点，也会包换非法嵌套的子节点
            非标准下： 只包含元素类型节点，IE7下不会包含非法嵌套子节点
        oUl.childNodes.length
            是一个类数组对象，当只有一个子节点，其length = undefined,当子节点大于1时，其长度有数值
4、父级.children;  
        只读属性 子节点列表集合 
        只能获取儿子级节点，不能获取孙子级节点 
        标准下：   只包含元素类型节点
        非标准下： 只包含元素类型节点
5、 元素.firstChild;
        只读属性   元素下的第一个子节点(首节点)
        标准下：   firstChild会包含文本类型节点
        非标准下： 只包含元素节点
        元素.firstElementChild;  只读属性  标准浏览器下获取第一个元素类型节点(非标准下不识别会弹出undefined)
        兼容处理：
            var first=obj.firstElementChild || obj.firstChild;
        没有子级点bug
6、 元素.lastChild;  
        最后一个子节点(尾节点)    
        var last=obj.lastElementChild || obj.lastChild;
7、 兄弟节点
        下一个兄弟节点
            obj.nextSibling;    
                1)在chorme FF ie9+ 下获取的是元素节点+文本节点(text)
                2)在IE8  IE7 下只获取元素节点
            obj.nextElementSibling
                1)在chrome FF ie9+ 下只获取元素节点
                2)在IE8  IE7 下 undefined
                3)当没有下一个"元素"兄弟节点，会找文本节点，若没有文本节点则会是null(但不会报错)
            做兼容：
                var next=obj.nextElementSibling || obj.nextSibling;
        上一个兄弟节点
            var prev=obj.previousElementSibling || obj.previousSibling;     
8、元素.parentNode;  
        只读属性  当前节点的父级节点(亲生父亲)
        只能获取父级节点，不能获取爷爷级节点，且只有一个父级节点
9、元素.offsetParent;
        只读属性  距离当前元素最近的一个有定位属性的父节点(找干爹)
        a. 若没有定位父级，默认是body
        b. IE7以下，当前元素没有定位，offsetParent默认是body，若有定位则是html
        c. IE7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上
            01、zoom:1;   触发layout
            02、document.getELementById('div1').currentStyle.haslayout;  =>  true:触发; false:未触发

二、节点增删改操作

1、document.createElement('标签名');
        动态创建元素
        document.createElement('li');
2、 把创建的元素添加到页面中
        1) 父级.appendChild(要添加的元素);
                方法  追加子元素(在后面添加)
                oUl.appendChild(oLi);
        2) 父级.insertBefore(添加的元素,添加的位置);
                方法  在指定元素前面插入一个新元素
        注意：
            1. 在IE下如果第二个参数的节点，不存在会报错
            2. 在其他浏览器下，如果第二个参数的节点不存在，则会以appendChild形式进行添加
    **appendChild insertBefore类似于剪切
3、 父级.removeChild(要删除的元素);
        删除元素
        oUl.removeChild(this.parentNode);
4、 父级.replaceChild(新节点,被替换的节点);
        替换元素
        document.replaceChild(oDiv,oP);
注意：
    appendChild , insertBefore , replaceChild , 都可以操作动态创建出来的节点，也可操作已有节点 
上移下移
    1)上移 添加到上一个的前面
    2)下移 添加到下一个的下一个的前面  

三、元素的属性操作（Attribute）

1、元素.getAttribute(属性名称);              方法   获取指定元素指定属性
    oTxt.getAttributes('value');
2、元素.setAttribute(属性名称，属性值);        方法   给指定元素指定属性设值
    oTxt.setAttribute('value','hello');
3、元素.removeAttribute(属性名称);            方法   移除指定元素指定属性
    oTxt.removeAttribute('value');
注意：
    1.用‘.’和‘[]’的形式无法操作元素的自定义属性，getAttribute可操作元素的自定义属性
    2.可以获取元素属性实际的值，IE7以下还是会返回资源的绝对路径

四、窗口的尺寸和大小

可视区尺寸
    document.documentElement.clientWidth;
    document.document.Element.clientHeight;
滚动距离
    document.body.scrollTop
    document.body.scrollLeft        
        Chrome 认为滚动条(scroll)是body的
        FF、IE都不好使

    document.documentElement.scrollTop;
    document.documentElement.scrollLeft;
    兼容
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
内容高度
    例：瀑布流中UL的高度
    document.body.scrollHeight;
文档高度：
    document.body.offsetHeight;

    document.documentElement.offsetHeight;    =>    IE为可视高
物体高度
    1) getStyle(obj,name);
        a. 高度    生效后的高度
        b. 类型  字符串
        c. display:none;     后依然是生效后的高度
    2) obj.offsetHeight;
        a.  高度   盒子模型的高度
        b.  类型   number
        c.  display:none;    后显示为0

五、元素的距离

1、元素.offsetLeft;     只读属性   当前元素到定位父级的距离(偏移值)，到当前 元素.offsetParent的距离
   元素.offsetTop;
   没有定位父级
        offsetParent      =>     body/IE7  ->  html
        offsetLeft        =>     html(margin)
    有定位父级
        IE以下
            如果自己没定位： offsetTOP[Left]    ->   到body距离
            如果自己有定位： 那么就是到定位父级的距离
        其他
            到定位父级的距离
2、区别
    style.width:   样式宽(100px，有单位)
    clientWidth:   可视区宽(样式宽+padding   没单位)
    offsetWidth:   占位宽(样式宽+padding+border   可视区宽+边框)