js操作DOM总结

97 阅读1分钟
1.查找节点API
document.getElementById
document.getElementByTagName
document.getElementByClassName
document.getElementByName
document.querySelector
document.querySelectorAll
documment.form
2.创建节点
创建元素createElement()
创建文本节点 createTextNode('text')
克隆一个节点 cloneNode(true)
3.修改节点
增加节点x.appendChild()
插入节点insertBefore(x,y)
删除节点 removeChild
替换节点 replaceChild
3.节点关系
获取父节点parentNode
获取所有子节点集合 children
获取所有节点列表childNodes
获取第一个子节点,firstChild
获取最后一个子节点,lastChild
获取前一个兄弟元素 previousSibling
获取后一个兄弟元素nextSibling
返回前一个兄弟元素得节点previousElementSibing
返回后一个兄弟元素的节点nextElementSibling
4.元素属性型API
给元素设置属性 setAttributes
获取元素属性 getAttributes
判断是否有某个属性hasAttributes
设置自定义属性 dataset
5.样式api
修改元素样式,只能获取内联样式
element.style.xx = ''
设置
element.setProperty('xx','xx')
删除样式
element.removeProperty('xx')
移除class list
xx.classList.remove(xx)
新增
xx.classList.add(xx)
根据条件判断ture删除,false增加
xx.classList.toggle(xx,'if')
获取元素所有样式得方法
window.getComputedStyle(element)