js的DOM的方法和属性总结

Posted 2022-04-02 xianxiaoan

1.DOM的获取元素
document.getElementById()
context.getElementsByTagName(tag) (可以获取相应上下文环境所有的tag标签)
context.getElementsByClassName() (ie6-8不兼容)
context.getElementsByName()(ie6-8只能用于表单元素)
document.body
document.documentElement
context.querySelector()/querySelectorAll() (获取的节点集合不存在DOM映射 是静态的 )
(表格的有表格的方式 context.tHead tBodies rows ......)

 

2.描述节点与节点关系的属性和方法(凡是指获取元素的在ie6-8都不兼容 默认不带Node 一般带Element 特殊者children childNodes parentNode)
childNodes(不包括孙子,文本结点可以有换行和空格)
children (注意这里不是 childElementNodes)
firstChild/firstElementChild
lastChild/lastElementChild
parentNode
previousSibling /previousElementSibling
nextSibling/nextElementSibling

 

 

3.node的常用类型

 

 

 

nodeType	nodeName	nodeValue
1	具体元素标签的大写 DIV....	null
9	#document	null
3	#text	就是文本的值 包括空格和换行
8	#comment	注释的文本

 

 

4.DOM的增删改
节点
document.createElement()
document.createDocumentFragment() 
new Image
appendChild()
replaceChild()
removeChild()
insertBefore()
clone(false/true)

属性
get/set/removeAttribute()

样式
getComputedStyle() (ie6-8不兼容)
getCurrentStyle (只适用于ie6-8)

5.DOM盒子模型的13个属性
clientWidth clientHeight clientTop clientLeft
scrollWidth scrollHeight scrollTop scrollLeft
offsetWidth offsetHeight offsetTop offsetLeft offsetParent
只有scrollTop scrollLeft 可读可写 其他均只读