innerHTML、innerText、textContent、outerHTML和value,傻傻分不清楚?

原文地址: https://www.xksblog.top/innerHTML-innerText-textContent-outerHTML-value.html

innerHTML、innerText、textContent、outerHTML和value,傻傻分不清楚?何時該用哪一個?雖然咱們經常使用的老是innerHTML,但在一些特殊狀況下,正確的選擇可以事半功倍,因此是時候對這幾個小傢伙仔細分分清楚了。html

一個栗子

廢話很少說,先來看個例子:瀏覽器

<h1>innerHTML、innerText、textContent、outerHTML和value的區別</h1>
<p id="content-wrapper">你是誰?
  <span>這是一個內嵌span測試</span>
</p>
<input id="name-input" type="text" placeholder="輸入你的名字" value="xk">
<button id="send-btn">發送</button>
<script>
  let contentWrapper = document.getElementById("content-wrapper")
  let nameInput = document.getElementById("name-input")
  let sendBtn = document.getElementById("send-btn")

  console.log("文本p的innerHTML是:" + contentWrapper.innerHTML)
  console.log("文本p的innerText是:" + contentWrapper.innerText)
  console.log("文本p的textContent是:" + contentWrapper.textContent)
  console.log("文本p的outerHTML是:" + contentWrapper.outerHTML)
  console.log("文本p的value是:" + contentWrapper.value)

  console.log("input的innerHTML是:" + nameInput.innerHTML)
  console.log("input的innerText是:" + nameInput.innerText)
  console.log("input的textContent是:" + nameInput.textContent)
  console.log("input的outerHTML是:" + nameInput.outerHTML)
  console.log("input的value是:" + nameInput.value)

  console.log("按鈕button的innerHTML是:" + sendBtn.innerHTML)
  console.log("按鈕button的innerText是:" + sendBtn.innerText)
  console.log("按鈕button的textContent是:" + sendBtn.textContent)
  console.log("按鈕button的outerHTML是:" + sendBtn.outerHTML)
  console.log("按鈕button的value是:" + sendBtn.value)
</script>

結果如圖:
app

看完了其實仍是一臉懵逼狀。。有的值同樣,有的甚至連值都不見了,什麼鬼?好了總結一下:測試

innerHTML

innerHTML用來設置或獲取成對標籤之間的HTML內容,包括其中內嵌的子元素標籤。spa

  • innerHTML會顯示內嵌的標籤,因此文本p的innerHTML會有內嵌的span
  • 使用innerHTML的元素必須是標籤對的形式,因此input的innerHTML值爲空
  • innerHTML保留了格式信息,因此文本p的innerHTML內容會有換行

innerText

innerText也用來設置或獲取成對標籤之間的HTML內容,但它只關注文本信息,會省略內嵌的標籤名。code

  • innerHTML會省略內嵌的標籤名,因此文本p的innerHTML只顯示了span的內容,並無顯示span的標籤名
  • innerText也必須是標籤對的形式
  • innerText刪除了格式信息,全部文本均在一行,因此文本p的innerText內容都在一行。

textContent

textContent也用來設置或獲取成對標籤之間的HTML內容,而且只關注文本信息。htm

  • 這傢伙和innerText同樣同樣的,但它保留了格式信息。

outerHTML

outerHTML設置或獲取元素及其內容的HTML形式。blog

  • 這個是最好區分的,直接看例子,它會把DOM元素自己的標籤+內容+格式所有顯示出來。

value

value是表單元素特有的屬性,一般input用的比較多,就是其中輸入的值,也很好區別。ip

innerHTML、innerText和textContent的再次較量

咱們還要再把這三個難兄難弟挑出來,從瀏覽器兼容的角度來區別一下:rem

innerHTML是符合W3C標準的屬性,而innerText適用於IE瀏覽器,textContent適用於火狐瀏覽器。

這也就是爲何咱們總能看到innerHTML,總對它偏心有加,畢竟是W3C的親兒子嘛。

只不過到了今天,其他的瀏覽器也都實現了innerText和textContent,但要注意的是:

  • IE6-8只部分支持了innerHTML,在IE下,跟table有關的元素的innerHTML是隻讀的,咱們沒法改變其值;從IE9開始,全面支持了innerHTML。
  • IE9以前,是不支持textContent的。
  • innerText是IE的親兒子,放心用吧。
相關文章
相關標籤/搜索