Node.textContent Element.innerHTML 还有ie的innerText

Node.textContent: 对节点及其后代节点文本内容的读写

1 var text = element.textContent;
2 element.textContent = "this is some text"
  1. 如果元素是document、document type或者notation,textContent返回null,如需要获取文档所有text和CDATA数据,使用:document.documentElement.textContent
  2. 如果元素是CDATA、注释、处理指令或者文本节点,textContent返回其内部文本
  3. 对于其他类型的节点,textContent返回该节点所有后代节点textContent返回文本的连接(不包括注释与处理指令),如果节点没有子节点则返回空字符串。
  4. 对节点设置textContent会移除其所有子节点并用所设置的文本节点作为其内容。

 

textContent与innerText的区别:IE引入innerText,基本上实现相同的功能,但存在以下差别

  1. textContent会返回所有元素的内容,包括<script>和<style>,但是innerText不会
  2. innerText会考虑元素样式,不会返回隐藏元素的文本,但是textContent会
  3. innerText会考虑样式,it will trigger reflow(重新渲染?),但是textContent不会

textContent与innerHTML的区别:innerHTML返回源代码。通常人们使用innerHTML来设置和读取元素的文本内容,其实应该使用textContent。Since the text is not processed,这样可能带来更好性能,而且这可以避免xss vector attack。

 

Element.innerHTML

    innerHTML设置、读取元素子孙节点的HTML内容。

注意:

  1. 当元素内包含转义字符序列时,如<span>&amp</span>, innerHTML返回&amp, innerContent返回&
  2. element.innerHTML = ""; 会清空其所有内容
  3. 通过访问<body>, <html>的innerHTML可以查看最新(即使被修改过)的源代码
  4. 通过innerHTML插入文本可能带来安全问题
    1 name = "<script>alert('hello ')</script>";
    2 element.innerHTML = name; // 此处代码不会带来问题

    以上代码看似存在安全问题。HTML5规范制定通过innerHTML插入的<script>不会被执行,然而一下代码会执行

    1 var str = "<img src='xxx' onerror='alert(33333)'/>";
    2 element.innerHTML = str;

    所以,当需要插入普通文本时使用textContent,这仅仅插入普通文本,不会造成解析

 

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2013-11-29 15:43  我的百科全书  阅读(519)  评论(0编辑  收藏  举报