未加星标

获取 DOM 内容的 API 接口

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

Web 开发者可能会使用 jQuery .html() 和 .text() 方法来设置 DOM 内容,但他们的实现仍然依赖于 DOM API。 本文来梳理一下这些用来获取 DOM 内容的 DOM 属性(attribute), 比较它们的区别: innerHTML , outerHTML , innerText , outerText , text , textContent , 以及 jQuery 中 .html() 和 .text() 的实现。

innerHTML/outerHTML

outerHTML 和 innerHTML DOM 属性用来设置 DOM 的 HTML 内容。 其中 innerHTML 返回元素内容的 HTML 片段,而 outerHTML 返回的 HTML 片段则包括元素本身、以及元素内容的。 其中 innerH 常常用于清空元素内容。

document.body.innerHTML = '';

需要注意 innerHTMl 设置的脚本内容将不会被执行,参考 在 DOM 中动态插入并执行脚本 。

innerText/outerText

与 innerHTML , outerHTML 相同,inner 只会设置内容而 outer 会更改整个元素。 不同的是, innerText 与 outerText 则用来获取和设置渲染后的结果。 例如设置的 HTML 特殊字符会被转义,换行会被解析为 <br/> 。例如:

document.body.innerText = '<h2>header</h2>\nparagraph'

的渲染结果为:

<h2>header</h2><br>paragraph

利用 innerText 可以方便地进行 HTML 转义:

function escape(str){ var el = document.createElement('div'); el.innerText = str; return el.innerHTML; } // 返回 <h2 id="foo"> escape('<h2 id="foo">'); text/textContent

textContent 与 innerText 表现相似,但有一些细节不同:

textContent 是定义在 Node 上的,Element 继承了该属性。 textContent 可以获取不渲染的内容而 innerText 不可以。包括 <style> , <script> , 以及被 CSS 隐藏的元素。 因 innerText 排除了隐藏元素,它会引起重排(Reflow)。 IE11 及以下的 innerText 会销毁被移除的元素,而 textContent 不会。

text 只在特定的几个元素上有定义,比如 <a> 和 <script> :

<a> 元素的 text 用来设置其文本内容。其表现完全等同于 textContent :

The text IDL attribute, on getting, must return the same value as the textContent IDL attribute on the element, and on setting, must act as if the textContent IDL attribute on the element had been set to the new value. W3C html5

<script> 元素的 text 用来设置其脚本的内容,这时完全等同于 textContent , innerText , innerHTML 。

jQuery .html()

jQuery 的 .html() 用来设置 HTML 元素的 HTML 内容。 不同于 innherHTML ,jQuery 的 .html() 会执行字符串中的脚本。 几乎所有操作 DOM 内容的 jQuery 方法都有这一行为,包括 .after() , .append() , .before() 等等。

当然这不是 Magic,jQuery 在设置 innerHTML 的同时,找到了里面所有的 <script> 并进行强制加以执行。 在 .html() 的定义在 /src/manipulation.js 中, 它调用了 .append() 来进行进行 DOM 操作,最终调用到 domManip( collection, args, callback, ignored ) 函数:

function domManip( collection, args, callback, ignored ) { // ... if ( hasScripts ) { // ... if ( node.src ) { // Optional AJAX dependency, but won't run scripts if not present if ( jQuery._evalUrl ) { jQuery._evalUrl( node.src ); } } else { DOMEval( node.textContent.replace( rcleanScript, "" ), doc ); } } }

这里调用了 DOMEval 来强制执行脚本,其代码在 /src/core/DOMEval.js 中:

function DOMEval( code, doc ) { doc = doc || document; var script = doc.createElement( "script" ); script.text = code; doc.head.appendChild( script ).parentNode.removeChild( script ); }

.appendChild() 并立即 .removeChild() 会导致立即执行(以及必要的下载)脚本。对于动态执行脚本在 DOM 中动态插入并执行脚本 一文有详细讨论。

jQuery .text()

jQuery .text() 就非常简单,它的实现只有 11 行, 使用的 DOM API 正是上文中讨论的 textContent :

text: function( value ) { return access( this, function( value ) { return value === undefined ? jQuery.text( this ) : this.empty().each( function() { if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) { this.textContent = value; } } ); }, null, value, arguments.length ); }, 扩展阅读 http://stackoverflow.com/questions/24427621/innertext-vs-innerhtml-vs-label-vs-text-vs-textcontent-vs-outertext https://w3c.github.io/DOM-Parsing/ https://www.w3.org/TR/html5/single-page.html https://github.com/jquery/jquery

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: HTMLjQueryHTML5CSS
分页:12
转载请注明
本文标题:获取 DOM 内容的 API 接口
本站链接:http://www.codesec.net/view/532224.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(34)