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

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

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

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

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

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

  let text =