Dom



Dom对象（文档对象模型）
    1、属性:
    document.title 返回当前文档的标题
    document.URL 返回文档完整的URL
    document.bgColor 背景色
    document.fgColor 前景色
    2、
    document.getElementById("ID");
    document.getElementByTagName("tagname");指定标签名的对象的集合。
    document.getElementByName("Name");(IE下只能找到form表单里具有name属性的元素,存在兼容性问题)
    document.getElementByClassName("className");
对象集合
    all：所有对象的集合，常用做浏览器兼容性判断，在IE中有效。
    if(document.all){
            alert("IE");
        }else{
            alert("NOT IE");
        }
表单集合
    forms:所有form表单集合。
获取表单方式
     1.根据form表单length值来获取
      console.log(document.forms.length);
     2.根据index获取
      console.log(document.forms[0]);
     3.根据form表单name属性值来获取
      console.log(document.forms["forms2"]);
     4.直接document.name来获取
      console.log(document.form1.name1[0].value);
      console.log(document.form2);
      console.log(document.forms[1].name21.value);
操作元素内容
     1.innerHTML设置或获取元素中所有内容,包括标签
       var div1 = document.getElementById("div1");
       console.log(div1.innerHTML);
     2.innerText只会返回文本，试用IE。
       alert(div1.innerText);
       console.log(div1.textContent);
innerText兼容性
    window.onload =function(){
            var btn = document.getElementById("btn");
            btn.onclick = function(){
                div2.innerText = div1.innerText;
            }
        };

     //"innerText"针对"IE";"textContent"针对"FireFox".

        function getContent(obj,val){
            if(document.all){
                if(val){
                    obj.innerText = val;
                }else{
                    return obj.innerText;
                }

            }else{
                if(val){
                    obj.textContent = val;
                }else{
                    return obj.textContent;
                }
            }
        }

        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            getContent(div2,getContent(div1));
        };
属性操作
    1、直接操作
        var btn = document.getElementById("btn");
        console.log(btn.id);
        console.log(btn.name = "btnName1");
        console.log(btn.type = "button");
        console.log(btn.className = "btnClass1");
    2、"setAttribute"
        btn.setAttribute("id","btn1");
        btn.setAttribute("class","btnClass1");
        console.log(btn.id);
        console.log(btn.className);
        console.log(btn.getAttribute("id"));
        console.log(btn.getAttribute("name"));
        console.log(btn.getAttribute("type"));
        console.log(btn.getAttribute("class"));
样式操作
行内样式
    var div = document.getElementById("div");
        div.style.width = "100px";
        div.style.height = "100px";
        div.style.border = "1px solid red";
        console.log(div.style.width = parseInt(div.style.width) + 100 + "px");
    btn.οnmοuseοver=function() {
        this.style.backgroundColor="red";
        this.style.color="white";
        };    //鼠标进入时效果
    btn.οnmοuseοut=function() {
        this.style.backgroundColor="";
        this.style.color="blue";
        };     //鼠标移出时效果
css样式叠加
    var oneDiv = document.getElementById("one");
           var btn = document.getElementById("btn");
            //批量操作样式表,可通过修改class以及id的值来替换样式表,id不提倡使用
         btn.onclick = function() {
              if(oneDiv.className == "one") {
                  oneDiv.className = "two";
               } else {
                  oneDiv.className = "one";
              }
操作内部样式表
    alert(document.styleSheets[1].rules[1].style.width)
    alert(document.styleSheets[1].cssRules[1].style.border);
    document.styleSheets[0].insertRule("#one{width:300px;height:300px;background:black;}", 1);
    document.styleSheets[0].addRule(".one", "{width:300px;height:300px;background:black;}", 2);
    document.styleSheets[0].deleteRule(2);
    document.styleSheets[0].removeRule(2);

最终样式
    alert(window.getComputedStyle(oneDiv, null).width);//针对chrom ie
    alert(oneDiv.currentStyle.width); //针对ff

获取元素尺寸
    1、content+padding
    console.log(oneDiv.clientWidth +""+oneDiv.clientHeight);
    2、content+padding+border
    console.log(oneDiv.offsetWidth + " " + oneDiv.offsetHeight);