1. 程式人生 > >在javascript中innerHTML和innerText的區別,以及innerHTML和innerText在各個版本瀏覽器的相容性問題

在javascript中innerHTML和innerText的區別,以及innerHTML和innerText在各個版本瀏覽器的相容性問題

1. 在javascript中,首先我們來看innerHTML和innerText都可以用於獲取DOM元素中的內容。

我們可以這樣寫:

(1)使用innerText時


在JS中我們,


從而得到的執行結果為:


(2)使用innerHTML時


執行這段程式碼,我們可以得到

從這裡來看,如果要獲得單個DOM元素中間的文字節點,innerText和innerHTML

的結果是相同的,那麼他們之間的不同點在哪呢?

2.innerHTML和innerText之間的區別

如果,我們這樣寫,當DOM元素之間包含了其他DOM節點時,我們舉個簡單的粒子

此時當我們用innerHTML去獲得id為div-1元素的內容時,得到是的


如果使用innerText,則獲得的是:


我們發現,如果使用innerHTML,獲得的是根元素div內包含的所有節點,

所以獲得的內容為<div>my csdn</div>hello world,當我們用innerText時,所獲得的僅僅是文字節點,於是得到的內容不包含DOM節點,得到的內容為純文字, my csdn hello world

3.總結

(1)innerHTML: 

  也就是從物件的起始位置到終止位置的全部內容,包括Html標籤。 

(2)innerText:

       從起始位置到終止位置的內容, 但它去除Html標籤 

4.innerHTML和innerText在不同版本的相容性問題

  筆者在測試innerHTML和innerText的相容性時,發現

innerText標籤是不相容Fire fox瀏覽器的,但是相容除了FF瀏覽器以外,IE8以上,幾乎

支援所有瀏覽器。

所以我們在使用的過程中,儘量避免使用innerText!!!!

5.innerHTML和value

對於textarea,text,password,button等表單元素,我們不能用innerHTML去獲得表單元素裡面的文字內容,

比如說:<button id="btn-1">提交</button>

不能使用btn1.innerHTML去獲得開關的值,此時如果我們要獲得表單元素的文字資訊

採用的是btn1.value!!

相關推薦

javascriptinnerHTMLinnerText區別以及innerHTMLinnerText各個版本瀏覽器相容性問題

1. 在javascript中,首先我們來看innerHTML和innerText都可以用於獲取DOM元素中的內容。 我們可以這樣寫: (1)使用innerText時 在JS中我們, 從而得到

mybatis ${} #{} 的區別以及轉義符

1)#{}表示一個佔位符號,通過#{}可以實現preparedStatement向佔位符中設定值,自動進行java型別和jdbc型別轉換,#{}可以有效防止sql注入。#{}可以接收簡單型別值或pojo屬性值。如果parameterType傳輸單個簡單型別值,#{}括號中可以是value或其它名稱。

threadsleepwait方法的區別以及locksynchronized的區別

最近在專案中設計業務請求邏輯這一塊,運用到了thread的一些知識,所以就又去特定的研究了一下! 首先 sleep和wait的區別: 1、我們通過檢視原始碼得知,sleep是Threa的靜態方法,而wait方法是Object的成員方法; 2、sleep沒有synchnori

java的IteratorIterable 區別 以及為麼要有iterable介面

java.lang.Iterable java.util.Iterator 來自百度知道: Iterator是迭代器類(其實在javaAPI中其也是一個介面),而Iterable是介面。 好多類都實現了Iterable介面,這樣物件就可以呼叫iterator()方法

python @classmethod @staticmethod區別以及方法引數clsself的區別

staticmethod 首先來看@staticmethod,這個裝飾器很好理解,就是讓類中的方法變成一個普通的函式(因為是普通函式,並沒有繫結在任何一個特定的類或者例項上。所以與不需要物件例項化就可以直接呼叫)。可以使用類或者類的例項呼叫,並且沒有任何隱含引數的傳入,

javascriptapply,call,bind區別bind兼容等問題總結

scrip 總結 區別 call script 例子 獲取 log app 1 三者的相似之處: (1).都是用來改變函數的this對象的指向的 (2).都是用第一個參數來做this對象的指向 (3).都可以傳參數進去 那麽,具體到它們有什麽區別呢?請看下

在spring該如何使用DTO以及DTOEntity的關系

當前頁 兩個 con 實體類 dto class 關系 gpo cor 1. DTO是用於將後臺的數據結構(javaBean)轉換為對用戶友好的表現方式的數據結構,同時也能防止後臺數據直接傳送到前臺而存在的潛在危險。 2. 可以時候要哪個springbot框架提供的轉換器接

python的基礎23的區別以及forwhile的循環

python基礎;2和3的區別 ;字符編碼;if;whil;for循環 ; 第三方庫 字典 1、python2\python3的區別:python2\python3的區別:一、代碼重復,python2代碼重復功能復用,夾雜其他語言的部分,不規範python3進行整合,簡潔優美編譯型:一次性

字串處理sizeof與strlen區別以及末尾的\0

char *ch = "wonima aisaoziaaa"; int n = sizeof(ch); // 指標長度,對於64平臺來說,值為8 int nn = sizeof(*ch); // 一個字元的長度,值為1 int nnn = strlen(ch); //

javascript的for..in語句以及標籤的使用

for...in語句是嚴格的迭代語句,主要用於列舉物件的屬性。 這是需要說一下Object類的一個屬性:PropertyIsEnumerable  這個屬性可以判斷是否可以使用for...in進行列舉 然後再說明一下標籤:  可以用這樣的語法給語句加標籤,以便以後使用。

Math.round()增強for迴圈equals方法==的區別,instanceof運算子三目運算子的用法

1.Math.round() 有這樣一個問題,將數字23.4,23.6轉換成int型,得到的新數字是多少? 事實上直接轉換的話得到的數字都是23。但在我們程式設計的過程中有時候需要對數字進行四捨五入取整,那麼顯然上面的直接轉換就不能實現我們的要求。但好在java裡面給我提供了一個可以實現四捨五入

標籤 href onclick 的區別以及href="javascript:xxx(this);"與onclick="xxx(this);" 傳遞this引數的區別

<a>標籤中href屬性動作和onclick事件的區別,以及href="javascript:xxx(this);"與onclick="xxx(this);" 傳遞this引數的區別

多線程sleepwait的區別以及多線程的實現方式及原因定時器--Timer

守護 驗證 取消 技術 方法 代碼 安全 接口 art 1. Java中sleep和wait的區別 ① 這兩個方法來自不同的類分別是,sleep來自Thread類,和wait來自Object類。 sleep是Thread的靜態類方法,誰調用的誰去睡覺,即使在a線程裏調用b

關於jsreturn false、event.preventDefault()event.stopPropagation()區別以及阻止事件冒泡阻止預設事件

在平時專案中,如果遇到需要阻止瀏覽器預設行為,大家經常會用return false;和event.preventDefault()來阻止,但對它倆的區別還是模糊,這裡順便帶上event.stopPropagation()一起區分下。 事件處理程式的返回值只對通過屬性註冊的處理程式才有意義,如果我

java8 mapflatmap的共同點區別以及兩者的例項解析

在函式式語言中,函式作為一等公民,可以在任何地方定義,在函式內或函式外,可以作為函式的引數和返回值,可以對函式進行組合。由於指令式程式設計語言也可以通過類似函式指標的方式來實現高階函式,函式式的最主要的好處主要是不可變性帶來的。沒有可變的狀態,函式就是引用透明(Referen

C++過載、覆蓋隱藏的區別以及適用場景

一、過載、覆蓋和隱藏的區別 二、適用場景 1、過載:   適用於不同的資料型別都需要使用到的功能函式。以資料相加的函式為例,可以在同一個檔案內提供以下的過載函式以支援同樣的功能:   int add(int, int);/*2個整數相加*/   int add(int, int, int);/*3個整數相

JSPout.printout.wirte的區別以及out.println的輸出區別

主要區別是 out.print(Object) 其中的引數可以為Object,也就是說什麼都可以輸出。 out.wirte(String) 引數需要為字串,否則輸出的是亂七八糟的東西或者不顯示(不會報錯) 例子如下,順便展示了下println的顯示: <% int

JavaScript的mouseover與mouseentermouseoutmouseleave的區別

1、mouseover與mouseenter       mouseover事件:不論滑鼠指標穿過被選元素或其子元素,都會觸發 mouseover 事件。       mouseenter事件:

JdbcTemplateexecuteupdate的區別 以及JdbcTemplate的增刪改查

1、update可以帶引數,而execute不可以。例如: jdbcTemplate.update("update TableA set name = 'Andy’ where id=?", new Object[] {new Integer(3)});  jdbc

Pythoncopydeepcopy的區別以及程式設計實現deepcopy的功能

在python中,有淺複製copy()和深度複製deepcopy(),這兩個的區別我用以下的例子來說明,例如:numlist=[[1,2,[3,4,5]],34,"haha",{"name":{"fistname":"孫","lastName":"悟空"}}]設  numl