1. 程式人生 > >DOM啟蒙:文字節點

DOM啟蒙:文字節點

1.文字節點概覽

     HTML文件中的文字表現為 Text()建構函式的示例,即文字節點。

     Text從CharacterData、Node及Object繼承。

2.文字物件屬性與方法

      屬性:

  • .data:可獲取Text節點的文字值/資料
  • .nodeValue:可獲取Text節點的文字值/資料
  • textContent:

          可用來獲取所有子文字節點,或設定節點內容成某一特定Text節點。

         當在某個節點上用它獲取該節點文字內容時,它將返回一個由呼叫該方法的節點內所有文字節點合併的字串。

         當用textContent設定某個節點所含文字時,它將先移除所有子節點,替換它們為單個Text節點。

      方法:

  • createTextNode():以程式設計的方式建立Text節點
  • appendData():新增文字節點的值
  • deleteData():刪除文字節點某一起始位置的值
  • insertData():在文字節點的某一處地方插入值
  • replaceData():替換文字節點的某一起始位置的值
  • subStringData():獲取文字節點的子文字節點的值
  • normalize():合併兄弟文字節點為單個文字節點
  • splitText():改變在其上呼叫的文字節點,並返回一個新的包含分隔出來的文字的Text節點。該文字根據偏移量從原文字中分隔。

3.其他:

  • 空白符也表現為文字節點。回車也被認為是文字節點
  • 有多個兄弟文字節點的情況:

            1.某個文字節點包含一個Element節點

            2.以程式設計的方式新增Text節點到某個我們程式碼建立的的元素

  • textContent與innerText的區別:

            1.innerText知道CSS。如果有隱藏的文字,innerText會無視它。textContent不會。

            2.innerText無視<script></script>元素所含的Text節點。

            3.innerText不會使返回的文字規範化。textContent會完全按照文件所含返回。

            4.innerText被認為是非標準的,textContent則是依據DOM規範實現的。