Javascript: 修改元素节点内容的3大类方法及注意事项

DOM操作在前端开发中至关重要,特别是修改元素节点的内容。本文介绍了通过直接修改文本节点的nodeValue、使用textContent以及最常用的innerHTML属性来更新元素内容的方法。然而,innerHTML在处理大量运算时可能导致性能问题。为了解决这些问题,可以参考相关解决方案链接。
摘要由CSDN通过智能技术生成

DOM操作是前端必须掌握的技能之一, 而最经常做的就是读取和修改元素节点的文本内容,这里给大家列出7种获取/修改文本内容的方式, 供大家参考!

  • 通过直接修改文本节点
    节点一共具有三个属性, nodeType, nodeValue, nodeName
    只有注释, 文本, 属性具备nodeValue
    所以我们可以直接获取目标节点的子文本节点

    target.firstChild.nodeValue //需要保证第一个子节点是文本节点
    target.childNodes[0].nodeValue //同理
    

    很明显, 仅仅适用于 文本节点是直接子节点 的 元素节点

  • 利用textContent
    这是DOM3新增的方法, 使用前务必先做判断, IE8及更早版本不兼容
    可以使用innerText做兼容, 效果类似, 不过适用更广(ps: 何不用innerHTML)

    let text =
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值