十年专注于品牌网站建设 十年专注于品牌网站建设,低调、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

详细介绍innerText、innerHTML、outerText、outerHTML使用方法

百恒网络 2016-12-02 1735

在JavaScript中对文字编辑也是经常,通常标签不复杂性况下,我们也可以直接对标签内的容进行读取和修改操作,介于兼容性不是很理想前提下,我们先来了解下相关的方法及其他浏览器中替代的方法,结合实例让大家快掌握及投入到实际工作中。
       1.innerText属性
通过innertText属性可以操作元素中包含的所有文本内容,无论文本位于子文档树中的什么位置。在通过innerText读取值时,它会按照由浅入深的顺序,将子文档树中的所有文本拼接起来。以下面的HTML代码为例:
<div id=" content">
       <p>This is a<strong>paragraph</strong> with a list following it.</p>
       <ul>
       <li>ltem l</li>
       <li>ltem 2</li>
       <li>ltem 3</li>
       </ul>
</div>
       对于这个例子中的<div>元素而言,其innerText属性会返回下列字符串:
       This is a paragraph with a list following it.
       Item l
       Item 2
       Item 3
       由于不同浏览器处理空白符的方式不同,因此输出的文本可能会也可能不会包含原始HTML代码中的缩进。
使用innerText属性设置这个<div>元素的内容,则只需一行代码:
       div.innerText="Hello world!;
       执行这行代码后,页面的HTML代码就会变成如下所示:
       <div id="content">Hello world!</div>
       可见,设置innerText属性移除了先前存在的所有子节点,完全改变了DOM子树。此外,通过设置innerText属性还可以对所有出现在文本中的HTML语法字符(小于号、大干号、引号及和号)进行编码。例如,下面的这行代码:
       div.innerText="Hello&welcome, <b>"reader"!</b>";
       运行之后的结果如下:
       < div id=‘’content">Hello &amp; welcome,&lt;b&gt;&quot; reader&quot;!&lt; /b&gt;</div>
       设置innerText永远只会生成当前节点的一个子文本节点,而为了确保只生成一个子文本节点, 就必须要对文本进行HTML编码。此外,还可利用innerText属性过滤掉HTML标签。方法是将 innerText设置为等于innerText,这样就可以去掉所有HTML标签,如下所示:
       div.innerText=div.innerText:
       执行这行代码的结果就是用原来的文本替换容器元素中的所有内容。        在此,南昌网站制作公司百恒网络开发工程师提示大家IE、Safari、Opera和Chrome支持innerText属性。Firefox虽然不支持innerText,但支持作用类似的textContent属性。textContent是DOM3级规定的一个属性,而且也得到了Safari、Opera 和Chrome的支持。为了确保跨浏览器兼容,有必要像下面这样通过函数来检测可以使用哪个属性:
function getInnerText(element){
       return ( typeof element.textContent=="string") ?
              element.textContent : element.innerText:
       }
function setInnerText(element, text){
       if (typeof element.textContent== "string"){
              element.textContent=text:
       } else {
              element.innerText=text:
       }
}
       这两个函数都接受一个元素,然后检查这个元素是不是有textContent属性。如果有,那么type of element.textContent应该是"string";如果没有,那么这两个函数就会改为使用innerText,可以像下面这样调用这两个函数:
       setInnerText( div, "Hello worldl“);
       alert( getinnerText (div)); //"Hello world!"
使用这两个函数可以确保在不同的浏览器中使用正确的属性。
2.innerHTML属性
       innerHTML与innerText在很多方面都很相似。在读取信息时,innerHTML返回当前元素所有子节点的HTML表现,包括元素、注释及文本节点。在写入信息时,innerHTML会按照指定的值创建新的DOM子树,并以该子树替换当前元素的所有子节点。提到innerHTML与innerText之间最 主要的区别,无非就是innerHTML处理的是HTML字符串,而innerText处理的是普通文本字符串。
以下面的HTML代码为例:
<div id="content">
<p>This is a<strong>paragraph</strong> with a list following it.</p>
       <ul>
              <li>ltem l</li>
              <li>ltem 2</li>
              <li>ltem 3</li>
       </ul>
< /div>
这里面<div>元素的innerHTML属性将返回下列字符串:
<p>This is a<strong>paragraph</strong> with a list following it.</p>
<ul>
       <li>ltem l</li>
       <li>ltem 2</li>
       <li>ltem 3</li>
</ul>
       在不同浏览器中,innerHTML返回的文本可能会有所不同。IE和Opera常常把所有标签转换为大写,而Safari、Chrome和Firefox则以文档中指定的形式返回HTML-包括空格和缩进。不要指望所有浏览器都会返回没有丝毫差别的innerHTML值。
       在写入信息时,innerHTML会将给定的字符串解析为DOM子树,并用这个子树替换所有的子节 点。由于赋给innerHTML的字符串会被当作HTML,因此其中包含的所有标签都会按照浏览器处理 HTML的标准方式,被转换成对应的元素(同样,这个过程也会因浏览器而异)。如果像下面这样, 只设置简单的文本,那么结果就如同设置innerText -样:
       div.innerHTML="Hello world!":
       如果为innerHTML设置的字符串中包含HTML代码,结果可能就会大不一样了。区别就在于innerText会转义HTML语法字符,而innerHTML会解析它们。来看下面的例子:
       div.innerHTML="Hello&welcome, <b>\"reader"!</b>";
       执行这行代码之后的结果是:
       <div id="content">Hello &amp; welcome, <b>&quot; reader&quot;!</b></div>
       在设置完innerHTML之后,马上就可以像访问文档中的其他节点一样访问新生成的节点。
       设置innerHTML会导致浏览器将HTML字符串解析为对应的DOM树。换句话说,设置完innerHTML之后再读取它,将会得到一个差别很大的字符串。这个字符串不再是原始的
HTML代码,而是根据原始HTML字符串创建的DOM子树经过序列化之后的结果。
       innerHTML也有一些限制。首先,在多数浏览器中,通过innerHTML插入的<script>元素不会被执行。IE是唯一支持这种操作的浏览器,但条件是必须指定defer特性,并且在<script>元素前 面添加微软所谓的作用域内元素(scoped element)。这是因为<script>元素被认为是作用域外元素 (NoScope element),包含着在页面中看不到该元素的意思,就像看不到<style>元素或注释一样。在 通过innerHTML插入的字符串中,如果一开始就是作用域外元素,IE会把所有作用域外元素都剥离 掉,也就是说下面这行代码将无法执行:
div.innerHTML="<script defer>alert(' hi‘);</scr"+..ipt>";//不能执行
       在这里,通过innerHTML插入的字符串以一个作用域外元素开头,因此整个字符串会变成空字符串。为了确保脚本能够执行,必须前置一个作用城内元素,例如一个文本节点,或者像<input>这样的一个没有结束标签的元素。例如,下面这几行代码都可以正常执行:
       div.innerHTML=".<script defer>alert(’hi’);</scr“+"ipt>";
       div.innerHTML="<div>&nbsp;</div><script defer>alert(‘hi’)j</scr"+"ipt>";
       div.innerHTML="<input type= "hidden“><script defer>alert(‘hi‘);</scr'+"ipt>“;
       第一行代码会导致在<script>元素前插入一个文本节点。事后,为了不影响页面显示,可能需要移除这个文本节点。第二行代码采用的方法类似,只不过使用的是一个包含非换行空格的<div>元素。
       如果仅仅插入一个空的<div>元素,还是不行;必须要包含一点内容,浏览器才会创建文本节点。同样,为了不影响页面布局恐怕还是得要移除这个节点。第三行代码使用的是一个隐藏的<input>字段,
也能达到相同的效果。不过,由于隐藏的<input>字段不影响页面布局,因此这种方式在大多数情况下都是首选。 在多数浏览器中,通过innerHTML写入<style>元素也存在类似的问题。Opera 9及更高版本和 Firefox 2及更高版本支持以直观的方式通过innerHTML插入<style>元素,例如:
       div.innerHTML=“<style type=\"text/css">body(background-color: red; )</style>";
       IE和Safari会忽略这个<style>元素。在IE中,<style>也是一个作用域外元素,因此必须像下面这样给它前置一个作用域内元素:
       div.innerHTML="_<style type="text/css">body tbackground-color:red;)</style>";
       div.removeChild( div.firstChild);
       Safari和Chrome则会因为没有将这个<style>元素添加到<head>元素而继续忽略它。如果想在所有浏览器中都成功插入<style>元素,就必须像下面这样:
       //针对Opera.Firefox和IE
       div.innerHTML=".<style type="text/css">body {background-color:red; )</style>’’;
       div.removeChild( div.f irstChild);
       //针对Safari和Chrome
       document.getElementsByTagName("head")[O】.appendChild (div.firstChild);
       在将新创建的<style>元素添加到<head>后,Safari和Chrome会应用新样式。
       并不是所有元素都有innerHTML属性。不支持innerHTML的元素有:<col>、<colgroup>、<fraIneset>、<head>、<html>、<style>、<table>、<tbody>、<thead>,<tfoot>、<title>和<tr>.
       无论什么时候,如果想用innerHTML·插入来自外界的HTML内容,都应该首先对该FITML进行 一番无害化处理。IE8为此提供了window.toStaticHTML()方法,这个方法接受一个参数,即一个 HTML字符串;返回一个经过无害处理后的版本——从源HTML中删除了所有脚本节点和事件处理程序特性。下面就是一个例子:
       var text="<a href="#\‘一onclick="alert(’hi")\">Click Me</a>";
       var sanitized=window.toStaticHTML(text); //仅适用于’IE8
       alert( sanitized); //“<a href=\"#\">Click Me</a>"
       这个例子将一个HTML链接字符串传给了toStaticHTML()方法,得到的无害版本中去掉了onclick特性。虽然目前只有IE8原生支持这个方法,但我们还是建议读者在通过innerHTML插入代码之前,尽可能先手工检查一下其中的文本内容。
3.outerText属性
       除了作用范围扩大到了包含调用它的节点之外,outerText与innerText基本上没有多大区别。
       在读取信息时,outerText与innerText的结果完全一样。但在写入信息时,outerText就完全不同了;outerText不只是替换调用它的元素的子节点,而是会替换整个元素(包括子节点)。以下面 这行代码为例:
       div.outerText="Hello world!";
       这行代码实际上相当于如下两行代码:
       var text=document.createTextNode("Hello world!");
       div.parentNode.replaceChild(text, div);
       本质上,新的文本节点会完全取代调用outerText的元素。此后,该元素就从文档中被删除,访问不到了。
支持outerText属性的浏览器有IE、Safan、Opera和Chrome。由于这个属性会修改调用它的元素,因此并不常用。我们也建议读者尽量不要使用这个属性。
4.outerHTML属性
       outerHTML之于innerHTML,就如同outerText之于innerText。在读取信息时,outerHTML会返回调用它的元素的HTML代码,包括所有子节点。当写入信息时,outerHTML会用解析给定的 HTML字符串创建的DOM子树替代调用它的节点。假设有以下HTML代码:
<div id="content">
       <p>This is a<strong>paragraph</strong> with a list following it.</p>
       <ul>
       <li>ltem l</li>
       <li>ltem 2</li>
       <li>ltem 3</li>
</ul>
</div>
       如果在例子中的<div>元素上调用outerHTML,就会返回与上面相同的HTML代码(包含<div>)。
       不过,取决于浏览器解析和解释HTML代码的方式,返回的结果也可能会不大一样(这些差异与使用 innerHTML时看到的差异相同)。
       使用outerHTML设置值的示例代码如下:
       div.outerHTML=1’<p>This is a paragraph.</p>";
       这行代码与下列DOM代码执行的操作完全一样:
       var p=document.createElement("p");
       p.appendChild( document.createTextNode("This is a paragraph."));
       div.parentNode.replaceChild (p. div);
       结果,新创建的<p>元素会取代DOM树中原来的<div>元素。
       支持outerHTML属性的浏览器有IE.Safari、Opera和Chrome。与outerText属性类似,也几 乎没人使用outerHTML,原因还是这个属性会修改调用它的元素。建议读者最好也不要使用它。
5.内存和性能问题
       使用innerText.innerHTML、outerText和outerHTML替换子节点可能会导致浏览器的内存 问题,尤其是在IE中。如果被删除的子树中的元素设置了事件处理程序或者具有值为JavaScript对象的属性,就会出现这种问题。假设某个元素有一个事件处理程序(或一个作为属性的JavaScript对象), 当使用上述某个属性将该元素从文档树中移除后,元素与事件处理程序之间的绑定依旧存在于内存中。如果这种情况频繁出现,页面占用的内存数量就会显著增加。因此,在使用这4个属性时,对于 即将移除的元素,最好先手工移除它的所有事件处理程序和JavaScript对象属性(第12章将进一步讨论事件处理程序)。
       使用这几个属性仍然还是有好处的,特别是使用innerHTML。一般来说,在插入大量的新HTML 时,使用innerHTML,要比通过多次DOM操作先创建节点再指定它们之间的关系有效率得多。这是因为在设置innerHTML(outerHTML)时,就会创建一个HTML解析器。这个解析器是在浏览器级别的代码(通常是C++编写的)基础上运行的,因此要比执行JavaScript快得多。不可避免地,创建和销毁HTML解析器也会带来性能损失,所以最好能够将设置innerHTML或out erHTML的次数控制在合 理的范围内。例如,下列代码使用innerHTML创建了很多列表项:
       for (var i=0, len=values.length; i<len; i++){
              ul.innerHTML+="<li>"+values[i]+"</li>“;//不应该这样做!
       }
       这种每次循环都设置一次innerHTML的做法效率很低。而且,每次循环还要从innerHTML中读 取一次信息,就意味着每次循环要访问两次innerHTML。最好的做法是单独构建字符串,然后再一次性地将结果字符串赋值给innerHTML,像下面这样:
       for (var i=0, len=values .length; i<len; i++){
       }
这个例子的效率要高得多,因为它只对innerHTML执行了一次赋值操作。
  本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广技人员有所帮助。原创文章出自:南昌网站建设公司-百恒网络http://www.jxbh.cn/如转载请注明出处!

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×