About the difference between inspecting elements and viewing the source code of a web page
|
I don’t know if you have noticed that when we open any web page with Chrome browser, there are two very similar options when we right-click on the page:
It is to view the source code of the web page and inspect (inspect elements). I always thought there was no difference between these two options, but since Chrome lists these two options, there must be a reason for it. Let's take a look at a simple page: Copy code The code is as follows:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test1</title> <script> window.onload = function(){ document.getElementById("p1").innerHTML="This is a sentence generated by JS."; } </script> </head> <body> <p id="p1"></p> </body> </html> The display effect on the web page is as follows (most of the blank space is deleted to compress the image size):
We review the elements
You will find that there is an extra sentence in the <p></p> tag.
This sentence is dynamically generated by JS. Therefore, there is a slight difference between inspecting elements and viewing the source code of a web page. This difference can be said to be the difference between source code and DOM. When we inspect elements, we are actually viewing the DOM. After the DOM has been rendered, what we see when we view the source code of the web page is the unparsed source code. The above is the full content of this article. I hope it can be of some help to your study and work. |
<<: HTML+CSS merge table border sample code
>>: Implementation example of specifying container ip when creating a container in docker
Recommend
React's context and props explained
Table of contents 1. context 1. Usage scenarios 2...
How to check if the firewall is turned off in Linux
1. Service method Check the firewall status: [roo...
Problems with using wangeditor rich text editing in Vue
wangEditor is a web rich text editor developed ba...
VMware Workstation Pro installs Win10 pure version operating system
This article describes the steps to install the p...
A brief analysis of MySQL cardinality statistics
1. What is the cardinality? Cardinality refers to...
Vue+Openlayer uses modify to modify the complete code of the element
Vue+Openlayer uses modify to modify elements. The...
Implementation of nginx worker process loop
After the worker process is started, it will firs...
Overview of the Differences between Linux TTY/PTS
When we type a letter on the keyboard, how is it ...
Linux file systems explained: ext4 and beyond
Today I will take you through the history of ext4...
MySQL database connection exception summary (worth collecting)
I found a strange problem when deploying the proj...
MySQL transaction, isolation level and lock usage example analysis
This article uses examples to describe MySQL tran...
Build Maven projects faster in Docker
Table of contents I. Overview 2. Conventional mul...
Vue father-son value transfer, brother value transfer, child-father value transfer detailed explanation
Table of contents 1. Parent component passes valu...
JavaScript to achieve the effect of clicking on the self-made menu
This article shares the specific code of JavaScri...
About browser compatibility issues encountered and solutions (recommended)
Preface: Last Sunday, a senior asked me to help m...