Dom对象(文档对象模型)

##  Dom对象(文档对象模型)
    描述:它是HTML的一系列标准文档对象


##   属性
    title    返回当前标题
    url      返回一个完整的url地址
    bgcolor  背景色
    fgcolor  前景色


##  方法
    1. document.getElementbyid("id名称")  如果有多个ID同名
        ,则只取第一个
    2. document.getElemenTagname("标签或通配符*")通过寻找标签
        或通配符来获取所有的元素,返回一个数组
    3.document.getElementbyname("name")在ie中只能找到form中具备name属性的内容/存在兼容性问题            
     
    4.document.getElementClassName("className")存在兼容性问题
       //解决classname的兼容性问题解决方案
         function getElsByClassName(className) {
            var arr = [];
            //判断浏览器
            if(document.getElementsByClassName) {
                return document.getElementsByClassName(className);
            } else {
                //在所有元素中查找className的元素
                var all = document.getElementsByTagName("*");//寻找所有Tagname类型的元素
                for(var i = 0; i < all.length; i++) {
                    if(all[i].className == className) {
                        arr.push(all[i]);
                    }
                }
                return arr;
            }
        }
##   对象集合
     all  表示所有的对象集合   (只对ie有效)通常用于解决兼容问题
     例:    if(document.all) {
               alert("IE");
            } else {
                alert("NOT IE");
            }
    form 所有表单集合
    获取表单内容的方式:
     1.  document.forms["0"]     根据层叠关系获取表单内容
     2.  document.forms["form2"] 根据form表单name属性值来获取
     3.  document.form2          根据表单名称来获取


###  在表单中获取某个元素的值
     1.  document.form[].name[下标].value
     例:  document.form[0].name1[0].value
     2.  document.forms[].name[下标].value
     例:  document.forms[1].name21.value
    
     1.innerHTML 获取元素中所有的内容,包括标签
        例:  var div1 = document.getElementById("div1"); 
             console.log(div1.innerHTML);      
             <div id ="div1"></div>
     2.innerTest  textContent 获取元素中的所有文本,不包括标签
        例:  alert(div1.innerText);
             console.log(div1.textContent);
       存在兼容性问题;参考解决方案
          function getText(obj) {
                if(doucment.all) {
                    return obj.innerText;
                } else {
                    return obj.textContent;
                }
               }
            function setText(obj, val) {
                if(doucment.all) {
                  obj.innerText = val;
                } else {
                    obj.textContent = val;
                }
##   行内样式的操作方法
     1.直接操作
       例:console.log(btn.id);
     2.获取法
       例: console.log(btn.getAttribute("id"));
     3.给属性赋值
        例:console.log(btn.setAttribute("class", "btnClass1"));
##   js 修改样式
     <div class="div1"></div>
     div1.style.wieght="像素值"....
     样式运算
     console.log(div1.style.width = parseInt(div1.style.width) + 100 + "px");

     js设置伪类效果关键字
        onmouseover    鼠标移入时
        onmouseout     鼠标移除时
##  通过classname批量修改
 
    实例: .noe{
            width: 300px;
            height: auto;
            margin: auto;
            text-align: center;
            background-color: antiquewhite;
        }
         .one{
            width: 600px;
            height: auto;
            margin: auto;
            text-align: center;
            background-color: antiquewhite;
        }
      window.onload =function (){
        btn.onclick = function() {
                if(oneDiv.className == "one") {
                    oneDiv.className = "two";
                } else {
                   oneDiv.className = "one";
                }
            }
        }
     <div class="one"></div>
     <input type="button" vilue="按钮" id="btn">


###  获取式修改某个内容属性
     1.  document.styleSheets    样式表集合
     2.  rules                   选择器支持IE/存在兼容问题
     3.  classrules              选择器支持火狐/存在兼容问题
  写法:   
             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);//针对IE
          alert(oneDiv.currentStyle.width); //针对火狐
  

##   获取元素尺寸(可直接参与运算)
         content+padding的值
            console.log(oneDiv.clientWidth + " " +oneDiv.clientHeight);

            content+padding+border得值
            console.log(oneDiv.offsetWidth + " " + oneDiv.offsetHeight);