摘要:獲取文本內容屬性表示頁面指定節點及其后代節點的文本內容。需要說明的是,在上述語法結構中,調用屬性的表示元素節點。本教程采用知識共享署名非商業性使用禁止演繹國際許可協議進行許可。
Node 對象提供了 textContent 屬性實現獲取或設置 HTML 頁面中指定元素的文本內容。
獲取文本內容textContent 屬性表示 HTML 頁面指定節點及其后代節點的文本內容。其語法格式如下:
var text = element.textContent;
在上述語法結構中,返回值 text 表示 element 節點及其后代節點的文本內容。
需要說明的是,在上述語法結構中,調用 textContent 屬性的 element 表示元素節點。元素節點本身也是一個元素。
值得注意的是: 如果指定節點是 Document 文檔節點的話,textContent 返回 null。
我們可以通過如下代碼示例,測試如何通過 textContent 屬性獲取指定節點的文本內容:
var pElement = document.getElementById("p"); console.log(pElement.textContent);
設置文本內容值得注意的是: 如果指定節點的后代節點也包含文本內容的話,那該節點調用 textContent 屬性時,則會返回該節點及其所有后代節點的文本內容。
如下 HTML 頁面結構:
這是一個段落內容。
如果我們通過上述
元素調用 textContent 屬性的話,得到的結果并不是如下結果:
這是一個內容。而是如下結果:
這是一個段落內容。
通過 textContent 屬性不僅可以獲取 HTML 頁面中指定節點及其后代節點的文本內容,還可以設置指定節點的文本內容。其語法結構如下:
element.textContent = "this is some sample text";
值得注意的是: 在節點上設置?textContent?屬性的話,會刪除它的所有子節點,并替換為一個具有給定值的文本節點。
我們可以通過如下代碼示例,測試如何通過 textContent 屬性設置指定節點的文本內容:
var btn = document.getElementById("btn"); btn.textContent = "A New Button";innerText 屬性
IE 引入了?node.innerText 屬性,意圖類似 textContent。但有以下區別:
textContent?會獲取所有元素的內容,包括??和??元素,然而?innerText?不會。
innerText 意識到樣式,并且不會返回隱藏元素的文本,而 textContent 會。
由于?innerText?受?CSS 樣式的影響,它會觸發重排(reflow),但 textContent?不會。
在 IE (小于等于?IE11 的版本) 中對?innerText 進行修改,不僅會移除當前元素的子節點,而且還會永久性地破壞所有后代文本節點。
關于 innerText 屬性的具體用法請參考 MSDN社區的相關說明。
瀏覽器兼容問題解決方案在實際開發中,我們需要盡量滿足所有瀏覽器對文本內容操作的需求。所以,我們可以使用如下代碼解決瀏覽器之間的兼容問題:
function text(elem, text){ if(text){ elem.textContent ? elem.textContent = text : elem.innerText = text; }else{ if(elem.textContent){ // 表示其他瀏覽器 return elem.textContent; }else{ // 表示 IE 瀏覽器 return elem.innerText; } } }
本教程免費開源,任何人都可以免費學習、分享,甚至可以進行修改。但需要注明作者及來源,并且不能用于商業。
本教程采用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/87188.html
摘要:對象的作用對象作為訪問和更新頁面內容的入口。這個結果充分地說明了對象在的標準規范中代表整個頁面。對象的繼承鏈對象是繼承于對象的。對象也是的標準規范中非常重要的對象之一,而對象又是繼承于對象。 Document 對象是 DOM 的標準規范中比較重要的對象之一。該對象提供了訪問和更新 HTML 頁面內容的屬性和方法。 Document 對象的作用 Document 對象作為 DOM 訪問和...
摘要:系列教程是一套免費開源,任何人都可以免費學習分享,甚至可以進行修改。本文是這套系列教程的索引也就是目錄第一回介紹在最開始,我們先來了解是什么的作用,以及瀏覽器的支持是怎么樣的。 《EASYDOM》系列教程是一套免費、開源,任何人都可以免費學習、分享,甚至可以進行修改。但需要注明作者及來源,并且不能用于商業。 本文是這套系列教程的索引(也就是目錄): 第一回 DOM 介紹 在最開始,我...
摘要:對象提供了屬性用于實現獲取或設置頁面指定元素的代碼。需要說明的是,在上述語法結構中,調用屬性的表示元素節點。但需要注明作者及來源,并且不能用于商業。本教程采用知識共享署名非商業性使用禁止演繹國際許可協議進行許可。 Element 對象提供了 innerHTML 屬性用于實現獲取或設置 HTML 頁面指定元素的 HTML 代碼。 獲取 HTML 代碼 innerHTML 屬性表示 HTM...
摘要:而標準規范中提供了對象,主要是依靠元素樹結構訪問和更新頁面的內容。值得注意的是所有的頁面的元素都是對象,而這個對象又是繼承于對象的。我們可以簡單地理解對象是對象的補充。本教程采用知識共享署名非商業性使用禁止演繹國際許可協議進行許可。 DOM 的標準規范中提供了 Element 對象,該對象提供了 HTML 頁面中所有元素所具有的屬性和方法。 我們都知道 DOM 標準規范中提供了 Nod...
摘要:對象提供了可以創建元素節點屬性節點和文本節點的方法,方便更新頁面中的元素。是返回值,表示創建的元素。最后,通過方法創建屬性節點,并設置了屬性值為,再將該屬性節點添加到新創建的元素中。 Document 對象提供了可以創建元素節點、屬性節點和文本節點的方法,方便 DOM 更新 HTML 頁面中的元素。 創建元素節點 Document 對象提供了 createElement() 方法創建元...
閱讀 1860·2021-11-25 09:43
閱讀 3693·2021-11-24 10:32
閱讀 1084·2021-10-13 09:39
閱讀 2337·2021-09-10 11:24
閱讀 3351·2021-07-25 21:37
閱讀 3471·2019-08-30 15:56
閱讀 866·2019-08-30 15:44
閱讀 1456·2019-08-30 13:18