vue-learning：12 - 2 - 區分：outerHTML - innerTHML - outerText - innerText - textContent

區分：outerHTML - innerTHML - outerText - innerText - textContent

獲取值

<div id="outer">
    外部
    <div id="inner">
        內部
        <span style="display:none">浙江省</span>
        <!-- 這是註釋 -->
        <span>杭州西湖美</span>
    </div>
</div>

var d_outer = document.querySelector("#outer")
var d_inner = document.querySelector("#inner")

// 獲取值
console.log("outerHTML >>>",d_outer.outerHTML)
console.log("innerHTML >>>",d_outer.innerHTML)
console.log("outerText >>>",d_outer.outerText)
console.log("innerHTML >>>",d_outer.innerText)
console.log("textContent >>>",d_outer.textContent)

outerHTML >>> <div id="outer">
            外部
            <div id="inner">
                內部
                <span style="display:none">浙江省</span>
                <span>杭州西湖美</span>
            </div>
        </div>
innerHTML >>> 
            外部
            <div id="inner">
                內部
                <span style="display:none">浙江省</span>
                <span>杭州西湖美</span>
            </div>
        
outerText >>> 外部
內部 杭州西湖美
innerHTML >>> 外部
內部 杭州西湖美
textContent >>> 
            外部
            
                內部
                浙江省

                杭州西湖美

• outerHTML會獲取包括其自身，以及後代元素的全部HTML內容。意義上的包含outer外部即自身,會對內容中的標籤符號進行轉義。
• innerHTML獲取除自身外的，內部HTML內容。意義上的inner內部，會對內容中標籤符號進行轉義。
• outerText微軟IE瀏覽器最早提出的屬性，暫未被寫入W3C標準，但被大部分其它廠商瀏覽器支持，獲取其包含的全部元素節點文本內容，但不包括隱藏的元素節點。
• innerText一樣是微軟提出的屬性，但2016年已被寫入W3C標準。獲取全部文本內容，獲取值時表現也outerText一致。獲取其包含的全部元素節點文本內容，但不包括隱藏的元素節點。
• textContent獲取全部節點的文本內容。雖然都是獲取文本內容，可是與outerText/innerText有不少不一樣：
  • 能夠返回隱藏元素的文本內容；
  • textContent屬性不只對元素節點有效。對於屬性節點，註釋節點等都是有效的，也會返回<style>和<script>節點的文本內容；
  • 對.\t、\r、\n與連續的空格效果會生效，雖然咱們只演示了\n換行。但outerText/innerText只對div元素節點顯示換行

賦值

outerHTML賦新值

d_outer.outerHTML = "<span>這是outerHTML的賦值</span>"
// outerHTML賦值後再獲取值，並非最新的值，仍是原來的值
console.log("outerHTML >>>",d_outer.outerHTML)
console.log("innerHTML >>>",d_outer.innerHTML)
console.log("outerText >>>",d_outer.outerText)
console.log("innerHTML >>>",d_outer.innerText)
console.log("textContent >>>",d_outer.textContent)

d_outer.outerHTML賦值表現與取值同樣，會包括自身元素一塊兒，都被替換，不會在頁面中顯示，但原有DOM片斷仍在內存中，因此再次獲取值仍然與賦值前同樣。

傳送門：MDN

innerHTML賦值

d_outer.innerHTML = "<span>這是innerHTML的賦值</span>"
// innerHTML賦值後再獲取值,先後表現一致，爲最新的值
console.log("outerHTML >>>",d_outer.outerHTML)
console.log("innerHTML >>>",d_outer.innerHTML)
console.log("outerText >>>",d_outer.outerText)
console.log("innerHTML >>>",d_outer.innerText)
console.log("textContent >>>",d_outer.textContent)

d_outer.innerHTML賦值表現與取值一致，僅對內部內容進行替換，而且從新獲取值是最新內容。

outerText賦值

d_outer.outerText = "<span>這是outerText的賦值</span>"
// outerText賦值後再獲取值,並非最新的值，仍是原來的值。同outerHTML表現同樣
console.log("outerHTML >>>",d_outer.outerHTML)
console.log("innerHTML >>>",d_outer.innerHTML)
console.log("outerText >>>",d_outer.outerText)
console.log("innerHTML >>>",d_outer.innerText)
console.log("textContent >>>",d_outer.textContent)

d_outer.outerText有兼容性，並非W3C標準屬性。

• 賦值新內容會連自身元素也被替換。
• 不會對內容中的標籤符號進行轉換，默認全爲字符文本。
• 從新取值仍然爲內存中原來的值。
  除了第二點外，基本表現與outerHTML一致。

innerText賦值

d_outer.innerText = "<span>這是innerText的賦值</span>"
// innerText賦值後再獲取值
console.log("outerHTML >>>",d_outer.outerHTML)
console.log("innerHTML >>>",d_outer.innerHTML)
console.log("outerText >>>",d_outer.outerText)
console.log("innerHTML >>>",d_outer.innerText)
console.log("textContent >>>",d_outer.textContent)

d_outer.innerText賦值新內容，僅對後代節點內容進行替換。一樣不會對賦值內容中的標籤符號進行轉義，默認全爲字符文本。

textContent賦值

d_outer.innerText = "<span>這是textContent的賦值</span>"
// textContent賦值後再獲取值
console.log("outerHTML >>>",d_outer.outerHTML)
console.log("innerHTML >>>",d_outer.innerHTML)
console.log("outerText >>>",d_outer.outerText)
console.log("innerHTML >>>",d_outer.innerText)
console.log("textContent >>>",d_outer.textContent)

d_outer.outerText賦值新內容，僅對後代節點內容進行替換。一樣不會對賦值內容中的標籤符號進行轉義，默認全爲字符文本。同innerText賦值徹底一致。

總結