Home > Developer > JavaScript
Hello everyone, this is the first blog post I wrote in the blogging park. As a front-end development beginners, due to lack of experience, the level of limited, in the process of doing the project will always encounter such or such problems, often at this time, I prefer to go to the blog park here to seek solutions, the results are always able to find satisfactory answers. People should not only understand the acquisition, but also know how to pay. Therefore, I am here today to register an account, in the course of my learning in the accumulation of bits and pieces to share with you, or perhaps for those who are more than I learned the front end of the pro have a little help. My goal is very simple, that is hope in this platform and everyone to learn together, progress together. Other I will not say more, now directly into the topic, is simply to talk about me in the process of learning JavaScript more like to commit some mistakes, so that we can draw on, lest in these places again by the pit.
First of all, I want to talk to you about the order of HTML and JavaScript code execution. In fact, the execution order of the code is top-down. What is the top-down execution order? Maybe you'll be wondering, okay, then, here's the question.
Let's take a look at the code below and you'll know what "top down" is!!
1 <HTML>2 <Head>3 <MetaCharSet= "Utf-8"/>4 <title>5 Demo16 </title>7 <Script>8 varSing=document.getElementById ("startsing");9 Sing.onclick= function(){Ten Alert ("Happy Birthday to you...happy birthday ..."); One } A </Script> - </Head> - <Body> the <inputtype= "button"value= "Sing"ID= "Startsing"/> - </Body> - </HTML>
The intent of the above code is to pop a "Happy Birthday to You" window by clicking on the button "sing". However, as a result, the browser has an error. The error message is as follows:
typeerror:sing is null , &NB Sp , &NB Sp , &NB Sp , &NB Sp
Why do you report "Sing is null" error, we clearly through the ID to get startsing this node of the DOM assigned to sing Ah! Sing should be an Object!! How can it be null? In fact, the reason is very simple, we did not say before? The code is executed from top to bottom. When the program executes to line eighth of document.getElementById ("startsing"), because the input node of id=startsing is 15 rows, but there is no id=startsing node before line eighth, The resulting result is a null. Such errors are often encountered in the development of project instances. To avoid this error, we should put the JavaScript code in the OnLoad event function. Change the above JS code to the following line.
<Script>window.onload=function(){ varSing=document.getElementById ("startsing"); Sing.onclick= function() {alert ("Happy Birthday to you...happy birthday ..."); } } </Script>
Why doesn't the
put an error in the onload function? This is because the code inside the OnLoad event function is not executed until the entire page has finished loading. That is, in the execution of the code, the entire page has been resolved, of course, <input type= "button" Value= "Sing" Id= "startsing" /> This line has been executed. So, we can get the DOM of it successfully.
Let's talk about another place where beginners are more likely to make mistakes. We know that there are three ways to get a DOM object for a node, one with its ID, and one through his tag name (e.g., P,DIV,SPAN,H1, etc.), and the last is obtained through the name attribute. But the first method gets the same value as the second to third, the first one gets an object, and the second to third gets an array of objects. For example, there is the following segment code:
<id= "box" name= "box"></Div >
We want to get its DOM object, now try it in three different ways:
<script>
Window.onload=function () { vardom1=document.getElementById ("Box");//Method 1: Pass the ID; varDom2=document.getElementsByTagName ("Box");//Method 2: Pass the tagname varDom3=Document.getelementsbyname ("Div");//Method 3: Pass the namealert ("Dom1 is" +dom1+" " +"Dom2 is" +dom2+" "+ "DOM3 is"+dom3) }
</Script>
Open in Firefox, the result of alert is:dom1 is [object Htmldivelement] Dom2 is [object htmlcollection] Dom3 Yes [object NodeList]
So, Dom1 is an object, Dom2 is an array of objects, and DOM3 is an array of objects. One is an object, and the other is an array of objects, so the problem is, for example, now to make
<id= "box" name</div>
The background color turns blue,
Dom1.style.background= "Blue"
This method is correct and, as a result, the background color of Hello world! can be turned blue. However, the following two ways
Dom2.style.background = "Blue";
Dom2.style.background = "Blue";
It's a mistake. We've just been alert, dom2 and DOM3 are an array of objects, not a simple object. We're going to specify an object and add a subscript to it, just change it to
Dom2[0].style.background = "Blue";
Dom3[0].style.background = "Blue";
That's the right thing to do.
Well, it's not too early, it's time to rest. Write so much today. Good night, everyone.
JavaScript beginner Easy Wrong point
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
