zepto源码--核心方法5（文本操做）--学习笔记

涉及到文本内容的主要有三个函数：html, text, val。

咱们已经见过屡次，一个函数多种用途的状况，今天这三个函数也不例外，既能够获取内容，也能够设置内容。判断条件就是有没有传入参数，若是没有传入参数，则表示获取内容，不然表示设置内容。判断条件也基本相似： 0 in arguments，后面再也不对该条件判断解析。分两步介绍函数，1为设置内容，2为获取内容。

html

获取或设置对象集合中元素的HTML内容。

一、利用javascript原生属性innerHTML获取元素的文本内容（包含html标签结构）并保存下来，接着清空该元素，并经过funcArg函数对传入的参数进行处理，funcArg函数前文已经介绍过了，将处理后的文本内容（包含html标签结构）利用append函数追加到当前已经清空了的元素的内部。

二、获取文本内容，获取的是对象集合中的第一个对象的文本内容。

 

text

获取或者设置全部对象集合中元素的文本内容。

从zepto官方api描述上来看，text方法与html方法的区别就是前者操做的是纯文本内容，后者操做的是包括html标签的内容。

一、text方法利用的是JavaScript的原生属性textContent，此属性与innerHTML的区别在于其不取得任何的html标签，在对传入的参数利用funcArg处理以后，直接赋值给this.textContent，最终会清除掉元素内部的全部html标签，只剩下纯文本。

二、获取文本的时候，利用了一个pluck函数，这个也是zepto对外暴露的接口，api文档上介绍，pluck，获取或者设置全部对象集合中元素的文本内容。因为元素内部可能还存在html标签，因此必须将获取到的textContent链接起来。

 

val

获取或设置匹配元素的值。

val针对的目标元素是fom表单中的元素，input, textarea, button, select的值。

 一、若是显示的传入null，则将参数转换为空字符串，而后就直接对元素赋值便可。

二、这里多一种可能性，就是select标签设置了multiple多选的属性，若是设置了多选，就必须获取全部选中的option的值，其余状况就直接利用获取第一个元素的value值。