深入理解javascript描述元素內容的5個屬性

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

[1]innerHTML [2]outerHTML [3]innerText [4]outerText [5]textContent ...


×
目錄
[1]innerHTML [2]outerHTML [3]innerText[4]outerText[5]textContent

前面的話

<p>This is a <i>simple</i> document</p>

　　上面這行代碼中，<p>元素的內容是什麼呢？答案一：內容是HTML字元串"This is a <i>simple</i> document"；答案二：內容是純文本字元串"This is a simple document"；答案三：內容是一個Text文本節點、一個包含了Text文本子節點的Element元素節點和另外一個Text文本節點

　　三個答案都正確，不同的答案從不同的角度描述了元素內容。本文將詳細介紹描述元素內容的5個屬性

 

innerHTML

　　innerHTML屬性可讀可寫。在讀模式下，返回與調用元素的所有子節點(包括元素、註釋和文本節點)對應的HTML標記；在寫模式下，innerHTML會根據指定的值創建新的DOM樹，然後用這個DOM樹完全替換調用元素原先的所有子節點

　　[註意]IE8-瀏覽器會將所有標簽轉換成大寫形式，且不包含空白文本節點；而其他瀏覽器則原樣返回

<p id="test">This is a <i>simple</i> document</p>
<script>
console.log(test.innerHTML);//'This is a <i>simple</i> document'
test.innerHTML = 123;
console.log(test.innerHTML);//'123'    
</script>

　　如果將innerHTML屬性設為空，等於刪除所有它包含的所有節點

<p id="test">This is a <i>simple</i> document</p>
<script>
test.innerHTML = '';
console.log(test.childNodes.length);//0
</script>

　　[註意]在IE9-瀏覽器中，不支持innerHTML的屬性有:<col>、<colgroup>、<frameset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot>、<tr>。在IE8-瀏覽器中<title>元素也沒有該屬性

<table id="test"></table>
<script>
test.innerHTML = '1'
//在IE9-瀏覽器中報錯，其他瀏覽器返回1
console.log(test.innerHTML);
</script>

　　無論什麼時候，只要使用innerHTML從外部插入HTML，都應該首先以可靠的方式處理HTML。IE瀏覽器提供了window.toStaticHTML()方法，這個方法接收一個參數，即一個HTML字元串；返回一個經過無害處理後的版本——從源HTML中刪除所有腳本節點和事件處理程式屬性

var text = "<a href='#' onclick = 'alert(\"hi\");'>Click Me</a>";
var sanitized = window.toStaticHTML(text);
//只有IE支持
console.log(sanitized);//<a href="#">Click Me</a>

效率

　　在元素上設置innerHTML屬性調用了Web瀏覽器的解析器，通常設置innerHTML效率非常髙，甚至在指定的值需要解析時效率也是相當不錯

<ul id="test1"></ul>
<ul id="test2"></ul>
<script>
console.time("time");
for(var i = 0; i < 10000;i++){
    var oLi = document.createElement('li');
    test1.appendChild(oLi);   
}
//15.842ms
console.timeEnd('time');
/****************************/
console.time("time");
var sHtml = '';
for(var i = 0; i < 10000; i++){
    sHtml += '<li></li>';
}
test2.innerHTML = sHtml;
//5.373ms
console.timeEnd('time');
</script>

　　從上面可以看出，使用innerHTML比appendChild()的性能高出不少

　　[註意]對innerHTML屬性用“+=”操作符重覆追加一小段文本通常效率低下，因為它既要序列化又要解析

<ul id="test"></ul>
<script>
console.time("time");
for(var i = 0; i < 10000; i++){
    test.innerHTML += '<li></li>';
}
//time: 50416.330ms
console.timeEnd('time');
</script>

　　可以看出，對innerHTML屬性使用'+='操作符的性能嚴重低下，所以一定不要這麼使用

 

outerHTML

　　outerHTML同樣可讀可寫，與innerHTML相比，它包含被查詢元素的開始和結束標簽。在讀模式下outerHTML返回調用它的元素及所有子節點的HTML標簽；在寫模式下，outerHTML會根據指定的HTML字元串創建新的DOM子樹，然後用這個DOM子樹完全替換調用元素 

　　[註意]IE8-瀏覽器會將所有標簽轉換成大寫形式，且不包含空白文本節點；而其他瀏覽器則原樣返回

<p id="test">This is a <i>simple</i> document</p>
<script>
console.log(test.outerHTML);//<p id="test">This is a <i>simple</i> document</p>
test.outerHTML = '<div id="test"></div>';
console.log(test.outerHTML);//'<div id="test"></div>'
</script>

 

innerText

　　innerText屬性可以操作元素中包含的所有文本內容，包括子文檔樹中的文本。在通過innerText讀取值時，它會按照由淺入深地順序，將子文檔樹中的所有文本拼接起來。在通過innerText寫入值時，結果會刪除元素的所有子節點，插入包含相應文本值的文本節點

<p id="test">This is a <i>simple</i> document</p>
<script>
console.log(test.innerText);//'This is a simple document'
test.innerText = '<div id="test"></div>';
console.log(test.innerText);//'<div id="test"></div>'
//即使在innerText中設置元素節點，最終也只是作為字元串內部的文本顯示
console.log(test.childNodes[0].nodeType);//3
</script>

　　因此，設置innerText屬性只會生成當前節點的一個子文本節點Text。因此，可以利用將innerText設置為等於innerText來去掉所有HTML標簽

<p id="test">This is a <i>simple</i> document</p>
<script>
console.log(test.innerHTML);//'This is a <i>simple</i> document'
test.innerText = test.innerText;
console.log(test.innerHTML);//'This is a simple document'
</script>

 

outerText

　　在讀取文本值時，outerText與innerText的結果完全一樣，但在寫模式下，outerText不只是替換調用它的元素的子節點，而是會替換整個元素

<p id="test">This is a <i>simple</i> document</p>
<script>
console.log(test.outerText);//'This is a simple document'
test.outerText = '123';
console.log(document.body.childNodes[0]);//'  123'
//報錯，因為<p>元素已經被替換為'123'，不再存在了
console.log(test.outerText);
</script>

 

textContent

　　textContent屬性與innerText屬性類似，該屬性可讀寫。在讀模式下，返回當前節點和它的所有後代節點的文本內容；在寫模式下，結果會刪除元素的所有子節點，插入包含相應文本值的文本節點

　　[註意]IE8-瀏覽器不支持該屬性

<p id="test">This is a <i>simple</i> document</p>
<script>
console.log(test.textContent);//'This is a simple document'
test.textContent = '<div id="test"></div>';
console.log(test.textContent);//'<div id="test"></div>'
//即使在textContent中設置元素節點，最終也只是作為字元串內部的文本顯示
console.log(test.childNodes[0].nodeType);//3
</script>

　　與innerText不同的是，textContent屬性不僅屬於元素節點ElementNode，而是屬於所有節點Node

<p id="test">This is a <i>simple</i> document</p>
<script>
var oText = test.childNodes[0];
console.log(oText.textContent);//'This is a '
console.log(oText.innerText);//undefined
</script>

 

最後

　　在firefox以前的版本中不支持innerText和outerText，但是隨著firefox的更新換代，這兩個屬性也開始支持。所以，上面的5個屬性的相容問題都來源於IE8-瀏覽器。IE8-瀏覽器不支持textContent屬性，IE8-瀏覽器在使用innerHTML和outerHTML屬性時，會將所有標簽轉換成大寫形式，且不包含空白文本節點

　　上面5個屬性中，常用的是innerHTML、outerHTML和innerText這3個


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

-Advertisement-
Play Games
更多相關文章
  • Servlet生命周期及工作原理
    1 Servlet生命周期Servlet 生命周期：Servlet 載入 >實例化 >服務 >銷毀。 init（）：在Servlet的生命周期中，僅執行一次init()方法。它是在伺服器裝入Servlet時執行的，負責初始化Servlet對象。可以配置伺服器，以在啟動伺服器或客戶機首次訪問Servl ...
  • python之迭代器和生成器
    一、迭代器(iterator) 在Python中，for迴圈可以用於Python中的任何類型，包括列表、元祖等等，實際上，for迴圈可用於任何“可迭代對象”，這其實就是迭代器 迭代器是一個實現了迭代器協議的對象，Python中的迭代器協議就是有next方法的對象會前進到下一結果，而在一系列結果的末尾 ...
  • Jsp靜態包含和動態包含的區別
    1 <%@include file="xxx.jsp"%>為jsp中的編譯指令，其文件的包含是發生在jsp向servlet轉換的時期，而<jsp:include page="xxx.jsp">是jsp中的動作指令，其文件的包含是發生在編譯時期，也就是將java文件編譯為class文件的時期 。 2使 ...
  • 大叔跟誰學課程~目錄及說說架構師
    之前的幾個月在“跟誰學”平臺上錄製了一些視頻，得到了不少開發者的支持，併在實際工作中也幫助了不少人，自己當然也很開心，下麵介紹一下跟誰學課程的目錄 倉儲大叔講系統架構 專註於dotNet架構與設計 主講：倉儲大叔，洋名：Lind 博客地址：http://www.cnblogs.com/lori 套裝 ...
  • Form.action傳值問題
    通過瀏覽器地址欄輸入url並通過?傳遞參數請求資源時，?後面的參數叫做 "查詢字元串"，會觸發後臺Servlet的doGet()，因為通過瀏覽器地址欄直接訪問的方式是GET方式。 下麵順便瞭解一下form的method屬性對傳參的影響。 原始表單：<form id="myForm"><label>用 ...
  • Angularjs中對時間格式：/Date(1448864369815)/ 的處理
    註：本文使用的 angular 版本為 1.3 版 我們在後臺對數據進行json序列化時，如果數據中包含有日期，序列化後返回到前端的結果可能是這樣的： /Date(1448864369815)/ 。可是往往我們要在前臺顯示正常的日期格式，該如何處理呢？在angularjs（後面簡稱 ng）中處理起來 ...
  • javascript中BOM部分基礎知識總結
    一、什麼是BOM BOM（Browser Object Document）即瀏覽器對象模型。 BOM提供了獨立於內容 而與瀏覽器視窗進行交互的對象； 由於BOM主要用於管理視窗與視窗之間的通訊，因此其核心對象是window； BOM由一系列相關的對象構成，並且每個對象都提供了很多方法與屬性； BOM ...
  • javascript --- 將共用屬性遷移到原型中去
    當我們用一個構造函數創建對象時，其屬性就會被添加到this中去。並且被添加到this中的屬性實際上不會隨著實體發生改變，這時，我們這種做法顯得會很沒有效率。例如： 這意味著每次我們new her()創建一個實例對象的時候都會生成一個全新的name屬性，併在記憶體中擁有屬於該屬性自己的存儲空間。而事實上 ...
一周排行
    -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# ...
所有分類