Javascript DOM Programming Art reading notes 16/03/26

Updated on 2016-03-27 01:14:15

Standard template induction for peripheral JavaScript file operations

JavaScript does not require events to be processed in an HTML document, you can add an event to an element of HTML in an external JavaScript file

Element.event = Atciotn

The key is how to determine this element, the problem is similar to CSS, you can use class or ID

If you add an event to an element that determines the ID, you can use getElementById ()

document.getElementById ("id"). event = Action

If the event involves more than one element, you can use the Getelementbytagname () and GetAttribute () methods to add events to a set of elements of a specific property

Take the onclick event and the popup () function as an example to implement the specific a element in HTML and then pop up a small window after clicking

First define the popup ():

function PopUp (winurl) {

window.open (Winurl, "popup", "width=100,height=100");

}

1. Put all the link elements (a) in the document into the array
2. Iterating over array elements
3. If a LINK element's class= "popup", the description needs to be clicked when the popup () is called

3, take a look at two.

• Pass the href of this link element to the popup () function
• Cancel the default behavior of this link, do not take this link visitor to the new window

Code

var links = document.getElementsByTagName ("a");

for (Var i=0;i<links.length;i++) {

if (Links[i].getattribute ("class") = = = "Popup") {

Links[i].onclick = function () {

PopUp (This.getattribute ("href"));

　　　　　　return false;

}

}

}

But the above code is a certain problem and will not be run

First line:

var links = var Document.getelementsbytayname ("a");

This is immediately run when the Javasript file is loaded, the English word JavaScript file is called from the <script> tag of the

You must load all the HTML documents into the browser to perform

When all HTML documents are loaded into the browser, a time is triggered, and the event has the onload handler function

When HTML is loaded into the browser, the Document object is also a property of the Window object, and the document already exists when the window object triggers the OnLoad event

So when performing the above event, you can add window.onload = Preparelinksbefore; Package The above functions in the Preparelinks () function

Summarize:

JSP function triggered dynamically, by adding functions to the event handler to implement the real-time control of the Web page

In fact, it is possible to judge that an HTML document object is manipulated in that almost all operations are

Window.onload = function{

Func1 ();

Fun2 ();

.....

}

With the full DOM in order to have the document object, we get the element object that seems to be available only through document.xxx

Backwards compatibility

Object detection

Browser may shut down the Javaspript, the browser does not support the function of the JSP does not pass

To get to the built-in function, you need to determine whether the function is browser-supported

function MyFunc () {

if (!document.getelementsbytagname ()) return; //If the OnClick trigger does not want to take the user to a new window, it should return false; so depending on the situation

...

}

Javascript DOM Programming Art reading notes 16/03/26