最近评论
正在载入评论列表...
5.5 获取元素的内容
所有的DOM元素无外乎包含以下三者之一：文本、元素、文本与元素的混合。一般来说，常见的是第一种和最后一种。在这一节中你将了解现有的获取元素内容的常用方法。
5.5.1 获取元素内的文本
获取元素内的文本可能会令DOM新手最容易迷惑，同时它也配合了HTML DOM文档和XML DOM文档。在图5-3所示的DOM结构例子中，有一个<p>主元素，它包含一个<strong>元素和一段文本块。<strong>元素本身同时包含文本块。
让我们来看看如何获取这些元素中的文本。<strong>元素很简单，因为它除了文本节点没别的干扰信息。
应该注意的是，所有非基于Mozilla的浏览器中都有一个叫作innerText的属性，可用它来获取元素内的文本。这十分方便。不幸的是，因为它在一个比较流行的浏览器上并不可用，同时在XML DOM文档中也不行，你还是需要开发一个可行的替代方案。
获取元素内文本内容的一个窍门是，需要记住元素并不是直接包含文本的，而包含在一个子文本节点中，这可能有点让人不习惯。假设变量strongElem包换一个<strong>元素的引用，让我们来看看代码清单5-15是如何使用DOM从元素内抽出文本的。
代码清单5-15 获取<strong>元素的文本内容
// 非Mozilla浏览器:
strongElem.innerTex
// 其他的浏览器:
strongElem.firstChild.nodeValue
了解如何从单个元素中获取文本内容后，你需要继续学习如何从<p>元素中获取经过组合的文本内容。为此，你或许需要开发一个通用的函数来获取任意元素的文本内容，而不用考虑元素究竟嵌套了几层，如代码清单5-16所示。调用text()将返回元素及其所有后代元素包含的文本内容。
代码清单5-16 一个获取元素文本内容的通用函数
function text(e) {
var t = "";
// 如果传入的是元素，则继续遍历其子元素，
// 否则假定它是一个数组
e = e.childNodes || e;
// 遍历所有字节点
for ( var j = 0; j < e.length; j++ ) {
// 如果不是元素，追加其文本值
// 否则，递归遍历所有元素的子节点
t += e[j].nodeType != 1 ?
e[j].nodeValue : text(e[j].childNodes);
}
// 返回匹配的文本
return t;
}
使用这个能够获取任何元素文本内容的函数，在上面这个例子中，你就可以从<p>元素中获取它的文本内容了，代码大致如下：
// 获取<p>元素的文本内容
text( pElem );
这个函数还有一个显著的好处，那就是它可以确保在HTML和XML DOM文档中都能工作，那就是说你现在拥有了一个能获取任何元素文本内容的兼容方法。
5.5.2 获取元素内的HTML
与获取元素内的文本比起来，获取元素内的HTML是一项更容易上手的DOM任务。令人高兴的是，由于一个由IE小组开发的特色方法，所有的现代浏览器现在都实现了HTML DOM元素的一个额外属性：innerHTML。使用这个属性你就可以从一个元素中提取所有HTML和文本了。此外，使用innerHTML十分快——通常会比递归查找元素内的所有文本内容快得多。但是并非事事称心如意。它取决于浏览器如何去实现innerHTML属性，而且因为并没有标准，每种浏览器都可以返回它自以为是的内容。例如，以下是一些使用innerHTML属性的怪异bug：
l 基于Mozilla的浏览器在innerHTML声明中并不会返回<style>元素。
l IE返回的元素字符都是大写的，如果你想保持一致性可能会感到失望。
l innerHTML作为一个只能用在HTML DOM文档的元素中的属性，若在XML DOM文档中使用的话只会返回null值。
使用innerHTML属性是很直观的，存取该属性会返回一个包含该元素的HTML内容的字符串。如果元素仅包含文本而不包含任何子元素，则返回的字符串只包含文本。我们通过调试图5-2中两个元素来看它是如何工作的：
// 获取<strong>元素的innerHTML
// 应返回"Hello"
strongElem.innerHTML
// 获取<p>元素的innerHTML
// 应返回"<strong>Hello</strong> how are you doing?"
pElem.innerHTML
如果你确定元素只包含文本，这个方法也可用来取代前面那个获取元素文本的复杂方法，并且十分简便。另一方面，能获取元素内的HTML内容，你就可以利用就地编辑的特点来构建一些动态的时髦应用。在第10章我们会讨论这个主题。
