DOM啟蒙:文字節點
阿新 • • 發佈:2018-12-17
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規範實現的。