javascript里面dom操作和兼容问题汇总

Posted 2020-07-10

DOM     增，删，改，查

oUl.children         获取UL的子节点         有length的属性

oUl.children[0]    获取UL第1个子节点     使用比较多

oUl.children[oUl.children.length-1]    获取Ul的最后一个子节点    使用比较多

 

oUl.parentNode    获取Ul的父节点    body,html,document

 

oUl.firstElementChild||oUl.firstChild    首个节点（first）    "firstChild 低版本IE6 -8

firstElementChild 高级浏览器"

oUl.lastElementChild||oUl.lastChild    最后一个字节点    同上

 

oLi.previousElementSibling||oLi.previousSibling    获取上一个兄弟节点    相对自己

oLi.nextElementSibling||oLi.nextSibling    获取下一个兄弟节点    相对自己

 

var oLi=document.createElement(‘li‘);    创建一个li的节点    创建赋值添加3个步骤

oLi.innerHTML=‘‘    给它赋值   

oUl.appendChild(oLi);    插入到oUl里面去（向后插入）常用   

oUl.insertBefore(要插的元素,插到哪里)    插入到某个元素前面去   

 

oUl.removeChild(要移除的元素);    删除掉某个元素  

 

节点.cloneNode()    克隆某个元素    "cloneNode（true）深度克隆

移除id:节点.removeAttribute(‘id‘);"

 

window.onscroll    滚动事件    当鼠标滚动的时候发生

window.onresize    窗口事件    当窗口缩小/放大的时候

 

滚动距离    配合滚动事件

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop

 

document.documentElement.clientHeight    可视区的高度   

document.documentElement.clientWidth    可视区的宽度   

 

offsetHeight(占位物体)（live事件）    物体盒模型高度    border+padding+height

offsetWidth(占位物体)（live事件）    物体盒模型宽度    border+padding+width

 

offsetparent    定位父级    如果没有定位父级则是body

parentNode     结构父级

 

offsetTop(占位物体)    物体盒模型最外边距离定位父级的top值    如果没有定位父级则是相对body

offsetLeft(占位物体)    物体盒模型最外边距离定位父级的left值    如果没有定位父级则是相对body

 

getAttribute(‘属性‘)    获取行间自定义属性   

setAttribute(‘属性‘，‘属性值‘);    设置行间属性值    对应使用

removeAttribute(‘属性‘)    移除属性