Solve the problem that the script tag is written in front of the element node and cannot get the element node

Documents are loaded in the order of the document tree , So get script Element node loaded after script node You can't get it .

Three solutions are proposed .

Solution 1 ： Use onload event ,window.onload Trigger when the page is loaded .

Code instructions ：

<style>
			.box {
				width: 100px;
				height: 100px;
				background-color: brown;
				cursor: pointer;
			}
		</style>
		<script>
			var box=document.getElementsByClassName("box")
			box[0].style.background="green"
			
		</script>

		<div class="box"> I am a box</div>

here script The label is written in div Block front , Error will be reported when running code , Can't get box Elements

Running results ：

  You can see box The background of the box has not changed , Now we use onload event ：

        <style>
			.box {
				width: 100px;
				height: 100px;
				background-color: brown;
				cursor: pointer;
			}
		</style>
		<script>
			window.onload=function(){
			var box=document.getElementsByClassName("box")
			box[0].style.background="green"
			}
			
		</script>

  Running results ：

 

Solutions two and three ： Using asynchronous loading of scripts , Two properties are required async and defer, Because they are used in the same way, they are explained together .

These two attributes are in External import js Use when file , When importing externally js Of the file script When the tag is in front of the element node , There will also be cases where the element node cannot be obtained , It needs to be used async and defer.

demonstration ：

Create a js File acquisition box The box is imported from the outside ：

  The next step is just to html In the document ：

 <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: brown;
            cursor: pointer;
        }
    </style>
    <script async src="../js/yibu.js"> // Here is the async Switch to defer It can also succeed 
    </script>
     <div class="box"> I am a box</div>

Run code ：

It can also be seen that , Pay attention to using sometimes async It may not work , Because its execution mechanism is to load synchronously with the document .

Tell me more about it async and defer:

async: Yes  async when , The process of loading and rendering subsequent document elements will follow  script.js  Load and execute in parallel （ asynchronous ）.

 defer: Yes  defer when , The process of loading subsequent document elements will be the same as  script.js  The loading is done in parallel （ asynchronous ）, however  script.js  After all elements are parsed ,DOMContentLoaded  Before the event triggers .

Illustration ：

 

 

summary ：

From a practical point of view , First, throw all the scripts into  </body>  It was best practice before , Because it's the only optimization option for old browsers , This method can ensure that all other non script elements can be loaded and parsed with the fastest speed .