JS 中的 DOM 操作：盒子模型属性
DOM: document object model 文档对象模型，提供系列的属性和方法，让我们能在 JS 中操作页面中的元素。
获取元素的属性和方法
获取元素的方法 1、 document.getElementById([ID]) 2、 [context].getElementsByTagName([TAG-NAME]) 3、 [context].getElementsByClassName([CLASS-NAME]) // IE6-8 不兼容 4、 document.getElementsByName([NAME]) //=>在IE浏览器中只对表单元素的NAME有作用 5、 [content].querySelect([SELECTOR]) 6、 [content].querySelectAll([SELECTOR]) 获取元素的属性 document document.documentElement document.head document.body childNotes 获取所有子节点 children 所有元素子节点 IE6-8中会吧注释节点也获取到 parentNode firstChild / firstElementChild lastChild / lastElementChild previousSibling / previousElementSibling 上一个哥哥节点 nextSibling / nextElementSibling // 后面几个带element的都不知持IE6-8
DOM 的增删改操作
// 增 document.createElement([TAG-NAME]) document.createTextNode([TEXT CONTENT]) (模版)字符串拼接，基于innerHTML/innerText存到容器中 // 插入 [Parent].appendChild([NEW-ELEMENT]) [Parent].insertBefore([NEW-ELEMENT],[ELEMENT]) // 克隆 [Element].cloneNode([TRUE/FALSE]) // 删除 [Parent].removeChild([Element]) // 设置自定义属性 [ELEMENT].xxx = xxx; // 写到堆内存上了 delete [ELEMENT].xxx // 删除属性 console.log([ELEMENT].xxx) [ELEMENT].setAttribute('xxx',xxx) // 写到结构上 console.log([ELEMENT].getAttribute('xxx')); [ELEMENT].removeAttribute('xxx')
获取元素样式和操作样式
// 修改元素样式 // 修改行内样式 [ELEMENT].style.width = "12px"[ELEMENT].style.cssText = "width:12px;height:12px;" // 获取元素样式 // 多个行内样式的写法 [ELEMENT].className = "className"[ELEMENT].classList.add[ELEMENT].style.xxx; // 设置样式类 // 新增的 let w = box.style.width; // 弊端只能获取当前元素写到行内上的样式，如果没有写到行内获取不到
JS 盒模型属性
基于一些属性和方法，让我们能够获取到当前元素的样式信息 【13 个】
如：
clientWidth: 可视区域的宽度(真实内容宽度)，内容溢出无影响
clientTop: 距离可视区域的宽高
offsetWidth：获取他的父参照物(不一定是父元素)
offsetTop：距离他的父参照物的宽到
获取可视化宽度
属性
- client
- width/height (获取盒子内容的宽高+padding)
- top/left （边框的大小）
- offset
- width/height clientWidth 的基础上几个边框。内容宽度+padding+border
- top/left 距离他的父参照物的宽高
- parent 父参照物，不脱离文档流是 body
- scroll 唯一一组可设置的
- width/height （在没有内容溢出的情况下和 client 一模一样, 溢出情况下，包含超出部分，可以通过这个获取真实的高度)
- top/left （竖向|横向滚动条减去实际高度|宽度） 可设置滚动的距离 --- 可读写属性
方法：
获取样式：
getComputedStyle / currentStyle(低版本获取方法)
window.getComputedStyle([ELEMENT],[伪类]) [ELEMENT].currentStyle
// 获取元素样式属性的方法 function getCss(element, attr) { let value = window.getComputedStyle(element)[attr], reg = /^\d+(px|rem|em)?$/i; if (reg.test(value)) { value = parseFloat(value); } return value; } // 结合闭包惰性函数求兼容性的style属性的写法 function getCss(element,attr){ if('getComputedStyle' in window){ getCss = function(){ return window.getComputedStyle(element)[attr] } }else{ getCss = function(){ return element.currentStyle[attr] } } return getCss(element,attr) } // 设置元素样式属性 function setCss(element, attr, value) { if (attr === "opacity") { element['style']['opacity'] = value; element['style']['filter'] = `alpha(opacity=${value*100})`; return; } let reg = /^(width|height|margin|padding)?(top|left|bottom|right)?$/i; if (reg.test(attr)) { if (!isNaN(value)) { value += 'px'; } } element['style'][attr] = value; }
经典面试题
水平垂直居中; // 1. 定位 负margin // 2. 定位 transform 水平位移 // 3. 定位absolute 设置四个方向都为0，margin:auto 兼容性不太好 // 4. 父元素设置 flex // 5. JS计算 一屏幕的宽度减去盒子的宽度/2 let winW = document.documentElement.clientWidth || document.body.clientWidth; box.style.left = (winW - 300) / 2 + "px"; box.style.top = (winH - 300) / 2 + "px";
/* * offset: 获取当前元素距离BODY左/上便宜(不论父参照物是谁) * @params curEle:current element 当前操作的元素 * @return [object] 包含上/左偏移的信息 */ function offset(curEle){ let par = curEle.offsetParent, left = curEle.offsetLeft, top = curEle.offsetTop, // 存在父参照物，而且还没有找到BODY while(par && par.tagName !=='BODY'){ // 在原有偏移的基础上累加，父参照物的边框、父参照物的偏移 if(!/MSIE 8\.0/).test(navigator.userAgent){ // IE8中偏移自己算了边框，不需要加边框的值 left += par.clientLeft; top += par.clientTop; } left += par.offsetLeft; top += par.offsetTop; // 继续获取上级参照物 par = par.offsetParent; } return {top:top,left:left} }
获取真正样式的方法 —— getComputedStyle(currentStyle)
getComputedStyle 获取所有经过计算机计算过的样式
- 只要元素在页面中呈现出来，那么所有的样式都是经过浏览器计算的
- 没见过和设置的样式都计算了
- 在 IE6 ～ 8 不兼容，需要给予 currentStyle 来获取
// 第一个参数是操作的元素，第二个是伪类::befoure/::after let styleObj = window.getComputedStyle([element], null); //window.getComputedStyle(document.documentElement) // IE6~8 let styleObj = [element].currentStyle;
HTML 盒模型
传统的盒模型
实际宽度和实际高度等于 内容宽度+padding+border， 想要固定宽度通常需要手动计算内部宽度值，很不方便
CSS3 新的盒子模型提供了一个盒子模型属性
box-sizing: content-box(传统盒子模型) | border-box;(新盒子模型)
设置了 border-box 后，盒子的宽度会始终保持在固定大小， 里面的 content 宽度会通过 padding 和 border 动态计算
flex 弹性盒子布局
多列布局
