[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个核心属性的末尾。 ## 关于查找父级（非定位）