JavaScript中經常使用的數據輸出方式解析

在js中，通常使用以下幾種方式進行數據的輸出：

1. 在瀏覽器的控制檯輸出

　瀏覽器F12打開瀏覽器控制檯（通常前端開發人員必備瀏覽器爲谷歌瀏覽器，下面就以谷歌瀏覽器爲例對控制檯盡心解析）；

　1.1 Elements : 頁面中的元素都在這個裏面，常常用來調式頁面的樣式

    1.2 Network : 包含了全部的資源文件（html、css、js、圖片、向後臺請求的數據接口等），並告訴咱們每個文件加載完成的事件；這樣咱們能夠針對加載時間過長的資源進行相關優化

　 1.3 Sources : 包含了咱們項目中的html、js、css全部的源代碼，不少程序員扒一些優秀網站代碼的時候就用到了它

　  1.4 Resources : 當前網站本地存儲的數據（cookie、localStorage、sessionStorage）

　  1.5 Console : 當前頁面向控制檯輸出的數據就在這裏顯示了

　  1.6 Toggle device toolbar ： 控制檯左上角有一個手機、PC轉換圖標按鈕，單擊能夠進入手機端模擬器，這裏有模擬各類主流手機型號的手機尺寸的選項，也能夠本身自定義添加對應的手機尺寸；咱們的移動端開發就是在這個模擬器中完成的

　  1.7 咱們還能夠利用控制檯對js代碼加斷點進行頁面bug調試　　

　　

好了，言歸正傳。上面咱們對控制檯有了一個深入的瞭解，那麼怎麼在瀏覽器的控制檯進行數據的輸出呢？

　　console.log();

　　console.info();

　　console.debug();

 

　　console.warn();//輸出警告信息

　　console.error();//輸出錯誤信息

　　console.dir();//輸出一個對象的詳細信息

 

　　console.table();//將json數據按照表格的形式輸出，這樣在查看結構時可以更加的清晰直觀

 

2.  向頁面中某個元素中寫入內容

　　element.innerHTML、element.innerTex

　　示例：　　　

var  oEle = document.getElementById(''oId"); oEle.innerHTML = "<strong>加點料，更直觀！！</strong>"

　　上面兩個個用法相同，那麼它們有什麼區別呢？

　　1>. firefox（火狐）瀏覽器中不支持innerText，而innerHTML則不存在瀏覽器兼容性問題。

　　2>  innerText只能添加文本，即便有html標籤，也不能有效識別，而是看成文本寫入到元素中；而innerHTML不只能夠添加文字，還能夠添加html標籤

　　3> 通常在js項目中，開發人員統一使用innerHTML，基本上不會使用innerText

 

3. 在頁面中彈出須要顯示的內容

　　window.alert();  //j警告框，確保用戶收到消息

　　window.confirm(); //確認框，返回用戶操做的布爾值

　　window.prompt(); //提示框，根據給出的提示讓用戶輸入信息並返回

　　提示：上面三個，前面的window能夠省略，直接使用alert() 、 confirm() 、 prompt()

4. 向頁面中直接輸出內容

　　document.write();

　　提示：相對於上面三種數據輸出方式，通常狀況下不建議使用第4種；第4種能夠用來向頁面種添加一個廣告

 

以上就是今天要講的，數據輸出的幾種方式，你學會了嗎？更多精彩內容請關注下面公衆號，吃喵的小魚乾！！內容不定時更新

 

原文出處：https://www.cnblogs.com/menglong1214/p/10359288.html