關於審查元素與查看網頁源碼的區別
編輯：前端技巧
不知道大家發現沒有，當我們用chrome浏覽器打開任意一個網頁，右鍵單擊頁面有兩個很相似的選項
就是查看網頁源代碼以及檢查（審查元素）。
之前我一直認為這兩個選項是沒有什麼區別的，但chrome既然列出來這兩項自然有它的道理。
來看一個簡單的頁面：
復制代碼代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test1</title>
<script>
window.onload=function(){
document.getElementById("p1").innerHTML="這是JS生成的一句話。";
}
</script>
</head>
<body>
<p id="p1"></p>
</body>
</html>
在網頁中的顯示效果為（為壓縮圖片大小刪掉了大部分空白）：
我們審查元素
會發現<p></p>標簽中已經多出來了一句話。
而網頁源代碼中，<p></p>標簽中是沒有這一句話的：
這一句話是通過JS動態生成的。
所以，審查元素和查看網頁源碼還是有一點區別的，這個區別可以說是源代碼和DOM的區別，我們審查元素，實際上是查看DOM，DOM渲染過了，查看網頁源碼看到的才是未解析的源代碼。以上就是這篇文章的全部內容了，希望對大家的學習和工作能有一定的幫助。
小編推薦
熱門推薦