Javascript-DOM笔记

Posted 轴轴

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript-DOM笔记相关的知识,希望对你有一定的参考价值。

参考

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

以上是关于Javascript-DOM笔记的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript-dom3

JavaScript-DOM(九九乘法表)——两种算法

13-javascript-DOM操作的相关案例

javascript-DOM

学习笔记:python3,代码片段(2017)

JavaScript-DOM节点