木森林林常识库

木森林林常识库
专业信息资源分享平台

JavaScript中的DOM专有扩展-插入文本

IE原来专有的插入标记的属性innerHTML和outerHTML已经被HTML5纳入规范,但innerText和outerText却没有被纳入规范。

innerText属性

通过innerText属性可以操作元素中所包含的文本内容,包括子文档树中的文本。

在通过innerText读取值时,它会按照由浅入深的顺序,将子文档树中的所有文本拼接起来。

在通过innerText写入值时,结果会删除元素的所有子节点,插入包含相应文本值的文本节点。

由于不同浏览器处理空白符的方式不同,因此输出的文本可能会也可能不会包含原始HTML代码中的缩进。

支持innerText属性的浏览器包括IE4+、Safari3+、Opera8+、Chrome、高版本Firefox。

低版本Firefox虽然不支持innerText,但支持作用类似的textContent属性。

textContent是DOMLevel3规定的一个属性,其他支持textContent属性的浏览器还有IE9+、Safari3+、Opera10+和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;
	}
}

实际上,innerText与textContent返回的内容并不完全一样。比如,innerText会忽略行内的样式和脚本,而textContent则会像返回其他文本一样返回行内的样式和脚本代码。

避免跨浏览器兼容问题的最佳途径,就是从不包含行内样式或行内脚本的DOM树或DOM片段中读取文本。

outerText属性

除了作用范围扩大到了包含调用它的节点之外,outerText与innerText基本上没有多大区别。

在读取文本值时,outerText与innerText的结果完全一样。

但在写模式下,outerText不只是替换调用它的元素的子节点,而是会替换整个元素(包括子节点)。

支持outerText属性的浏览器有IE4+、Safari3+、Opera8+和Chrome。由于这个属性会导致调用它的元素不存在,因此并不常用。

分享:

评论