深入理解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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類