Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about how to understand the nature and operation skills of JavaScript DOM. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Briefly introduce the nature and operation of JavaScript DOM, although some JavaScript frameworks, such as jQuery, Prototype and MooTools, can improve our front-end development efficiency and solve the browser compatibility problem well, but we still need to lay a good foundation of javascript technology.

The essence and Operation method of JavaScript DOM

Although some JavaScript frameworks, such as jQuery, Prototype and MooTools, can improve our front-end development efficiency and solve the problem of browser compatibility, we still need to lay a good foundation for javascript technology. This article introduces the nature of JavaScript and the document object Model (DOM).

Introduction JavaScript

JavsScript is a dynamic, loosely typed (looselytyped), prototype-based programming language that can be used in a variety of environments. In addition to being a popular Web client programming language, it can also be used for IDE plug-ins, PDF files, or even more abstract concepts for other platforms.

JavaScript is a language based on the ECMAScript standard (ECMA-262) created by BrendanEich from Netscape. He was originally named LiveScript, but later changed to JavaScript, which is one of the reasons why many people will confuse it with java. Here is a detailed description of some of its features:

◆ dynamic programming languages are executed at run time; they are not compiled. Because of this, JavaScript is sometimes considered a scripting language rather than a real programming language (obviously a misunderstanding).

◆ loosely typed languages do not require strongly typed systems, and if you use C or Java programming (unlike JavaScript) to declare variables, you will understand that you have to declare something like 'int'. The difference with JavaScript is that you don't have to specify its type.

◆ We use prototypes in JavaScript to achieve similar inheritance effects, and JavaScript does not support classes.

◆ JavaScript is also a functional language that handles functions as priority objects. It is based on the concept under lambda.

Understanding the above concepts is not very relevant to learning the technology of JavaScript. It just gives you a preliminary and correct understanding of JavaScript and the essential difference between JavaScript and other programming languages.

Document object model

Document object Model (DocumentObjectModel), usually referred to as DOM for short, is the interface between website content and JavaScript. Since JavaScript became the most commonly used language, JavaScript and DOM are generally regarded as separate entities. The DOM interface is used to access, traverse, and control HTML and XML documents.

Here are some important things to know about DOM:

The ◆ Window object is a global object, you just need to try to access it using "window". The Window object contains all the JavaScript code you want to execute. Just as all objects contain properties and methods.

The ◆ property is a variable stored under the object. All variables created in the web page become properties of the window object.

The ◆ method is a function stored under the object. When all functions are stored under the window object, you can use 'methods' to reference them.

◆ DOM creates a hierarchy of nodes relative to the Web document structure. There are many different types of DOM nodes, the most important of which are 'Element',' Text', and 'Document'.

The ◆ 'Element' node represents the elements in the page, so if you have a paragraph element on the page ('

), then you can access it through the node of DOM.

The ◆ 'Text' node represents all the text in the page (in the element), so if there is some text content in the paragraph of the page, you can access it through the DOM node.

The ◆ 'Document' node represents the entire document. (it is the root node of the DOM tree)

◆ also note that the element attribute is the DOM node itself.

◆ 's different layout engines have some differences in the implementation of the DOM standard. For example, FireFox browsers that use the Gecko layout engine perform well (but not exactly as per the W3C specification), but IE using the Trident engine is known for its many Bug and incomplete implementation of DOM standards. This is a big pain in the front-end development area.

JavaScript elements in a web page

When you want to use JavaScript on a website, you need to include them in the script element:

As you can see, there are script elements at the bottom of the document. In fact, strictly speaking, the type property should be set to "application/javascript", but it will not work as expected in IE browsers, so we use "text/javascript" or do not use the type attribute. If you are concerned about code W3C specification verification, you are recommended to use the former ("text/javascript").

You will also notice that we also have a pair of commented-out lines in the script element that tell XHTML-enabled browsers that the content in the script element is character data and should not be interpreted as XHTML tags. If you plan to use the''character in your JavaScript code, it is quite necessary. Of course, if you use normal HTML code, you can ignore it.

Defer attribute

The JavaScript code in our script element is executed during page reading, with the exception of * * when the script element has a defer attribute. By default, when the browser encounters a script element, it stops and runs the code before continuing with document parsing. The defer attribute tells the browser that the code contains non-changeable document code and can be executed later. The problem with it is that it is only available under IE, so we should try not to use it, just understand.

Link external script

If you want to connect to an external script file, all you have to do is add a src attribute with the file address to your script element. It's really a good idea to separate script files and make calls as opposed to inline scripts, which means that browsers can cache the file, and you don't have to worry about nonsense like CDATA.

Main points of JavaScript

Before we continue with DOM, it is necessary to learn the basics of JavaScript. If there is something difficult for you to understand, don't worry, you will take care of it sooner or later. In JavaScript, there are different types of values, which are numeric, string, Boolean, object, Undefined, and Null. A single-line comment uses two slashes (/ /), and everything in this line will be understood as the comment content. Multiline comments use'/ * 'and' * /'to complete the comment paragraph.

Numerical value

All values are depicted as floating-point values in JavaScript, so remember not to use quotation marks when defining numeric variables.

/ / Note: always use 'var' to declare variables: varleftSide=100; vartopSide=50;varareaOfRectangle=leftSide*topSide; / / = 5000 string

The string you define is literal, and JavaScript will not deal with it. A string can consist of a series of Unicode characters surrounded by a pair of double or single quotation marks.

VarallOfIt=firstPart+''+secondPart; / / HelloWorldPartners string concatenation processing / / (it can also be used for mathematical addition operations)

Boolean value

Boolean types are useful when you make conditional judgments to see if they meet the specified criteria. Boolean has two possible values: true and false. The result of any comparison using a logical algorithm will be a Boolean.

You can declare a Boolean to a variable: varveryTired=true; / / you can test it like this: if (veryTired) {/ / your code}

The'= = 'seen above is the comparison operator, which we will discuss later.

Function

A function is a special object.

/ / create a new function using the function operation: functionmyFunctionName (arg1,arg2) {/ / here is the function code} / / if you omit the function name, then you create an "anonymous function": function (arg1,arg2) {/ / here is the function code} / / to execute the function simply refer to it and use parentheses (with arguments): myFunctionName () / / No parameter myFunctionName ('foo','bar'); / / with parameter / / you can also execute the function without declaring variables (function () {/ / this is the so-called self-call anonymous function}) ()

Array

An array is also a specialized object that can contain any amount of data. To access the data in an array, you must use numbers to refer to its "index" in the array.

/ / different ways of two naming arrays, / / literally: varfruit= ['apple','lemon','banana']; / / using array constructors: varfruit=newArray (' apple','lemon','banana'); fruit [0]; / / accessing * data items in the array (apple) fruit [1]; / / accessing the second data item (lemon) in the array [2] / / access the third data item (banana) object in the array

An object is a collection of named values (key-value pairs), which is very similar to an array, except that you can specify a name for each data value.

/ / two different ways to declare an object, / / literally (curly braces): varprofile= {name:'Li',age:23,job:'WebDeveloper'}; / / applicable object constructor: varprofile=newObject (); profile.name='Li'; profile.age=23;profile.job='WebDeveloper';if/else statement

The if/else statement, the most common structure in JavaScript, looks like this:

VarlegalDrinkingAge=21;varyourAge=23; if (yourAge > = legalDrinkingAge) {/ / We use 'alert' to notify users: alert (' you can drink water.');} else {alert ('sorry, you can't drink water.');} loop

Loops are useful when traversing all members of data items or objects in an array, and the most common loops in JavaScript are for and while statements.

VarenvatoTutSites= ['NETTUTS','PSDTUTS',' AUDIOTUTS','AETUTS','VECTORTUTS']; / / WHILE loop varcounter=0; varlengthOfArray=envatoTutSites.length; while (counter

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.