(一)innerText和innerHTML
尽管DOM带来了动态修改文档的能力,但对微软的开发人员来说,还不够。所以IE为所有的元素引入两个特性,以更方便的进行文档操作,这两个特性是innderText和innerHTML。
其中,innerText特性用来修改起始标签和结束标签之间的文本。例如,假设有个空的<div/>元素,希望将其变成<div>文本内容<div/>。用DOM实现时,要这么做:
oDiv.appednChild(document.createTextNode(“文本内容”));
这段代码并不难读,但是很冗长。如果使用innerText,只需要要这么做:
oDiv.innerText=”文本内容”;
使用innerText,代码更简洁,且容易理解。另外,innerText会自动将小于号、大于号、引号和&符号进行HTML编码,所以丝毫不需要担心这些特殊字符:
oDiv.innerText=”文本内容<div/>.”;
这一行代码的结果是:<div/>文本内容<div/&lgt;.</div>。但如何一定要在元素中包含HTML标签呢?
应用innerHTML特性,可以直接给元素分配HTML字符串,而不需要考虑使用DOM方法来创建元素。例如,假设一个空<div/>要变成<div><strong>Hello</strong> <em>World</em></div>。使用DOM,要用下面代码:
var oStrong=document.createElement(“strong”);
oStrong.appendChild(document.createTextNode(“Hello”));
var oEm=document.createElement(“em”);
oEm.appendChild(document.createTextNode(“World”));
oDiv.appendChild(oStrong);
oDiv.appendChild(document.createTextNode(“”));
oDiv.appendChild(oEm);
而使用innerHTML,代码就变成:
oDiv.innerHTML=”<strong>Hello</strong> <em>World></em>”;
如果元素只包含文本,innerText和innerHTML返回相同的值。但是,如果同时包含文本和其他元素,innerText将只返回文本的表示,而innerHTML,将返回所有元素和文本的HTML代码。
(二)outerText和outetHTML
outerText和outerHTML的情况和前两者十分相似,只不过替换的是整个目标节点。例如,设置<div/>的outerText,将删除标签本身并把它替换成文本节点,考虑下面的这行代码:
oDiv.outerText=”Hello World”;
这一行代码等同于下面一系列DOM操作:
var oText=document.createTextNode(“Hellow World! ”);
var oDivParent=oDiv.parentNode;
oDivParent.replaceChild(oText,oDivParent);
outerText特性和innerText特性有个相同的规则,就是用相应的HTML实体替换所有的小于号、大于号、引号以及&号。类似的,outerHTML和innerHTML的行为也差不多,创建用HTML字符串表示的所有必要的DOM节点。
虽然他们提供了强大的功能,但它们并未清楚地表示到底发生了什么。应该尽量避免使用outerText和outerHTML。这两个特性都可用来获取某个元素的内容。不管元素的内容是什么,outerText特性总是返回和innerText一样的内容。而另一方面,outerHTML是返回元素完整的HTML代码,包括元素本身。
类似innerText,可以用某种独特的方式使用outerText。通过将outerText赋值给其自身,就可以删除元素,并把它替换成包含元素所有文本的一个文本节点。
只有在IE和Opera中才支持outerText和outerHTML特性。