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

解密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,如需转载请自行联系原作者

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

相关文章
开源炫酷css轮播图 可直接引入html文件使用 含注释 jQuery插件
开源炫酷css轮播图 可直接引入html文件使用 含注释 jQuery插件
36 0
连连看html游戏全代码js、jquery操作
连连看html游戏全代码js、jquery操作
62 0
飞机大战html游戏全代码js、jquery操作
飞机大战html游戏全代码js、jquery操作
59 0
Html+Css+jquery 2021/11/1
Html+Css+jquery 2021/11/1
30 0
HTML + jQuery 实现轮播图
HTML + jQuery 实现轮播图
111 0
Jquery操作文本内容(三个方法:html()、text()、var())
Jquery操作文本内容(三个方法:html()、text()、var())
50 0
Java Web——jQuery中的过滤器与第一组函数(val、text、attr)
Java Web——jQuery中的过滤器与第一组函数(val、text、attr)
51 0
+关注
文艺小青年
文章
问答
视频
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
23-Vue.js在前端...1506518547.pdf
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
相关实验场景
更多