原生JS的DOM操作API

本文详细介绍了原生JavaScript的DOM操作API,包括createElement、createTextNode、cloneNode、createDocumentFragment、appendChild、insertBefore、removeChild、replaceChild等方法,以及getElementById、getElementsByTagName、getElementsByClassName和querySelector等选择器的使用。还提到了如parentNode、childNodes、children等属性,以及直接修改元素样式的技巧。了解这些API可以帮助前端开发者更高效地操作DOM。
摘要由CSDN通过智能技术生成

 createElement

createElement通过传入指定的一个标签名来创建一个元素,如果传入的标签名是一个未知的,则会创建一个自定义的标签,注意:IE8以下浏览器不支持自定义标签。

使用createElement要注意:通过createElement创建的元素并不属于HTML文档,它只是创建出来,并未添加到HTML文档中,要调用appendChild或insertBefore等方法将其添加到HTML文档树中。

 let elem = document.createElement("div")
 elem.id = 'test'
 elem.style = 'color: red'
 elem.innerHTML = '我是新创建的节点'
 document.body.appendChild(elem)

createTextNode

createTextNode用来创建一个文本节点

let node = document.createTextNode("我是文本节点")
document.body.appendChild(node)

cloneNode

cloneNode返回调用该方法的节点的一个副本

ode 将要被克隆的节

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值