innerHTML&outerHTML&innerText&outerTex

draveness 發布于2019-08-23 13:56 / 479人閱讀

摘要：有時候做項目會用到上述四個屬性來獲取文檔里的一些內容，但對他們的區別還是有些模糊，所以寫了幾個簡單的函數，通過打印在控制臺上的結果看看他們之間的區別。

有時候做項目會用到上述四個DOM屬性來獲取HTML文檔里的一些內容，但對他們的區別還是有些模糊，所以寫了幾個簡單的函數，通過打印在控制臺上的結果看看他們之間的區別。

代碼：


    outer
    inner one
    between
    inner two

var showInnerHTML = function(){
    console.log(document.getElementById("outer").innerHTML);
  }
  var showOuterHTML = function(){
    console.log(document.getElementById("outer").outerHTML);
  }
  var showInnerText = function(){
    console.log(document.getElementById("outer").innerText);
  }
  var showOuterText = function(){
    console.log(document.getElementById("outer").outerText);
  }

innerHTML

控制臺結果：

總結：獲取當前節點下子節點的HTML文本，如果子節點只有文本節點，則它的輸出效果和innerText相同

outerHTML

控制臺結果：

總結：獲得包括當前節點本身以及節點下子節點的HTML文本

innerText

控制臺結果：

總結：獲得當前節點子節點內的純文本內容

outerText

控制臺結果：

總結：獲得當前節點以及子節點內的純文本內容（總感覺和innerText的輸出效果是一樣的，沒想到什么例子可以有不同的效果，如果你有，歡迎評論(#^.^#)）

疑問：可以看到innerText的輸出結果中，中間有一個空行，并不是很懂……

雖然是簡單的例子，但是通過代碼把概念區分了一下，也是挺好的~如果有寫得不足的，歡迎指正留言~不勝感激！

GPU云服務器云服務器 asp &amp&amp邏輯 js 2&amp&amp1 attr&039&039checked&039&039 OneTechCloud&amp

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99812.html

利用js實現點擊按鈕實現圖片排序

　　利用JS就可以實現在點擊按鈕實現圖片排序，做個狠人，直接說：　　效果　　1 、點擊按鈕　　如果按鈕文字是從大到小將li標簽按照從大到小的順序排列文字改成從小到大　　如果按鈕文字是從小到大將li標簽按照從小到大的順序排列文字變成從大到小　　2 、點擊按鈕將li隨機排序　　<style> 　　*{ 　　padding:0; 　　margin:0; 　　list-style:n...

3403771864 2022-10-23 13:49 評論0 收藏0
js實現音樂播放器

　這篇文章為大家講如何用JSd代碼實現音樂播放。　　音樂播放的主要js代碼　　音樂數據的數組對象　　這里不僅有前端網頁提供數據，還有為后面的js代碼提供了音樂路徑，分享給大家。　　{ 　　ablum:"海闊天空", 　　artist:"Beyond", 　　id:1, 　　name:"大地", 　　path:"musics/1...

3403771864 2022-09-18 22:31 評論0 收藏0
innerHTML、innerText、textContent、outerHTML和value，傻傻

摘要：會省略內嵌的標簽名，所以文本的只顯示了的內容，并沒有顯示的標簽名也必須是標簽對的形式刪除了格式信息，所有文本均在一行，所以文本的內容都在一行。也用來設置或獲取成對標簽之間的內容，并且只關注文本信息。之前，是不支持的。是的親兒子，放心用吧。原文地址：https://www.xksblog.top/innerHTML-innerText-textContent-outerHTML-val...

HollisChuang 2019-08-23 11:35 評論0 收藏0
使用js對被轉義的特殊符號（如：&amp;nbsp;）進行反轉義

var a = & alert(a); var c = document.createElement(div); c.innerHTML = a; a = c.innerText || c.textContent; c = null; alert(a); 吃水不忘挖井人：http://jsfiddle.net/xqin/6jra...

wums 2019-08-20 12:28 評論0 收藏0
innerHTML、innerText、outerHTML、outerText區別。

摘要：設置或獲取對象起始標簽和結束標簽之間的內容。使用上面的操作執行輸出執行輸出注意到區別了嗎，輸出中的內容時，標簽是不包含在內的。在設置時，執行此時頁面顯示的內容是，此時標簽名沒有被解析，當作字符原樣輸出。 1.innerHTML:設置或獲取對象起始標簽和結束標簽之間的內容。如： hello world segmentfault dazhuaoyao 執行console.log(doc...

lbool 2019-08-20 14:49 評論0 收藏0