码迷,mamicode.com
首页 > Web开发 > 详细

innerHTML/outerHTML; innerText/outerText; textContent

时间:2016-05-13 07:40:51      阅读:415      评论:0      收藏:0      [点我收藏+]

标签:

innerHTML v.s. outerHTML

  • Element.innerHTML
  • Element.outerHTML
    •   Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML
    •   Functionality
      •   Get serialized HTML fragment describling the element and its descendants.
      •   Set : Replace the element with the nodes generated by parsing the content string with parent of the element as the context node for the fragment parsing algorithm.
    •   NOTE
      •   If element has no parent element, set outerHTML will throw DOMException.
        •   e.g. [Chrome Dev Console]  document.documentElement.outerHTML=‘a‘;   Uncaught DOMException: Failed to set the ‘outerHTML‘ property on ‘Element‘: This element‘s parent is of type ‘#document‘, which is not an element node.
      •   Considering below code.
        // HTML:
        // <div id="container"><div id="d">This is a div.</div></div>
        
        container = document.getElementById("container");
        d = document.getElementById("d");
        console.log(container.firstChild.nodeName); // logs "DIV"
        
        d.outerHTML = "<p>This paragraph replaced the original div.</p>";
        console.log(container.firstChild.nodeName); // logs "P"
        
        // The #d div is no longer part of the document tree,
        // the new paragraph replaced it.

        While the element will be replaced in the document, the variable whose outerHTML property was set will still hold a reference to the original element!

innerText and outerText

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support 4 45 (45) 6 9.6 (probably earlier) 3

 

textContent v.s innerText

  • Node.textContent
    • Get: different node types gets different result
      •   null: document, notation (use document.documentElement.textContent instead).
      •   text inside the node: CDATA, comment, text node, processing instruction. (nodeValue)
      •   concatenation of children nodes (excluding comment, processing instruction nodes) text: other types node
    • Set: Remove node children and replace it with a text node.
  • Difference from innerText
    •   many... : refer to MDN.
  • Why we still need innerText sometime?
    •   Browser compatibility!
      •   IE has better support for innerText than for textContent. Only IE9+ supports textContent, but IE6+ supports innerText.
    •   Common usage:
      •   set
        t[t.innerText ? ‘innerText‘ : ‘textContent‘] = v.n

         

 

      •   get
        it = currHeaderChildNodes[i].innerText || currHeaderChildNodes[i].textContent;

         

 

textContent v.s. innerHTML

  • It‘s recommand to use textContent!
    • innerHTML parse text as HTML (except "script" element) -> poor performance!
    • innerHTML has security problem!

innerHTML/outerHTML; innerText/outerText; textContent

标签:

原文地址:http://www.cnblogs.com/gentlemint/p/5484808.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!