本文全面介绍了DOM的基础知识,包括节点的属性、节点间的关系及操作方法。深入探讨了如何使用appendChild、insertBefore、replaceChild和removeChild等方法进行节点操作,并讲解了如何通过getAttribute、setAttribute和removeAttribute操作元素属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

铛~今天又没啥事,来总结一下DOM的基础知识。(公司没活干我也很无奈?)

 

? 所有节点都有nodeType、nodeName、nodeValue三个属性。

 

? 节点关系

parentNode 父节点

childNodes 子节点集合

nextSibling 弟节点

previousSibling 兄节点

firstChild 第一个子节点

lastChild 最后一个子节点

hasChildNodes()判断是否有子节点

 

? 操作节点的方法

someNode.appendChild(newNode) //追加一个子节点 插入后成为最后一个子节点

insertBefore() //将节点插入某个位置

someNode.insertBefore(newNode,null) //插入后成为最后一个子节点

someNode.insertBefore(newNode, someNode.firstChild); //插入后成为第一个子节点

someNode.insertBefore(newNode, someNode.lastChild); //插入到最后一个子节点前面

replaceChild() //替换节点

someNode.replaceChild(newNode, someNode.firstChild); //替换掉第一个节点

someNode.replaceChild(newNode, someNode.lastChild); //替换掉最后一个节点

removeChild() //移除节点

someNode.removeChild(someNode.firstChild); //移除第一个节点

newNode = oldNode.cloneNode(true);//newNode 为oldNode的副本,带子节点

newNode = oldNode.cloneNode(false);//newNode 为oldNode的副本,不带带子节点

 

? 操作Element属性

getAttribute(name);//获取属性

setAttribute(name,value);//设置

removeAttribute(name);//删除

? 创建节点
document.createElement(tagName);
document.createTextNode(str);

 

emm内容好多~还是看书吧

转载于:https://www.cnblogs.com/LLLLily/p/9962101.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值