深入理解DOM節點類型第二篇——文本節點Text

来源:http://www.cnblogs.com/xiaohuochai/archive/2016/08/28/5815193.html
-Advertisement-
Play Games

[1]特征 [2]空白節點 [3]屬性 [4]方法 [5]性能 ...


×
目錄
[1]特征 [2]空白 [3]屬性[4]方法[5]性能

前面的話

　　文本節點顧名思義指向文本的節點，網頁上看到的文字內容都屬於文本節點。該節點簡單直觀，本文將詳細介紹該部分內容

 

特征

　　文本節點由Text類型表示，包含的是純文本內容，但文本節點是對象類型

<div id="box">內容</div>
<script>
    console.log(box.firstChild);//"內容"
    console.log(typeof box.firstChild);//'object'
</script>

　　純文本內容中的HTML字元會被轉義，關於轉義字元的詳細情況移步至此

<div id="box">&lt;內容&gt;</div>
<script>
    console.log(box.firstChild);//"<內容>""
</script>

　　文本節點的三個node屬性——nodeType、nodeName、nodeValue分別是3、'#text'和節點所包含的文本，其父節點parentNode指向包含該文本節點的元素節點，文本節點沒有子節點

　　[註意]DOM樹中共存在12種節點類型，詳細情況移步至此

<div id="box">test</div>
<script>
var oTxt = box.firstChild;
console.log(oTxt.nodeType);//3
console.log(oTxt.nodeValue);//test
console.log(oTxt.nodeName);//'#text'
console.log(oTxt.parentNode);//<div>
console.log(oTxt.childNodes);//[]
</script>

 

空白文本節點

　　關於文本節點，遇到最多的相容問題是空白文本節點問題。IE8-瀏覽器不識別空白文本節點，而其他瀏覽器會識別空白文本節點

<div id="box">
    <div>1</div>
</div>
<script>
//標準瀏覽器輸出[text, div, text]，text表示空白文本節點
//IE8-瀏覽器輸出[div]，並不包含空白文本節點
console.log(box.childNodes);    
</script>

 

屬性

data

　　文本節點的data屬性與nodeValue屬性相同

<div id="box">test</div>
<script>
var oBox = document.getElementById('box');
var oTest = oBox.firstChild;
//test test true
console.log(oTest.nodeValue,oTest.data,oTest.data === oTest.nodeValue);
</script>

length

　　文本節點的length屬性保存著節點字元的數目，而且nodeValue.length、data.length也保存著相同的值

<div id="box">test</div>
<script>
var oBox = document.getElementById('box');
var oTest = oBox.firstChild;
//4 4 4
console.log(oTest.length,oTest.nodeValue.length,oTest.data.length);
</script>

 

方法

createTextNode()

　createTextNode()方法用於創建文本節點，這個方法接收一個參數——要插入節點中的文本

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = document.createTextNode('<strong>hello</strong> world!');
oBox.appendChild(oText);
//'123&lt;strong&gt;hello&lt;/strong&gt; world!'
console.log(oBox.innerHTML);
//此時，頁面中有兩個文本節點
console.log(oBox.childNodes.length);
</script>

normalize()

　　normalize()方法的作用是合併相鄰的文本節點，該方法在文本節點的父節點——元素節點上調用

　　[註意]IE9+瀏覽器無法正常使用該方法

<div id="box">0</div>
<script>
var oText1 = document.createTextNode('1');
var oText2 = document.createTextNode('2');
box.appendChild(oText1);
box.appendChild(oText2);
console.log(box.childNodes);//[text, text, text]
console.log(box.childNodes.length);//3
box.normalize();
//IE9+瀏覽器返回[text,text]，而其他瀏覽器返回[text]
console.log(box.childNodes);
//IE9+瀏覽器返回'01'，而其他瀏覽器返回'012'
console.log(box.childNodes[0]);
//IE9+瀏覽器返回2，使用該方法時只能將所有的文本節點減1；其他瀏覽器正常，返回2
console.log(box.childNodes.length);//1
</script>

splitText()

　　與normalize()方法作用相反，splitText()方法將一個文本節點分成兩個文本節點，即按照指定的位置分割nodeValue值。原來的文本節點將包含從開始到指定位置之前的內容。這個方法會返回一個新文本節點，包含剩下的文本。splitText()方法返回的節點與原節點的parentNode相同 

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var newNode = oBox.firstChild.splitText(1);
console.log(newNode,newNode === oBox.lastChild);//'23' true
console.log(oBox.firstChild);//'1'
</script>

appendData()

　　appendData(text)方法將text添加到節點的末尾，該方法無返回值

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = oBox.firstChild;
console.log(oText.appendData('4'));//undefined
console.log(oText.data);//'1234'
console.log(oBox.childNodes.length);//1
</script>

deleteData()

　　deleteData(offset,count)方法從offset指定的位置開始刪除count個字元，無返回值

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = oBox.firstChild;
console.log(oText.deleteData(0,2));//undefined
console.log(oText.data);//'3'
console.log(oBox.childNodes.length);//1
</script>

insertData()

　　insertData(offset,text)方法在offset指定的位置插入text，無返回值

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = oBox.firstChild;
console.log(oText.insertData(1,'test'));//undefined
console.log(oText.data);//'1test23'
console.log(oBox.childNodes.length);//1
</script>

replaceData()

　　replaceData(offset,count,text)方法用text替換從offset指定位置開始到offset+count為止的文本，無返回值

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = oBox.firstChild;
console.log(oText.replaceData(1,1,"test"));//undefined
console.log(oText.data);//'1test3'
console.log(oBox.childNodes.length);//1
</script>

substringData()

　　substringData(offset,count)方法提取從offset指定的位置開始到offset+count為止處的字元串，並返回該字元串。原來的文本節點無變化

<div class="box" id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = oBox.firstChild;
console.log(oText.substringData(1,1));//'2'
console.log(oText);//'123'
</script>

 

性能

　　通過上面的方法介紹，我們會發現，文本節點的操作與字元串的操作方法相當類似。一般地，我們獲取文本都用innerHTML，然後再去字元串的操作方法去操作。下麵對兩者的性能進行對比分析

　　【1】首先，對replaceData()和replace()這兩個方法進行比較。replace()方法又分為兩個方法，一個是在迴圈中直接對innerHTML進行賦值；另一個是在迴圈中對變數進行賦值，最後再賦值給innerHTML

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = oBox.firstChild;    
var str = oBox.innerHTML;

function stringTest1(){
    for(var i = 0; i < 1000000; i++){
        oBox.innerHTML = str.replace(1,Math.floor(Math.random() * 9 + 1));
    }   
}
var start1 = Date.now();
stringTest1();
var stop1 = Date.now();
result1 = stop1 - start1;
console.log('str1',result1)//2351

/*********************************/
function stringTest2(){
    for(var i = 0; i < 1000000; i++){
        str.innerHTML = str.replace(1,Math.floor(Math.random() * 9 + 1));
    }   
}
var start2 = Date.now();
stringTest2();
oBox.innerHTML = str;
var stop2 = Date.now();
result2 = stop2 - start2;
console.log('str2',result2)//408

/*********************************/
function dataTest1(){
    for(var i = 0; i < 1000000; i++){
        oText.replaceData(1,1,Math.floor(Math.random() * 9 + 1))    
    }  
}
var start3 = Date.now();
dataTest1();
var stop3 = Date.now();
result3 = stop3 - start3;
console.log('data',result3)//327
</script>

　　從結果中可以看出，在100萬次的迴圈中，直接操作innerHTML開銷較大，操作文本節點的的開銷最小。

　　【2】對substring()和substringData()方法進行比較，這兩種方法都用於提取子串

<div id="box">123</div>
<script>
var oBox = document.getElementById('box');
var oText = oBox.firstChild;    
var str = oBox.innerHTML;

function stringTest(){
    for(var i = 0; i < 10000000; i++){
       str.substring(Math.floor(Math.random() * 2),2);
    }   
}
var start = Date.now();
stringTest();
var stop = Date.now();
result = stop - start;
console.log('str',result)//364
/*********************************/
function dataTest(){
    for(var i = 0; i < 10000000; i++){
       oText.substringData(Math.floor(Math.random() * 2),1);
    }   
}
var start = Date.now();
dataTest();
var stop = Date.now();
result = stop - start;
console.log('str',result)//1195
</script>

　　從結果中可以看出，在1000萬次的迴圈中，使用substringData()方法比substring()方法的開銷較大

 

最後

　　元素的文本可以看成字元串，也可以看成節點

　　除了字元串操作方法，也可以使用正則或者文本節點方法

　　思路廣一點，解決問題時才更自如一點

　　以上


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 深入理解DOM節點類型第三篇——註釋節點和文檔類型節點
    × 目錄 [1]註釋節點 [2]文檔類型 前面的話 把註釋節點和文檔類型節點放在一起是因為IE8-瀏覽器的一個bug。IE8-瀏覽器將標簽名為"!"的元素視作註釋節點，所以文檔聲明也被視作註釋節點。本文將詳細介紹這兩部分的內容 註釋節點 【特征】 註釋在DOM中是通過Comment類型來表示，註釋節 ...
  • 從273二手車的M站點初探js模塊化編程
    前言 這幾天在看273M站點時被他們的頁面交互方式所吸引，他們的首頁是採用三次載入+分頁的方式。也就說分為大分頁和小分頁兩種交互。大分頁就是通過分頁按鈕來操作，小分頁是通過下拉（向下滑動）時非同步載入數據。 273這個M站點是產品推薦我看的。第一眼看這個產品時我就再想他們這個三次載入和翻頁按鈕的方式， ...
  • javascript之 this 關鍵字詳解
    不管學習什麼知識，習慣於把自己所學習的知識列成一個list，會有助於我們理清思路，是一個很好的學習方法。強烈推薦。 以下篇幅有點長，希望讀者耐心閱讀。 以下內容會分為如下部分： 1.涵義 1.1：this涵義 1.2：this指向的可變性 2.使用場合 2.1：全局環境 2.2：構造函數 2.3：對 ...
  • Javascript 面向對象編程初探（一）--- 封裝
    Javascript是一種基於對象（object-based）的語言，你遇到的所有東西幾乎都是對象。但是，它又不是一種真正的面向對象編程（OOP）語言，因為它的語法中沒有class（類）。 那麼，如果我們要把"屬性"（property）和"方法"（method），封裝成一個對象，甚至要從原型對象生成 ...
  • iframe父頁面獲取子頁面的高度
    最近做項目中用到了iframe,子頁面更改父頁面的高度，經過九九八十一難，找到瞭解決的辦法。 $(window).load(function() { var h=$(document).height(); var ifHeight = $(window.top.document).find(".XX ...
  • jQuery基礎（三）事件篇
    jquery學習筆記 1、click與dbclick事件 用交互操作中，最簡單直接就是點擊操作。jQuery提供了兩個方法一個是click方法用於監聽用戶單擊操作，另一個方法是dbclick方法用於監聽用戶雙擊操作。這兩個方法的用戶是類似，下麵以click()事件為例 使用上非常簡單： 方法一：$e ...
  • javascript中DOM部分基礎知識總結
    1.DOM介紹 1.1 DOM概念 文檔對象模型（Document Object Model），它定義了訪問和處理HTML文檔的標準方法。現在我們主要接觸到的是HTML DOM。 HTML文檔中的每個成分都是一個節點。HTML文檔中的所有節點組成了一個文檔樹（節點樹）。HTML文檔中的每個元素、屬性 ...
  • 深入理解：JavaScript原型與繼承
    深入理解：JavaScript原型與繼承 看過不少書籍，不少文章，對於原型與繼承的說明基本上讓人不明覺厲，特別是對於習慣了面向對象編程的人來說更難理解，這裡我就給大家說說我的理解。 首先JavaScript是一門基於原型編程的語言，它遵守原型編程的基本原則： 1. 所有的數據都是對象（javascr ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類