Detailed explanation of Script label and access HTML page

Author：Eve Cole Update Time：2025-03-15 18:00:04

Copy code code as follows:

<img src = "1_nder1000.jpg" ID = "IMG2" OnClick = "Alert ('OnClick');

var IMG2 = document.GetelementByid ("IMG2");

Alert (IMG2.Onmouseover);

// Output the following pictures

</script>

IE output:

Firefox:

Copy code code as follows:

var IMG1 = document.GetelementByid ("IMG1");

img1.onmouseover = rotate;

Function rotate () {) {

this.src = '1_yylklshmyt20090217.jpg';

}

var IMG1 = document.GetelementByid ("IMG1");

img1.onmouseover = Onmouseover;

Function onmouseover (event) {

this.src = '1_yylklshmyt20090217.jpg';

}

// In fact, the document.GetelementByid ("IMG1"); what you get is an object equivalent to the following:

/* var IMG1 = {src: "1_nder1000.jpg",,

ID: "IMG1",

alt: "",,

title: "Reversal Picture"

}*/

</script>

Copy code code as follows:

< %@Page Language = "C#" AutoeEventwireup = "True" Codebehind = "Webform1.aspx.cs" Inherits = "Webapplication1.webform1" %>

<! Doctype HTML PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" http://www.w3.org/xhtml1/dtddml1-transitationAl.dtd ">

<Title> Non -Title Page </title>

// All the attributes of the cycle IMG picture, you can see many unspecific attributes that are not defined

Window.onload = Repeat;

Function Repeat () {) {)

var IMG1 = Document.GetelementByid ('IMG1');

for (var I in IMG1) {

alert (i+":"+IMG1 [i]);

}

</script>

</head>

<body>

<div>

</div>

</form>

</body>

</html>

Script label and access HTML page

Script tag

Script tag is used in the HTML page embedded in some obvious scripts

// some script goes here

</Script> Script label has three special attributes (of course, it also has attributes like ID, class, and almost every element in the HTML page can have class, ID attributes))

// It has three common values JavaScript, JScript, VBScript

// some script goes here

</script>

// Only IE can be recognized for JScript, and other browsers will ignore the contents of this label

// For VBScript, only IE on Windows can be recognized, running

// However, the Language attribute was later replaced by the Type attribute in XHTML

// some script goes here

</Script> In the web browser, we will only use JavaScript, Type property to Text/JavaScript. In fact, because JavaScript is very popular, it has almost become synonymous with scripts. Without any attributes, the browser will also treat it as JavaScript

Alert ("Hello!");

</script>

// The code above will run in the way JavaScript will run in JavaScript

// Even if there are IE, the Script block without declarations will be performed as JavaScript, not VBScript

msgbox "Hello!"

</script>

//上面的代码在IE中也会报错,IE也会将其当成JavaScript执行以前在HTML页面中,一些标签常会加一些诸如onclick,onmouseover这样的属性,这是一种事件绑定(关于事件, We will explain in detail in the future, don't worry). It is used to specify the JavaScript code that is executed when a certain element on the HTML page is on a certain element (of course, it can also be other client scripts)

<img src = "../ Images/stack_heap.jpg" onClick = "Alert ('You hurt me!"/> The code will display a image on the html page, when you click on the mouse clicks. At that time, there will be a pop -up window that shows 'you hurt me!', The value of the onClick attribute is actually a JavaScript code; this is the event, the following are other simple events

onClick, execute it once when the mouse is clicked

onmouseover, execute once when the mouse is put up

onmouseout, execute once when the mouse moves out

onmousetown, execute it once when the mouse is pressed

Onmouseup, execute once when the mouse is released (bounce)

ONMOUSEDBLCLICK, execute once when the mouse double -click

Online, execute once when the object is loaded

The effect of being popular on the Internet before is actually the effect of ROLLVERIMAGES

<img src = "../ Images/stack_heap.jpg"

onmouseover = "This.src = '../Images/Over.jpg'"

onmouseout = "This.src = '../Images/Out.jpg'"/> You may know, string in attributes such as onmouseover will be executed as script at the time of the incident, but the code above is dependent on the code above. Going up is very vague

// In order to make it easy to view, we will extract them down below

this.src = '../images/over.jpg'

This.src = '../Images/Out.jpg' analyzes the code above. We found that this is actually assigning the attribute SRC of a object this, but the problem is that we have not declared an object called this! In fact This object is an object that has always existed. It cannot be declared (this is keywords). Here, this refers to "this", which refers to this label! For the elements in HTML, JavaScript will automatically analyze it into an object. For the IMG tag below, it will be parsed into the following object:

// Note that in fact, this cannot be manually assigned or declared manually. This is just a demonstration

this = {

src: "../ Images/stack_heap.jpg",,

Alt: "Memory Stack",

Onclick: "Alert ('Hello!')",

tagname: "IMG"

};

// In fact, not only these attributes, IMG tags will be parsed as an object, with attributes such as SRC, ALT, SRC, ALT attributes are written in HTML, and tagname is automatically generated by the system. It indicates the label of the label label Name! We can use the following code for testing:

<img src = "../ Images/stack_heap.jpg" onClick = "Alert (this.src); Alert (this.tagname);"/> Nature, we can also modify its value, so the effect of the image flip the image effect of the image Just succeeded

There are some attention to such an in -line event binding.

<head>

Function myfn () {

alert ("The image is loaded!");

}

</script>

</head>

// ................ After several code

<img src = "../ Images/stack_heap.jpg" online = "myfn ()"/// When the image is loaded successfully

The code execution above is okay, but the order is flipped (script can be placed in any legal place)

<img src = "../ Images/stack_heap.jpg" online = "myfn ()"/// When the image is loaded successfully

// ................ After several code

Function myfn () {

alert ("The image is loaded!");

}

</Script> HTML page is loaded and executed in order from top to bottom. When the image is loaded successfully, it will execute the content in ONLOAD (a custom function). When loaded, there will be an error "MyFn IS Undefined"; this is why the Script label is to put the Script part in the head part, because the head in front of the body, when the element in the body is loaded, the script in the head will definitely be loaded.

But then there was XHTML, with "three layers of separation", W3C launched DOM2, we need to bind events in another way, get HTML page elements. Then the image above is an example:

<head>

var IMG = DOCUMENT.GetelementByid ("Myimg"); // We get it through ID

//document.GetelementByid method has a parameter, a string id

// Then IMG means that image label object

img.onClight = MyFn;

/*Do we not give the JavaScript code to its onclick property with the string character value

It is directly assigned to give it a function name

You will also say, why not img.onClick = MyFn ();

Because now it is in the JavaScript code area

Add "()" to indicate this function, and then give the return value of this function to img.onClick*/

Function myfn () {

alert ("The image is loaded!");

}

</script>

</head>

// .......

// We no longer add the onClick attribute, but give it an ID

However, the above code will still make an error, because HTML is loaded from top to bottom. When loading to Script, the body part is not loaded below, and JavaScript will be executed automatically when browsing. The IM's IMG of Myimg has not been loaded yet, so there will be errors; Document.GetelementByid method requires a string form ID, and if there is no ID on the page, it will return NULL (empty object); In the following line, the phrase of img.Onclick uses an empty object, so it will make an error here! As for the solution, in fact, the Script position binding the traditional in -line event in reverse. Put the Script behind the HTML element behind the HTML element. "

// .................... After several code

var IMG = DOCUMENT.GetelementByid ("Myimg");

// At this time, since the position of the Script label is placed in the IMG tag, the IMG tag is definitely loaded when loading to Script

img.onClight = MyFn;

Function myfn () {

alert ("The image is loaded!");

}

</Script> But the standard is still recommended to put the Script on the head part! Then, this will use another event onLoad

Window.Onload = Initall; // Write all code in one function, and then register to the online event attribute of the Window object

// Window represents the window object. As long as the window is opened, it always exists. After the page is loaded, it will trigger the online event on the Window object

function initial () {

var IMG = DOCUMENT.GetelementByid ("Myimg");

img.onClight = MyFn;

Function myfn () {

alert ("The image is loaded!");

}

} So, the code is not wrong. No matter where the script is placed, the initall will only be executed when the page is loaded

Visit html page: HTML DOM

HTML DOM uses the entire page as a Document object. The labels in HTML must be accessed by the Document object. Each label in the document will be converted into an object.

<p ID = "p1"> We use a P tag to demonstrate </p> It will be converted to the following object

// Always remember the object's literal quantity grammar, right?

{{

tagname: "p",

className: "Demo",

title: "The first paragraph: DOM Tree",

ID: "P1",

Innerhtml: "We use a P label to demonstrate"

}

// You may be strange, why the Class attribute of the label becomes the className attribute of the object instead of class.

// Class is JavaScript reserved words !!!

// Tagname represents its label name, and InnerHtml means that the HTML code browse in it converts the HTML label into such an object, and the attributes or content inside the tag in JavaScript are much simpler, but the question is how to access how to access it To this object !!

// First add an ID to the label, and then use the document.GetelementByid method to access it

Window.Onload = initall; // Note that the code to access the html page is placed on the ONLOAD event of Window!

function initial () {

var p = document.GetelementByid ("P1");

Alert (p.classname);

alert (p.tagname);

alert (p.tital);

alert (p.id);

Alert (p.innerhtml);

} Accessing the html page is so simple! After getting an element, you can not only read its attribute value, but also set its attribute value!

Window.onload = initall;

function initial () {

var p = document.GetelementByid ("P1");

p.title = "javascript";

p.classname = "load"; // We can change its style

} Use these, we can already do something exciting!

// Some CSS

.oder {

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"> A large line of text, they are all ordinary text! </p>

// javascript code

Window.onload = initall;

function initial () {

var p = document.GetelementByid ("P1");

p.Onclick = CLICKFN; // The event registration here is less than the parentheses than the way the registration method is registered, and the others are the same

p.onmouseover = Overfn;

p.onMouSeout = OUTFN;

}

Function Clickfn () {

This.className = "Click"; // Here, this is also available

// Note that it is className, not class

}

function overfn () {

this.className = "Over";

}

function outfn () {

this.className = "OUT";

} Of course, obtaining page elements not only this method. Document.GetelementsBytagname method can also obtain page elements, as famous as the meaning, it is to obtain elements through HTML tags, not ID. Because a HTML page, an ID name is the name of the ID name is The only one, and most of the label names are the same, so the GetelementsBytagname method has only one parameter, that is, a tagname in the form of a string, and the return value is a list of HTML elements similar to an array.

Window.Onload = initall; // Still written in the Window.onload event processing function

function initial () {

var Plist = document.GetelementsBytagname ("P");

// Why do you need to use a capital P? A practicable lowercase P, not distinguished, but because the general Tagname of the object is reported, just ...

Alert (Plist.Length); // Similar to the array, how many elements are there to report, how many P tags on the page, how much to report

Alert (Plist [0] .innerhtml); // Use this to access the first P element

} In addition, for the document.GetelementsBytagname method, you can also pass a "*" number as a parameter to obtain all the elements of the page, similar to the passing character in CSS

Window.onload = initall;

function initial () {

var allthings = document.body.GetelementsBytagname ("*");

// You can call the GetelementsBytagname method on any DOM element. When calling this method on the body, the label outside the body will not be obtained

Alert (allthings.length); how many labels are there on the page, how much is reported (including DOCTYPE)

Alert (allthings [3] .innerhtml); // Use this to access the fourth element

} Other-JavaScript: pseudo protocol

The pseudo -protocol is different from the real existence on the Internet, such as http: //, https: //, ftp: //, but for associated applications. Use base64 to output binary files on the browser end), and JavaScript:

We can enter "JavaScript: Alert ('JS!');" In the browsing address bar. "When you turn it to the point, you will find that in fact, the code behind JavaScript: The following code as JavaScript is executed, and the result value is returned to the current page

Similarly, we can use the JavaScript pseudo protocol in the HREF attribute of the A tag

// Click the link on this side. The browser will not jump to any page. Instead, it shows a pop -up window but JavaScript: There is a problem with the pseudo -protocol.

<A href = "javascript: window.prompt ('Input content will replace the current page!', '');"> A </a> solution is very simple

// Add Undefined to the end, although the JavaScript pseudo protocol provides a certain flexibility, but try not to use it on the page! For debugging JavaScript, JavaScript pseudo protocol is very useful!