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赋值完全一致。

总结