Firefox:
Actually document.getElementById ("IMG1"); the object is equal to the following:
/* var img1={src: "1_ender1000.jpg",
ID: "IMG1",
alt: "",
Title: "Reverse Picture"
}*/
</script>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Untitled Page </title>
<script type= "Text/javascript" >
Looping through all the properties of an IMG picture, you can see many properties that are not defined
Window.onload=repeat;
function repeat () {
var Img1=document.getelementbyid (' Img1 ');
for (var i in img1) {
Alert (i+ ":" +img1[i]);
}
}
</script>
<body>
<form id= "Form1" runat= "Server" >
<div>
</div>
</form>
</body>
<script>
Some script goes here
The </script>script tag has three special attributes (of course, a property like Id,class is also available, and almost every element in an HTML page can have class,id attributes)
The
<script language= "JavaScript" >//language property indicates the language used by the script contained in the label
//It has three common values for JavaScript, Jscript,vbscript
//some script goes here
</script>
//for JScript, only IE can recognize Other browsers will ignore the contents of this label
//and for VBScript, only IE on Windows can recognize, run
//However language attribute was later replaced by the type attribute in XHTML
<script type= "Text/javascript" >//also changed, Text/javascript,text/jscript,text/vbscript
//some Script goes here
</script> in a Web browser, we will only use the Javascript,type property set to Text/javascript. In fact, because JavaScript is very popular , it's almost synonymous with scripting, and in a Web browser, even if the script tag doesn't have any attributes, the browser will think of it as a JavaScript
<script>
Alert ("hello!");
</script>
The code above will run as JavaScript.
Even in IE, script blocks that are not declared are executed as JavaScript, not VBScript
<script>
MsgBox "Hello!"
</script>
The above code in IE will also be an error, IE will also be used as JavaScript in the HTML page, some tags often add some such as onclick,onmouseover properties, this is an event binding (about the event, we will explain in detail later, Don't worry. JavaScript code that specifies what happens on an element of an HTML page (or other client script, of course)
The above code will display an image on an HTML page, and when you click with the mouse, a window appears, showing ' You're hurting me! ' The value of the OnClick property is actually a piece of JavaScript code; This is the event, and here are some other simple events
OnClick, execute once when mouse clicks
onMouseOver, execute once when the mouse is put up
onmouseout, execute once when mouse is moved out
OnMouseDown, executes once when the mouse is pressed
OnMouseUp, perform once when the Mouse is released (bouncing)
Onmousedblclick, executes once when the mouse is double-clicked
OnLoad, executed once when the object load completes
What used to be popular on the internet, called rollverimages (flip image), is actually a combination of events like Onmouseover,onmouseout and simple JavaScript code implementations.
Onmouseover= "this.src=". /images/over.jpg ' "
Onmouseout= "this.src=". /images/out.jpg ' "/> You may know that the strings in the properties of this class will be executed as scripts when the event occurs, but the above code looks very blurry
To make it easier to see, we extract them and put them down there.
This.src= '.. /images/over.jpg '
This.src= '.. /images/out.jpg ' analysis of the above code, we found that this is actually giving an object this property src assignment, but the problem is that we did not declare an object called this! The This object is a persistent object that cannot be declared ( This is the keyword. Here, this means "this", which refers to the label! JavaScript automatically parses the HTML element into an object. For the following IMG tag, it resolves to one of the following:
Note that this is actually not a manual assignment or a manual declaration, and this is just a demo
this = {
SRC: ". /images/stack_heap.jpg ",
ALT: "Memory Stack",
OnClick: "Alert (' hello! ')",
TagName: "IMG"
};
In fact, more than these attributes, the IMG tag will be parsed into an object, with Src,alt and other attributes, Src,alt attributes we write in the HTML, and tagname is automatically generated by the system, which represents the label tag name! We can test with the following code:
Natural, we can also modify its value, so the effect of flipping the image is so successful
For such inline event bindings, there are some points to note.
<script>
function Myfn () {
Alert ("Image loading completed!");
}
</script>
//............. After several code
//execute a function when the image is loaded successfully
The above code execution is OK, but flip the order (script can be placed in any legal place)
//execute a function when the image is loaded successfully
//............. After several code
<script>
function Myfn () {
Alert ("Image loading completed!");
}
The </script>html page is loaded from top to bottom, and when the image is loaded successfully, it executes the onload content (a custom function), but because the script tag is not loaded after several code below, there is an error "MYFN is Undefined "; That's why you put the script tag in the head section because the head is in front of the body, and when the BODY element is loaded, the script in the head is definitely loaded.
But then with XHTML, with "three-tier separation," The DOM2, we need to bind events in a different way, get HTML page elements. Take the image above for example:
<script>
var img = document.getElementById ("myimg");//We get it by ID
The document.getElementById method has a parameter, a string ID
Then, IMG represents the image label object.
Img.onclick = MYFN;
/* We are not the onclick attribute of the JavaScript code to its string character value
Instead, it assigns a value directly to the name of a function.
You would also say, why not IMG.ONCLICK=MYFN ();
Because it's now in the JavaScript code area.
Plus "()" means execute this function, and then assign the return value of this function to the img.onclick*/
function Myfn () {
Alert ("Image loading completed!");
}
</script>
//.......
We don't add the onclick attribute anymore, but we give it an ID.
But the above code executes and there is still an error, because HTML is loaded from top to bottom, when loaded into script, the body section is below and has not been loaded, and JavaScript is automatically executed when browsing loads. At this point, the ID for myimg on the page has not been loaded, So there will be an error; The document.getElementById method requires a string ID, and if there is no element with ID on the page, it returns Null (the Empty object), and in the following line, Img.onclick this sentence uses an empty object, So it's going to make a mistake here! As for the workaround, it is simply to put the script position of the traditional inline event bindings in reverse. Put the script behind the HTML element!
//.................. After several code
<script>
var img = document.getElementById ("myimg");
At this point, the IMG tag is definitely loaded when the script tag is placed in the IMG tag.
Img.onclick = MYFN;
function Myfn () {
Alert ("Image loading completed!");
}
</script> but the standard still recommends that the script be placed in the head section! Well, this is going to take another event onload
Window.onload = initall;//Writes all code in a function and registers it on the OnLoad event property of the Window object
Window object, which is always present when the window is open, and triggers the OnLoad event on the Window object when the page load completes
function Initall () {
var img = document.getElementById ("myimg");
Img.onclick = MYFN;
function Myfn () {
Alert ("Image loading completed!");
}
This way, the code doesn't go wrong, no matter where the script is placed, Initall is only executed when the page is loaded
Accessing HTML pages: HTML DOM
The HTML DOM treats the entire page as a document object, and the tags in HTML are accessed through the Document object. And each label in the document is converted to an object
<p class= "Demo" title= "first paragraph: Dom tree" id= "P1" > we use a P tag to demonstrate </p> it will be converted to the following object
Always remember the object literal syntax.
{
TagName: "P",
ClassName: "Demo",
Title: "First paragraph: Dom tree",
ID: "P1",
InnerHTML: "We use a P tag to demonstrate"
}
You might wonder why the tag's class attribute becomes the object's classname attribute rather than class.
Class is a javascript reserved word!!!
TagName represents its label name, and innerHTML says it has HTML code browsing to convert HTML tags into such objects, it is much simpler to access the tag's properties or contents in JavaScript, but the question is how to access the Object!!
First you have to add an ID to the label and then use the document.getElementById method to access it.
Window.onload = initall;//Note that the code for the HTML page you want to access is placed on the onload event handling of Windows!
function Initall () {
var p = document.getElementById ("P1");
alert (p.classname);
alert (p.tagname);
alert (p.title);
alert (p.id);
alert (p.innerhtml);
Accessing an HTML page is as simple as that! After you get an element, you can not only read its property values, but also set its property values!
Window.onload = Initall;
function Initall () {
var p = document.getElementById ("P1");
P.title= "JavaScript";
P.classname= "Load";//We can change its style
Using these, we've been able to do something exciting!
Some CSS
. OVER {
color:red;
Background:blue;
Font-size:larger;
}
. Out {
Color:black;
Background:white;
Font-size:smaller;
}
. Click {
Color:yellow;
Background:yellow;
font-size:12px;
}
HTML code
<p id= "P1" class= "out" > a large line of text, they are ordinary text!</p>
JavaScript code
Window.onload = Initall;
function Initall () {
var p = document.getElementById ("P1");
p.onclick=clickfn;//here the event registration method in addition to the line registration method less than the parentheses, the other is the same
P.onmouseover = OVERFN;
P.onmouseout = OUTFN;
}
function Clickfn () {
This.classname= "click";//Here, this is also available
Attention is classname, not class.
}
function Overfn () {
This.classname= "Over";
}
function Outfn () {
This.classname= "Out";
Of course, there are more than one way to get page elements. The document.getElementsByTagName method can also get the page element, as implies, it is through the HTML tag to get the element, not the ID. Because an HTML page, an ID name is unique, and the label signature is mostly the same, so the getElementsByTagName method has only one argument, a string form of the tag name (TagName), and the return value is a similar array of HTML elements list
Window.onload = initall;//still to be written in the Window.onload event handler
function Initall () {
var plist = document.getElementsByTagName ("P");
Why use uppercase P? In fact, lowercase p can also be case-insensitive, but because the object's tagname total report is uppercase, ....
Alert (plist.length)//is similar to array, length report how many elements, how many P tags on the page, report how many
alert (plist[0].innerhtml);//This accesses the first P element
In addition, for the document.getElementsByTagName method, you can also pass a "*" number as a parameter to get all the elements of the page, similar to the wildcard characters inside the CSS
Window.onload = Initall;
function Initall () {
var allthings = document.body.getElementsByTagName ("*");
The getElementsByTagName method can be invoked on any DOM element, and when the body is raised with this method, the label outside the body does not get
Alert (allthings.length),//How many labels are on the page, how much is reported (including DOCTYPE)
alert (allthings[3].innerhtml);//So to access the fourth element
Other-javascript: Pseudo protocol
Pseudo-protocols are different from the real http://,https://,ftp://on the internet, but are used for affiliate applications. such as: tencent://(associated QQ), data: (with base64 code to output binary files in the browser), And then there's javascript:
We can enter "Javascript:alert (' js! ') in the Address bar," and when we do, we'll find that we're actually putting javascript: The following code is executed as JavaScript and returning the resulting value to the current page
Similarly, we can use the JavaScript pseudo protocol in the HREF attribute of a tag
<a href= "Javascript:alert (' js! ');" ></a>
Click on the link, the browser will not jump to any page, but to display a window but javascript: Pseudo protocol has a problem, it will return the results of the execution of the page
<a href= "javascript:window.prompt (' input will replace the current page! ');" >A</a> solution is simple
<a href= "javascript:window.prompt (' input will replace the current page! ', '); undefined;" >a</a>
//adds undefined to the end although the JavaScript pseudo protocol provides some flexibility, try not to use it in the page! and for debugging JavaScript, JavaScript pseudo protocol is very useful!
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
