Dom—> Document Object Model（文档对象模型） (tips: 下文元素对象简写为ele)
怎么用：
增删改查
查: 5种：
通过id document.getElementByID（） =》返回的是 一个元素对象
通过class document.getElementsByClassName() =>返回的是伪数组 可以用索引取
通过 tag document.getElementsByTagName（） =>返回的是伪数组
通过 querySelector() =》返回的是查找到的第一个元素
通过 querySelectorAll =》返回的是 伪数组
延伸： 伪数组 有length属性 可以索引取元素 但是 不能直接用数组的方法
用数组的forEach方法 Array.prototype.forEach.call（this，（）=>{}）
[].forEach.call(this, ()=>{]}) //开发可以这么写
驱动函数this的指向问题： 谁触发就指向谁
操作元素的class：获取： ele.className
设置： ele.className=’ ’ //参数可以写多个 会覆盖之前所有的class类！！！！！！！！
操作行内样式 ele.style.css属性名=‘属性值’ //注意权值 权值权值！！！！！！！
节点分类：
元素节点：
nodeType =》 1
nodeName =》标签名大写
nodeValue =》 null
属性节点：
nodeType =》 2
nodeName =》属性名
nodeValue =》 属性值
文本节点：
nodeType =》 3
nodeName =》#text
nodeValue =》回车换行
节点访问：
获取父节点： ele.parentNode
获取第一个子节点： 父节点.firstElementChild ie的写法：父节点.firstChild
如果在老项目中遇到这种写法： 父节点.firstChild|| 父节点.firstElementChild （这种就是获取第一个子节点的 兼容写法）
获取最后一个子节点： 父节点.lastElementChild
获取上一个兄弟元素： ele.previousElementSibling
获取下一个兄弟元素： ele.nextElementSibling
获取所有的子节点：父节点.childNodes w3c标准的 （不好用 返回所有节点 包括文本节点）
父节点.children 非标准但是好用~ 返回的是元素节点的所有子节点
innerHTML 和innerText
获取： innerHTML获取标签内所有的内容（包括标签）innerText 只能获取标签里的文本
设置： innerHTML 会渲染标签 innerText 就算是有标签 也会以字符串的形式渲染
元素节点的属性操作：
查： ele.getAttributeNode() //返回属性节点对象 ele.getAttribute（） //只返回要查询的属性名的属性值
增（ 改）： ele.setAttribute(‘属性名’,‘属性值’ ) //一次只能设置一个 如果有这个属性名 就是修改 没有就是设置
删：ele.removeAttribute(‘属性名’)
class操作
增： ele. t.add(‘类名1’…) *** 一次可以添加 多个！！！！！！！
删; ele.classList.remove(‘类名1’…) *** 一次可以删除多个！！！！！！！
切换：ele.classList.toggle(‘类名’） 切换类
替换类 ele.classList.replace(“被替换的类名”, “新类”);
查 ele.classList.contains(‘类名’)
获取元素的 内嵌和外链样式：
function getStyle(ele, attr) { //兼容写法
if (window.getComputedStyle) {
return window.getComputedStyle(ele, null)[attr];
}
return ele.currentStyle[attr];
}
增加节点:document.createElement(‘tag’) //只是创建！！！
拼接节点: 父节点.appendChild（ele） 拼接在父节点的最后
父节点.insertBefore（‘newEle’，‘参照节点’） 拼接在参照节点的前边
移除子节点： 父节点.removeChild（ele） 移除子节点
替换; 父节点.replaceChild（newEle，参照节点） 新的替换老的
克隆 ele.cloneNode（boo） 默认是false 表示 只克隆标签 不克隆内容 true相反
事件绑定：
简单事件：
绑定：ele.on+‘事件名称’=function（）{} ///层叠覆盖问题
解绑：ele.on+‘事件名称’=null
事件监听器：
绑定: ele.addEventListener（‘不带on的事件名称’，事件驱动函数）
解绑：ele.removeEventListener(‘不带on的事件名称’，绑定时的那个事件驱动函数) //第二个参数必须是 绑定时的那个事件驱动函数！！！！！否则解绑失败
BOM Browser Object Model 浏览器对象模型
window调用的发属性属性和方法 可以省略window （ps：alert（） window.alert（） ）
定时器的使用 : 开启 setInterval（） setTimeOut（）
关闭 clearInterval（） clearTimeOut()
location对象:
地址栏全信息:,location.href
协议:location.protocol
“主机:”,location.hostname
主机+端口:“,location.host
地址路径部分:”,location.pathname
“地址的#号锚点部分:”,location.hash)
地址的参数部分:",location.search
location对象三个关于页面跳转的功能
location.href=“地址”
location.assign(“地址”)
location.replace(“地址”)
区别:
assign跳转 会把当前页面存为历史记录 跳转过去以后 可以回退回来
replace跳转 会把当前页面销毁 跳转的新页面 新页面点击回退只能往上一层回退 当前页面记录不存在
常用在 登录成功以后跳转下一个页面 使用replace 不把登录页存为历史记录
href和assign功能一模一样
navigator.userAgent //获取类别版本客户端操作系统等信息
navigator.appVerson //返回浏览器的平台和版本信息
js特效:
offset：
offsetWidth/Height =>获取的是盒子最终渲染的宽高 （盒子宽高+padding+border）
offsetLeft/Top =>返回的是距离最近的 有定位的 父系盒子的（左边上边）的距离，如果都没有定位，返回的是元素距离body的距离 （返回的是number）
offsetParent => 返回的是距离对劲的有定位的父系盒子 如果都没有定位 返回的是 body
scroll：
scrollWidth/Height 内容不超出盒子的时候 返回的是盒子宽高+padding 如果超出了 返回 内容的宽高
scrollLeft/Top 如果是HTML调用的话 返回的是页面被卷去的左侧 和头部的距离
如果盒子调用（盒子必须有滚动条） //拓展 获取的是被卷曲的左侧和头部的距离
event
拓展 （兼容写法） event = event || window.event
function demo(event){
event = event || window.event
}
event.pageX/Y 鼠标到body的距离
event.screenX/Y 鼠标到屏幕的距离
event.clientX/Y 鼠标到可视区域的距离
clientWidth/Height HTML 获取浏览器可视区域的宽高
其他方式获取 window.innerWidth/Height
clientLeft/Top （获取的是盒子的左、上边框宽度） 最没用的
冒泡阻止： event.stopPropagation（）
默认事件以及阻止 event.preventDefault（）
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
