[TOC] ## DOM元素下的屬性和方法 ### 一覽 ``` var oBox = document.getElementById("box"); console.dir(oBox); ```  這里只羅列了部分 ### 關于__proto__ `div#box` -> HTMLDivElement.prototype -> HTMLElement.prototype -> Element.prototype -> Node.prototype -> EventTarget.prototype -> Object.prototype >**注：** 上面的`->` 代表 `__proto__` 指向 ### 獲取attr（屬性和方法） ``` <div id="box" name="ahhh"></div> ``` >[warning]attributes沒有問題，但attributes下的方法->兼容性:ie10+ ``` console.log('--',oBox.attributes.name,'--') // -- name='ahhh' -- console.log(oBox.attributes.getNamedItem('name')); // name = 'ahhh' console.log(oBox.attributes[1]); // name = 'ahhh' console.log(oBox.attributes.item(1)); // name = 'ahhh' ``` >[success]兼容性:無 ``` // 注意，這個，這貨，才兼容IE9，且獲取的直接是值 console.log(oBox.getAttribute('name')); //ahhh ``` ### classList 添加或刪除類名（方法） >[warning]兼容性:ie10+ 相較于 `className` ，classList能允許我們通過`.classList.add`和`.classList.remove`方法直接往類名的集合中添加或刪除某個類名，而className需要我們進行一些字符串方法的操作才能做到。 ### style樣式屬性：囊括所有css屬性（這個style樣式屬性可讀寫） - 此屬性可讀寫 - 只能獲取行內樣式 ## 13個核心JS盒子模型屬性 **首先這13個屬性都是原生CSS所不具備的，其次它們不帶單位，并且所有值都是經過四舍五入的整數。另外13個值中有11個值都是只能讀取不能寫入的，除了scrollTop/scrollLeft這兩個** ### 三個系列 這13個屬性主要分為3個系列，每個系列各自有4個帶有`w/h/l/t`字眼的長相類似的屬性，另外 `offset` 系列還多一個屬性為 `offsetParent`。 每個系列有一點是共通的，那就是它們都有關于 `wdith/height` 的獲取，雖然有的要獲取的只有真實內容的大小，有的包括填充，有的包括邊框、 但它們又是不同的，每種系列都有自己獨有的特點，這特點主要和 `left/top` 有關。 ### client系列 client系列主要是用來獲取一個元素的**可見**大小的，什么是可見的呢？能夠著色的`border`、`padding`、`width/height` 即是可見的。 **但clietnWidth/Height是不包括border的，它的clientLeft/Top可以用來獲取對應的左邊框和上邊框** ### offset系列 offsetWidth/Height相較于client系列還包括了border的大小， 至于它獨有的有個性的部分，在于它的offsetLeft/Top獲取的是該元素相較于定位父級的距離（該元素的外邊框到定位父級的內邊框（即不包含定位父級的邊框））。 并且我們還能通過 `offsetParent` 獲取到該元素的定位父級。 #### 獲取元素距離視口的距離  >[info] **注意：** body的offsetParent為null。 ``` var isIE8 = (navigator.userAgent.indexOf("MSIE 8.0") === -1) ? true : false; // ie8的offsetLeft會自動包含clientLeft/Top function offset(curEle) { var totalLeft = null, totalTop = null, parent = curEle.offsetParent; totalLeft += curEle.offsetLeft; totalTop += curEle.offsetTop; while (parent) { // -> 累加父級參照物的邊框 if (!isIE8) { totalLeft += parent.clientLeft; totalTop += parent.clientTop; } // -> 累加父級參照物本身的偏移 totalLeft += parent.offsetLeft; totalTop += parent.offsetTop; parent = parent.offsetParent; } return { left: totalLeft, top: totalTop } } ``` ### scroll系列 ``` -> scrollWidth/scrollHeight:和我們的clientWidth/clientHeight一模一樣（前提是：容器中的內容沒有溢出的情況下） ->如果容器中的內容有溢出，我們獲取的結果是如下規則 scrollWidth：真實內容的寬度（包含溢出）+左填充 scrollHeight:真實內容的高度（包含溢出）+上填充 ->獲取到的結果都是【約等于】的值 因為： 同一個瀏覽器，我們是否設置了overflow='hidden'對于最終的結果是有影響的（雖然差距不是很大）; 在不同的瀏覽器中我們獲取的結果也是不相同的 -> scrollLeft/scrollTop:滾動條卷去的寬度/高度 scroll:auto 瀏覽器窗口 當前瀏覽器可視窗口的寬度和高度(一屏幕的) -> document.documentElement.clientWidth -> document.documentElement.clientHeight 當前頁面的真實寬度和高度（所有屏加起來的寬度和高度~但是一個約等于的值） -> document.documentElement.scrollWidth -> document.documentElement.scrollHeight 卷去寬高 -> document.documentElement[attr]||document.body[attr]; 必須是documetElement在前 -> 編寫一個有關操作瀏覽器盒子模型的方法 如果只傳遞了attr沒有傳遞value，默認的意思是獲取樣式值 如果兩個參數都傳遞了，意思是設置某一個樣式屬性的值 -> 不嚴謹來說這就是有關于"類的重載“：同一個方法，通過傳遞參數的不同實現不同的功能 ``` ``` function win(attr,value){ if(typeof value === "undefined"){ return document.documentElement[attr]||document.body[attr]; } // -> "設置" document.documentElement[attr] = value; document.body[attr] = value; } ``` ``` // -> 之前我們學習的JS盒子模型中:client系列offset系列scrollWidth/scrollHeight都是 ‘只讀’屬性 -> 只能通過屬性獲取值，不能通過屬性修改樣式 // scrollTop / scrollLeft ：滾動條卷去的高度/寬度（這兩個屬性是唯一可讀寫的屬性） box.scrollTop = 0; // -> 直接回到了容器的頂部 和負無窮是等效的 // -> 我們的scrollTop的值是存在邊界值（最大和最小值的），我們設置的值比最小值或則比最大的都沒用，起到效果的依然是邊界的值 //[最大值是？] // 最大值是 = 真實的高度 - 當前容器一屏幕的高度 var maxTop = box.scrollHeight - box.clientHeight; console.log(maxTop); box.scrollTop = maxTop+10; console.log(box.scrollTop); //258 box.scrollTop = -9999999; console.log(box.scrollTop); // 0 // document.documentElement.scrollTop||document.body.scrollTop; ``` ## 其它有意思的屬性和方法 - baseURI 當前頁面地址 - contentEditable 默認值為:"inherit" ，設置為true 可以把一個元素當做文本編輯器 相當于input - outerHTML 包含標簽 - contentEditable:"inherit" //設置為true 可以把一個元素當做文本編輯器 相當于input ## getComputedStyle獲取計算后的CSS樣式值 ie低版本不支持，但可以用其獨有的currentStyle替代，另外需要注意幾點 - currentStyle只支持小駝峰的命名方式，getComputedStyle小駝峰和串燒都支持 - currentStyle中關于透明屬性的值是像這樣的`(opacity=50)` - 因為獲取的的都是原生css屬性值，故都是帶單位的 ### 兼容寫法 ``` function getCss(curEle,attr,pseudo){ // ['s?do] 偽君子 假冒的人 var val = null ,reg = null; if("getComputedStyle" in window){ //if(window.getComputedStyle) //但這種要將undefined轉換為false 稍微耗一點性能 pseudo = pseudo?pseudo:null; val = window.getComputedStyle(curEle,pseudo)[attr]; }else{ if(attr === "opacity"){ // opacity在ie6~8下需要兼容 //(opacity=10) reg = /^alpha\(opacity=(\d+)(?:\.\d+)?\)$/i; val = curEle.currentStyle["filter"]; val = reg.test(val)?reg.exec(val)[1]/100:1; }else{ val = curEle.currentStyle[attr]; } } reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i; return reg.test(val)?parseInt(val):val; } ``` ### 關于偽類 不兼容IE低版本 ``` p:before{ color:red ,font-size:14px } //--- --- --- var oP = document.querySelector('p'); window.getComputedStyle(oP,'before').color ... ``` ## 瀏覽器窗口 各瀏覽器之間對于視口的`scrollTop/Left`是放在`documentElement`上還是`body`上存在爭議， 故需要兼容。 ### 兼容寫法 見上面的13個核心屬性的末尾。 ## 關于查找父級（非定位）