DOM对象

DOM对象    
定义用于HTML的标准对象，以及访问和处理HTML文档的标准方法。

属性



document.title
返回文档的标题

document.URL
返回文档完整的URL

document.bgColo
背景色

document.fgColor
前景色（字体）


方法

    1.document.getElementById("")

    通过ID名查找元素

    2.document.getElmentsByTagName("")

    通过元素标签名查找元素；
    
    当使用*时，查找到的是文档中所有元素

    3.document.getElmentsByNmae("")

    查找带有指定name名称的对象；

    在IE浏览器中，name 位于form中可以正常返回，在div中则不能返回。

    4.document.getElmentsByClassName("")
    
    返回带有类名的元素集合。（IE9以下不支持）
    
    兼容性解决：

        function getClassName(className){
            var arr = [];
            if（document.getElmentsByClassName）{        //判断ClassName方法是否执行
                    return getElmentsByClassName(className);    //如果执行则返回                        
            }else{            
                var all = document.getElmentsByTagName("*");  //如果不执行，则查找文档所有元素
                for(var i = 0; i < all.length; i++){
                    if(all[i].className == className){        //找出所有与赋值classNamed相等的类名元素；
                        arr.push(all[i]);  //将找出的元素放入arr中
                    }
                }
                return arr;  //返回arr
            }

        }

-    对象集合

    1.document.all(只在IE有效)

    所有对象的集合，通常用来作兼容性的判断

    2.forms
    
    通过index来访问表单：document.forms[index];
    
    通过form表单的name属性值来访问表单: document.forms["formname"]

    直接使用document.name的值来获取：document.form.name.value

-    操作元素的内容

    1.innerHTML
    
    元素中所有内容，包括标签

    2.innerText/innerConetent（火狐浏览器）

    只返回文本

    解决兼容性：

        function getContent(a,b){
            if(doucment.all){        //判断是否是IE浏览器
                if(b){
                    a.documentText = b;    //如果是且传参数b,则将b赋值给a;
                }else{
                    return a.documentText;  //没有传参数，则返回
                }
            }else{
                if(b){
                    a.documentContent = b;  //如果不是IE浏览器 传参数后将b赋值给a.documentContent
                }else{
                    return a.documentContent; //没传参数，则返回return a.documentContent
                }
            }
        }

-    属性操作

     **获取属性的方法**

    object.getAttribute(attribute)或objext.attribute

     **赋值**
    
    objext.attribute = ""
    
    object.setAttribute("attribute","")

-    样式操作

     **行内样式**

    object.style. ... = ""

    hover事件:

    onmouseover 鼠标进入

    onmouseout 鼠标移出

     **CSS层叠样式**

    1.通过ClassName修改样式

    2.获取或修改某个属性值

    document.stylesheets[] 样式集合

    document.stylesheets[index].rules[index].style. ... 

    火狐浏览器下    document.stylesheets[index].cssRules[index].style. ... 

    3.动态添加和删除（操作内部样式表）

    a.添加：

    document.styleSheets[index].insertRule("选择器名称{样式}",index)

    IE9以下版本时：

    document.styleSheets[index].addtRule("选择器名称","样式",index)

    b.删除

    document.styleSheets[index1].deleteRule（index）

    IE9以下版本：

    document.styleSheets[index1].removeRule（index）

     **最终样式**（只能获取）
    
    object.currentStyle.样式 （火狐）

    window.getComputedStyle(object, null).样式

     **获取元素尺寸**

    1.object.clientWidth/object.clientHeight
    
    获取值为content+padding

    2.object.offsettWidth/object.offsettHeight

    获取值为content+padding+border