HTML 元素的 innerHTML 與 textContent

考慮以下的div標籤配置:

<div  id="msg">
<p style="color:maroon;font-size:36px;font-weight:600;">HTML5從零開始</p>
</div>

這一組 div 中配置了一個巢狀式的 p 標籤,然後設定了一些樣式,如果要將 div 標籤中的內容取出,可以調用 innerHtml ,例如以下的程式碼:

document.getElementById('msg').innerHTML

這一行程式碼取得畫面中的 div 元素,然後引用 innerHTML 即可取出其中的所有內容,結果如下:

<p style="color:maroon;font-size:36px;font-weight:600;">HTML5從零開始</p>

如你所見,innerHTML會取出 div 標籤內部的所有內容,現在針對上述的 div 標籤,引用 textContext,考慮以下的程式碼:

document.getElementById('msg').textContent

這一行程式碼引用 textContent ,會輸出其中「HTML5從零開始 」這一段純文字的內容,

HTML5從零開始

與 innerHTML 類似的另外還有一個 outerHTML ,這會連同標籤本身一併取出,而純文字存取的部份,亦有 innerText ,它與 textContent 類似,說明請看這篇:HTML標籤的 innerText 與 textContent,要注意的是,它並非標準,不建議使用。

》相關閱讀
======================================================

沒有留言: