被玩壞的innerHTML、innerText、textContent和value屬性
一、前言
由於innerText並非W3C標準屬性，因此我們無法在FireFox中使用它，一般情況下我們可以使用textContent來代替，但它兩者是否就能完全等同呢？在坑爹的表單元素（如input、textarea等）中表現是否依舊詭異呢？文字將記錄一些實驗結果，避免日後被玩壞。
二、innerHTML
由於innerText和textContent均為對innerHTML內容作不同的處理而成，因此我們需要先明確innerHTML屬性的特點。
賦值操作：
模式匹配結果將導致 保留 和 將字元轉換為HTML實體 兩個操作。
a). 以下情況將被保留
1. HTML實體（ASCII實體、符號實體和字元實體）的實體名或實體編號；
2. 符號實體和字元實體對應的字元；
3. 沒有HTML實體與之對應的字元。
b). 以下情況將會執行字元轉換為HTML實體
1. ASCII實體對應的字元（<、>、&、'和"）。
也就是說除了 <、>、&、'和" 會被轉換為實體名外，將原封不動地將值賦予給innerHTML屬性。
取值操作：直接獲取innerHTML屬性值。
後面的innerText和textContent內容將以下面的HTML Markup作為實驗原材料
<style type="text/css">
.line3,
.line4{
float:
left;
}
.line5::after{
content:
"test"
}
</style>
<div id="view">
<div>line1</div>
<div>line2</div><br/>
<div class="line3">line3</div>
<div class="line4">line4</div>
<div style="clear:both;"></div>
<div class="line5">line5</div>
</div>
<script type="text/javascript">
var
view = document.getElementById('view')
</script>
|
二、innerText
瀏覽器支援：IE、Chrome
賦值操作：先將ASCII實體對應的字元（<、>、&、'和"）轉換為實體名，然後把處理後的值賦予給innerHTML屬性。
取值操作：innerText的取值實際上就是對innerHTML的屬性值進行一系列處理，然後返回，具體步驟如下
1. 對HTML標籤進行解析；
2. 對CSS樣式進行帶限制的解析和渲染；
3. 將ASCII實體轉換為對應的字元；
4. 剔除格式資訊（如\t、\r和\n等），將多個連續的空格合併為一個。
IE各版本和Chrome下對innerText進行取值均執行上述4步，但效果不盡相同。實驗結果如下：
IE5.5~8
頁面顯示效果：
line1
line2
line3line4
line5
innerText取值結果：
"line1
line2
line3line4line5"
不全面的小結：在進行CSS樣式渲染時，不支援偽元素和clear:both。
IE9~11
頁面顯示效果：
line1
line2
line3line4
line5test
innerText取值結果：
"line1
line2
line3
line4
line5"
不全面的小結：在進行CSS樣式渲染時，只會應用元素的預設樣式。
Chrome
頁面顯示效果：
line1
line2
line3line4
line5test
innerText取值結果：
"line1
line2
line3line4
line5"
不全面的小結：在進行CSS樣式渲染時，不支援偽元素。
三、textContent
瀏覽器支援：IE9~11、FireForx、Chrome
賦值操作：先將ASCII實體對應的字元（<、>、&、'和"）轉換為實體名，然後把處理後的值賦予給innerHTML屬性。
取值操作：textContent的取值實際上就是對innerHTML的屬性值進行一系列處理，然後返回，具體步驟如下
1. 對HTML標籤進行剔除；
2. 將ASCII實體轉換為相應的字元。
注意：
a). 對HTML標籤是剔除不是解析，也不會出現CSS解析和渲染的處理，因此<br/>等元素是不生效的。
b). 不會剔除格式資訊和合並連續的空格，因此\t、\r、\n和連續的空格將生效。
所有瀏覽器效果統一，介面效果：
line1
line2
line3line4
line5test
textContent取值結果：
" line1 line2 line3 line4 line5 "
四、表單元素中的innerHTML、innerText、textContent和value
到這裡大家應該對innerHTML、innerText和textContent之間的關係和行為有一定了解了，但不幸的是表單元素一如既往地會推翻我們之前的理解。請注意的是上述的關係和行為僅限於非表單元素，而本節將介紹表單元素textarea和input[type="text"]相關的蛋疼……
前置資訊： textarea和input[type="text"]的value屬性與介面輸入框是對應的，通過value屬性賦值與在介面輸入框輸入值屬於同一個操作。
textarea
相關推薦
被玩壞的innerHTML、innerText、textContent和value屬性
一、前言 由於innerText並非W3C標準屬性，因此我們無法在FireFox中使用它，一般情況下我們可以使用textContent來代替，但它兩者是否就能完全等同呢？在坑爹的表單元素（如inpu
innerHTML、innerText、outerHTML、textContent的區別
示例html程式碼： <div id="test"> <span style="color:red">test1</span> test2 </div> 獲得id為t
JS中innerHTML、outerHTML、innerText 、outerText、value的區別與聯系？jQuery中的text()、html()和val()
chrom html標簽 sel detail put 替換 not 內容 tail 一、JS中innerHTML、outerHTML、innerText 、outerText、value的區別與聯系？jS中設置或者獲取所選內容的值：①innerHTML :屬性設置或返回該
JS中innerHTML、outerHTML、innerText 、outerText、value的區別與聯絡？
1、innerHTML 屬性 （參考自《JavaScript高階程式設計》294頁） 在讀模式下，innerHTML 屬性返回與呼叫元素的所有子節點（包括元素、註釋和文字節點）對應的 HTML 標記。在寫模式下，innerHTML 會根據指定的值建立新的 DOM 樹，然後用這個 DOM 樹完全替換呼叫元素
那些曾經勵誌過我們的話都被玩壞了。
發的 老板 做的 故事 態度 痛苦 out 石頭 普通人 1、又一天過去了。今天過得怎麽樣，夢想是不是更遠了？ 2、只要是石頭，到哪裏都不會發光的。 3、我有位家境一般的朋友，一直覺得如果自己有錢一定會更幸福。後來他媽做嬰幼教育發財了。快十年後我見他，問：現在你倒
【被玩壞的博客園】之canvas裝飾博客園側邊欄
ctx tail lang num radi sid 應用 ack 火狐 最近抽空學了學canvas,然後用canvas做了個小球運動的demo,大致的效果如下： 雖然網上已經有很多這樣的demo,但是還是想根據自己的思路來寫一個，下面先跟大家講解一下源代
記錄Zookeeper被玩壞後的60分鐘
楔子 前段時間在研究Zookeeper配置統一管理系統的時候，意外把開發環境的Zookeeper的許可權搞壞了，導致了所有服務都無法把資訊上傳至Zookeeper。由於公司的所有人都共用一套開發環境，如果此時有人需要更新服務，那麼勢必會造成服務無法正常啟動。Z
被玩壞的C程式控制臺視窗
嗯？聽說你在Windows系統上C語言程式？那你對控制檯視窗瞭解多少? Linux、Mac 的Shell以後有時間再玩…. 聽說你會寫Helloworld程式，我猜一定是這個樣子的： #include<stdio.h> int main
被玩壞的題目——A+B Problem
普通方法： C++: #include<iostream> using namespace std; int a,b; int main(){ cin>>a>
曹工說面試題：一個執行緒協同問題，解法繁多，都要被玩壞了，趁著沒壞，一起玩吧
# 前言 最近兩個月寫文章很少，因為自己學習狀態也不是很好，我看了下，上一篇文章，都是一個月前了。 不知道大家有沒有感覺，小學初中讀的一些書，看的一些文章，到現在都印象深刻，反倒是高中學的知識，高考後就慢慢消散，直到遺忘。 我想說的是，記得初中學過魯迅的《藤野先生》，裡面有一段話，大意是：久了不聯絡，有
HashMap、HashTable的key和value是否可為null
結論：HashMap物件的key、value值均可為null。 HahTable物件的key、value值均不可為null。 且兩者的的key值均不能重複，若新增key相同的鍵值
js中的innerText、innerHTML、屬性值、value與jQuery中的text()、html()、屬性值、val()總結
att text color btn col class 屬性 fun value js與jQuery獲取text、html、屬性值、value的方法是不一樣的。 js與jQuery，text與innerText獲取(<!---->中為結果) html:
jQuery中的text()、html()和val()以及innerText、innerHTML和value
too 技術 follow 復制 min blank asc 第一個元素 第一個 *jQuery中設置或者獲取所選內容的值：text();設置或者獲取所選元素的文本內容；html();設置或者獲取所選元素的內容（包括html標記）；val();設置或者獲取表單字段的值（前
innerText、innerHTML
mov ebe 空格 select標簽 獲取 數組 nbsp 刷新 進行 innerTest修改的是標簽的文本內容，如果修改的字符串具有標簽的格式，不會把標簽展示到頁面中innerHtml打印標簽中所有子標簽 以字符串的形式，如果修改的字符串有標簽的格式，則直接展示到頁面中
innerHTML、innerText和document.write的區別
重繪 頁面 自動 原因 一個 內容 tco ont firefox innerHTML：頁面獲取內容的時候，會把標簽也獲取到，就是標簽會渲染到頁面上，如果內容中有標簽，會解析標簽。 innerText：頁面獲取內容的時候，會把標簽過濾掉，會對標簽進行轉義。 *老版本的fir
jQuery中的text()、html()和val()以及innerText、innerHTML和value區別
jQuery中設定或者獲取所選內容的值： 作者：fozero 出處：https://www.cnblogs.com/fozero、 text();設定或者獲取所選元素的文字內容； html();設定或者獲取所選元素的內容（包括html標記）； val();設定或者
jQuery中沒有innerText、innerHtml
本人第一次使用jQuery。 發現如果我在div或者其他非表單的標籤中賦值，原本用普通的js就直接document.getElementById("id").innerHtml（或者其他幾個）就可以了。 但是在jQuery中不行 例如： document.getElement
javascript內建物件的innerText、innerHTML、join方法的認識
innerText語法規範：HTMLElement.innerText = string ;//後面的賦值是一個字串形式 innerText是一個非標準形式，不識別HTML標籤 返回值會去除空格和換行 div.innerText = ‘<strong>123</srong>’
【程序員的吃雞大法】利用OCR文字識別+百度算法搜索，玩轉沖頂大會、百萬英雄、芝士超人等答題贏獎金遊戲
amp lec ios 結果 round 去百度 方式 英雄 oid 【先上一張效果圖】： 一、原理： 其實原理很簡單： 1.手機投屏到電腦； 2.截取投屏畫面的題目部分，進行識別，得到題目和三個答案； 3.將答案按照一定的算法，進行搜索，得出推薦答案； 4.添加了一