Javascript-DOM笔记
参考
JavaScript原生的dom操作方法
第一类:节点查找相关方法和属性
document/父节点.getElementById()
document/父节点.getElementsByTagName()
document/父节点.getElementsByName() //IE8以下不兼容
称作:dom0级方法
.获取元素的属性(常用) getAttribute()
.设置元素的属性(常用) setAttribute()
其它,dom扩展中还提供了以下方法:
querySelector()
querySelectorAll()
matchesSelector()
上述方法接收一个css选择符对
考虑空白符的相关层次关系属性
.访问子节点的属性 .childNodes;//注意,由于兼容性问题,有所谓"空白项"问题
var childnode = document.getElementsByTagName("ul")[0].childNodes;
.访问父节点 parentNode
JavaScript dom对象常用属性
. innerHtml dom对象.innerHtml
. nodeType
. nodeName
. offsetWidth offsetHeight
.scorllHeight
document.documentElement.offsetWidth || document.body.offsetWidth;
document.documentElement.offsetHeight;
第二类:动态操作节点相关方法
.创建元素节点 createElement() 或 document.createElement()
.创建文本节点 createTextNode()
.添加子节点:父元素.appendChild()
.插入新节点: 父元素.insertBefore(newNode,relNode)
.替换节点:父元素.replaceChild(newNode,oldNode)
.删除节点:父元素.removeChild(node)
.克隆节点:节点.cloneNode() 传入true参数代表深度克隆,否则为浅克隆