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);