解密jQuery内核 DOM操作方法(二)html,text,val-阿里云开发者社区

开发者社区> 文艺小青年> 正文

解密jQuery内核 DOM操作方法(二)html,text,val

简介:
+关注继续查看

回顾下几组DOM插入有关的方法

innerHTML 设置或获取位于对象起始和结束标签内的 HTML 
outerHTML 设置或获取对象及其内容的 HTML 形式

看图对照区别

image

 


innerText 设置或获取位于对象起始和结束标签内的文本 
outerText 设置(包括标签)或获取(不包括标签)对象的文本

image


innerText 和outerText 在读取得时候是一样的,只是在设置的时候outerText 会连带标签一起替换成目标文本 
firefox不支持innerText ,但是可以用textContent作为替代方案。

 


nodeValue 
对于文本节点,nodeValue 属性包含文本。

对于属性节点,nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的。

 


jQuery封装的方法html,text,val

  1. .html()用为读取和修改元素的HTML标签
  2. .text()用来读取或修改元素的纯文本内容
  3. .val()用来读取或修改表单元素的value值。

.html()

获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容

取值

获取集合中第一个匹配元素的HTML内容

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多个元素,那么只有第一个匹配元素的 HTML 内容会被获取

源码部分可见jQuery.access在属性节点操作的时候就详解过了,就是合并分解多个参数,细分到每一个流程调用中,通过回调接收分解后的参数

可见针对nodeType === 1的节点是通过浏览器接口innerHTML返回需要取的值

有些浏览器返回的结果可能不是原始文档的 HTML 源代码。例如,如果属性值只包含字母数字字符,Internet Explorer有时丢弃包裹属性值的引号。

复制代码
html: function( value ) {
        return jQuery.access( this, function( value ) {
            var elem = this[ 0 ] || {},
                i = 0,
                l = this.length;

            if ( value === undefined && elem.nodeType === 1 ) {
                return elem.innerHTML;
            }
        }, null, value, arguments.length );
复制代码

设值

.html() 方法对 XML 文档无效.

我们可以使用 .html() 来设置元素的内容,这些元素中的任何内容会完全被新的内容取代。

此外,用新的内容替换这些元素前,jQuery从子元素删除其他结构,如数据和事件处理程序,防止内存溢出

复制代码
if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
    !wrapMap[ ( rtagName.exec( value ) || [ "", "" ] )[ 1 ].toLowerCase() ] ) {
    value = value.replace( rxhtmlTag, "<$1></$2>" );
    try {
        for ( ; i < l; i++ ) {
            elem = this[ i ] || {};

            // Remove element nodes and prevent memory leaks
            if ( elem.nodeType === 1 ) {
                jQuery.cleanData( getAll( elem, false ) );
                elem.innerHTML = value;
            }
        }
        elem = 0;
        // If using innerHTML throws an exception, use the fallback method
    } catch( e ) {}
}
复制代码

对插入的值做一下过滤处理

必须是字符串,而且不能暴行script|style|link,并且不是tr,表格等元素

最后通过innerHTML覆盖节点,防止内存溢出需要jQuery.cleanData清理节点上的事件与数据

总结

elem.innerHTML 也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

 


.text()

得到匹配元素集合中每个元素的文本内容结合,包括他们的后代,或设置匹配元素集合中每个元素的文本内容为指定的文本内容。

.text() 在XML 和 HTML 文档中都能使用。.text() 方法返回一个字符串,包含所有匹配元素的合并文本。  (由于在不同的浏览器中的HTML解析器的变化,返回的文本中换行和其他空白可能会有所不同。)

复制代码
text: function( value ) {
    return jQuery.access( this, function( value ) {
        return value === undefined ?
            jQuery.text( this ) :
            this.empty().append( ( this[ 0 ] && this[ 0 ].ownerDocument || document ).createTextNode( value ) );
    }, null, value, arguments.length );
},
复制代码

取值

 jQuery.text( this ) 实际调用Sizzle.getText

复制代码
if ( typeof elem.textContent === "string" ) {
                    return elem.textContent;
                } else {
                    // Traverse its children
                    for ( elem = elem.firstChild; elem; elem = elem.nextSibling ) {
                        ret += getText( elem );
                    }
                }
复制代码

但是实际上jQuery没有用innerText获取文本的值,

http://bugs.jquery.com/ticket/11153,大概就是在IE8中新节点插入会保留所有回车

所以jQuery采用了textContent获取文本值,textContent本身是dom3规范的,可以兼容火狐下的innerText问题

设值

考虑下,如果文本的值不仅仅是字符串,可能是带有标签的

'<p>This is a test.</p>'

这种情况下,当然就不能直接套用 elem.textContent = '<p>This is a test.</p>'

我们必须意识到这种方法提供了必要的字符串从提供的正确的HTML中脱离出来。

jQuery这样做, 他调用DOM 方法.createTextNode(), 一种替代的特殊字符与HTML对应(比如< 替换为 &lt; )方法

看代码

this.empty().append( ( this[ 0 ] && this[ 0 ].ownerDocument || document ).createTextNode( value ) );

通过empty,先清理该节点上的事件与内容

// Prevent memory leaks
                    jQuery.cleanData( getAll( elem, false ) );
                    // Remove any remaining nodes
                    elem.textContent = "";

通过createTextNode处理,调用append

总结

.text() 在XML 和 HTML 文档中都能使用。.text() 方法返回一个字符串,包含所有匹配元素的合并文本。  (由于在不同的浏览器中的HTML解析器的变化,返回的文本中换行和其他空白可能会有所不同。

.text() 方法不能使用在 input 元素或scripts元素上。 input 或 textarea 需要使用 .val() 方法获取或设置文本值。得到scripts元素的值,使用.html()方法

 


.val()

获取匹配的元素集合中第一个元素的当前值或设置匹配的元素集合中每个元素的值。

.val()方法主要用于获取表单元素的值,比如 inputselect 和 textarea

对于选择框和复选框,您也可以使用:selected 和 :checked选择器来获取值,

取值

复制代码
hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[ elem.nodeName.toLowerCase() ];

                    if ( hooks && "get" in hooks && (ret = hooks.get( elem, "value" )) !== undefined ) {
                        return ret;
                    }

                    ret = elem.value;

                    return typeof ret === "string" ?
                        // handle most common string cases
                        ret.replace(rreturn, "") :
                        // handle cases where value is null/undef or number
                        ret == null ? "" : ret;
复制代码

select为例

<select multiple="multiple"> 元素, .val()方法返回一个包含每个选择项的数组,如果没有选择性被选中,它返回null

html代码,multiple="multiple" 多选项,如果只是单选,只用用ele.value即可了

复制代码
<select size="10" multiple="multiple" id="multipleselect" name="multipleselect">
    <option>XHTML</option>
    <option>CSS</option>
    <option>JAVASCRIPT</option>
    <option>XML</option>
    <option>PHP</option>
    <option>C#</option>
    <option>JAVA</option>
    <option>C++</option>
    <option>PERL</option>
</select>
复制代码

js代码

var p = $("#multipleselect")
     p.change(function(){
         console.log( p.val());
     });

image

针对多选的情况,jQuery要如何处理?

引入了jQuery.valHooks,修正了在不同情况下表单取值的bug,其中就有针对select的set与get的处理

image

针对多选的hack

复制代码
for ( ; i < max; i++ ) {
                        option = options[ i ];

                        // IE6-9 doesn't update selected after form reset (#2551)
                        if ( ( option.selected || i === index ) &&
                            // Don't return options that are disabled or in a disabled optgroup
                            ( jQuery.support.optDisabled ? !option.disabled : option.getAttribute("disabled") === null ) &&
                            ( !option.parentNode.disabled || !jQuery.nodeName( option.parentNode, "optgroup" ) ) ) {

                            // Get the specific value for the option
                            value = jQuery( option ).val();

                            // We don't need an array for one selects
                            if ( one ) {
                                return value;
                            }

                            // Multi-Selects return an array
                            values.push( value );
                        }
                    }
复制代码

遍历所有的option元素,找到对应的value

复制代码
option: {
                get: function( elem ) {
                    // attributes.value is undefined in Blackberry 4.7 but
                    // uses .value. See #6932
                    var val = elem.attributes.value;
                    return !val || val.specified ? elem.value : elem.text;
                }
            }
复制代码

如果是多选

values.push( value ); 

返回合集

设值

同样的处理类似,通过jQuery.valHooks找到对应的处理hack

否则直接 this.value = val;


本文转自艾伦 Aaron博客园博客,原文链接:http://www.cnblogs.com/aaronjs/p/3520383.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Netty中序列化框架MessagePack的简单实现
MessagePack是一个高效的二进制序列化框架,它像JSON一样支持不同语言间的数据交换,但是它的性能更快,序列化之后的码流也更小。MessagePack的特点如下: 编解码高效,性能高; 序列化之后码流小 支持跨语言
4 0
AAAI 2020 | 超低精度量化BERT,UC伯克利提出用二阶信息压缩神经网络
2020 年 2 月 7 日-2 月 12 日,AAAI 2020 将于美国纽约举办。不久之前,大会官方公布了今年的论文收录信息:收到 8800 篇提交论文,评审了 7737 篇,接收 1591 篇,接收率 20.6%。为向读者们分享更多的优质内容、促进学术交流,在 AAAI 2020 开幕之前,机器之心策划了多期线上分享。
4 0
AI面试催生韩国新型补习班:200元一小时,面对摄像头练习用眼睛微笑
「微笑不要靠嘴唇,要从眼睛里透出来」,在 200 元一小时的补习班里,韩国培训老师这样传授面对「AI 面试官」的诀窍。对于那些待业已久的韩国年轻人来说,只要能通过大公司的 AI 面试,支付昂贵的补习费用根本算不上什么。
4 0
【通用行业开发部】JavaScript 高程学习 C1~C7
JavaScript 高级程序设计 第三版 内容精要概览 第一章至第七章内容
37 0
全网首发:C++中通过POST向服务器发送JSON的代码
全网首发:C++中通过POST向服务器发送JSON的代码
4 0
基于Spark的机器学习实践 (四) - 数据可视化
基于Spark的机器学习实践 (四) - 数据可视化
4 0
Jibx插件的使用
Jibx是一款非常优秀的XML文件数据绑定的框架,提供灵活的绑定映射文件,实现数据对象和XML文件之间的转换,并不需要修改既有的Java,另外,它的转换效率是目前很多其他开源项目都无法比拟的。本文来演示下如何使用
4 0
基于Spark的机器学习实践 (二) - 初识MLlib(下)
基于Spark的机器学习实践 (二) - 初识MLlib(下)
3 0
Java中介者模式(Mediator)
假如没有总经理。下面三个部门:财务部、市场部、研发部。财务部要发工资,让大家核对公司需要跟市场部和研发部都通气;市场部要接个新项目,需要研发部处理技术、需要财务部出资金。市场部跟各个部门打交道。 虽然只有三个部门,但是关系非常乱。
3 0
保姆级教程,如何发现 GitHub 上的优质项目?
保姆级教程,如何发现 GitHub 上的优质项目?
3 0
3254
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载