Javascript-DOM笔记

Posted 2020-09-05 轴轴

参考

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参数代表深度克隆，否则为浅克隆