jQuery获取元素内容

11/13 2016

Harttle

所有人都知道使用.html()可以获得元素内容，.find()可以获得子元素。但这两个方法不是万能的，在很多场景我们需要其他的API。例如：

获得所有内容节点（包括文本、注释、元素）
获得iframe或frame内的document
获得所有直接子元素

下文中整理的jQuery获取元素内容的各种方法及其区别，包括.html(), .text(), .children(), .contents()。

.html()

获取jQuery集合中首个元素的HTML内容，相当于HTMLElement.innerHTML。该方法通常用于获取<script>的内容，设置渲染结果，以及初始化在线编辑器的内容。

文档：http://api.jquery.com/html/

注意，设置表单元素的内容需要使用.val()方法而非.html()。

.text()

获取jQuery集合中每个HTML元素的文本内容，相当于很多模板引擎中的strip_html。相当于DOM API中的Node.textContent。

常用于从HTML文档获取文本摘要，比如生成分享内容，文档标题，以及文本消息。例如：

<p><b>Test</b> Paragraph.</p>
 
<script>
$("p").text() === 'Test Paragraph.'
</script>

文档：http://api.jquery.com/text/

.children()

获取jQuery集合中每个HTML元素的子元素，只获得元素节点（nodeType===1）。与.find()唯一的区别就是只取直接子元素。

文档：http://api.jquery.com/children/

.contents()

获取所有子节点，包括元素节点（nodeType===1）、文本节点（nodeType===3）以及注释节点（nodeType===8）。相当于DOM API中的ParentNode.children。

这在我们操作文本内容是非常有用，比如把当前页面文本中所有harttle设为大写：

$('p').contents()
    .filter(function() { 
        return this.nodeType == 3; 
    })
    .each(function(){
        this.textContent = this.textContent
            .replace(/harttle/, 'HARTTLE');
    });

除此之外，.content()还可以获取frame元素内容的document对象。看源码src/traversing：

contents: function( elem ) {
    return elem.contentDocument || jQuery.merge( [], elem.childNodes );
}

因为contentDocument在操作同域iframe时才可用，所以通过.contents()获取iframe内容也需要同域iframe。

文档：https://api.jquery.com/contents/

本文采用知识共享署名 4.0 国际许可协议（CC-BY 4.0）进行许可，转载注明来源即可： https://harttle.land/2016/11/13/jquery-element-contents.html。如有疏漏、谬误、侵权请通过评论或邮件指出。