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值。