The nature and operation method of JavaScript DOM (1)

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

BKJIA recommended reading: reduces the browser's re-parsing JavaScript DOM operation optimization solution

Introduction JavaScript

JavsScript is a dynamic, loosely typed, and prototype programming language that can be used in various environments. In addition to being a popular Web Client programming language, it can also be used by IDE plug-ins, PDF files, or other platforms or even more abstract concepts.

JavaScript is a language based on the ECMAScript standard ECMA-262 created by Netscape Brendan Eich. He was initially named LiveScript but later changed to JavaScript, which is one of the reasons why many people will confuse it with java. The following is a detailed description of some of its features:

◆ Dynamic programming languages are executed at runtime; they are not compiled. For this reason, JavaScript is often considered a scripting language, rather than a real programming language ).

◆ Loose type languages do not require strong type systems. If you declare variables using C or Java programming (different from JavaScript), you will understand that the declaration must be similar to 'int' (integer ). The difference in JavaScript is that you don't need to specify its type.

◆ In JavaScript, we use prototype to achieve similar inheritance effects. JavaScript does not support classes.

◆ JavaScript is also a functional language, and its processing function is a priority object. It is based on the concept of lambda.

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

Document Object Model

Document Object Model (DOM) is an interface for intercommunication between website content and JavaScript. When JavaScript becomes the most common language, JavaScript and DOM are usually considered as independent entities. The DOM interface is used to access, traverse, and control HTML and XML documents.

Below are some important knowledge about DOM:

◆ The Window object is a global object. You only need to use "window" to access it. The Window object contains all your JavaScript code to be executed. Just as all objects contain attributes and methods.

◆ Attributes are variables stored in objects. All the variables created on the web page will become the properties of the window object.

◆ The method is the function stored in the object. When all functions are stored in window objects, you can use 'Methods 'to reference them.

◆ DOM creates a hierarchy with nodes relative to the Web document structure. DOM nodes have many different types, the most important of which are 'element', 'text', and 'document.

◆ The 'element' node indicates the elements on the page. Therefore, if you have a paragraph Element ('<p>') on the page, you can access it through the DOM node.

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

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

◆ Note that the element attribute is the DOM Node itself.

◆ The execution of DOM standards varies with different Layout engines. For example, the FireFox browser that uses the Gecko Layout Engine can perform well (but it is not exactly the same as the W3C Specification ), however, Internet Explorer using the Trident engine is well known for its many bugs and incomplete DOM Standard execution. This is a major pain point in the front-end development field.

JavaScriptScript element in the webpage

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

 
 

  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
  
  
 
  
    
  
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
  
  
      <title>JavaScript!</title>    
  
  
   
  
  <body>    
  
  
     
  
  
    <script type="text/javascript">    
  
  
    // <![CDATA[    
  
  
           
  
  
    // ]]>    
  
  
    </script>    
  
  
           
  
  
  </body>    
  
  
 
 

As you can see, there are script elements below the document. In fact, the type attribute should be set to "application/javascript" strictly, but it cannot work normally in IE as expected, so we use "text/javascript" or do not use the type attribute, we recommend that you use the former ("text/javascript") if you care about W3C code validation ").

You will also notice that there are a pair of commented-out code lines in the script element, which tell the content in the script element of a browser that supports XHTML to be character data and should not be interpreted as XHTML markup. If you plan to use the '<' or '>' character in JavaScript code, it is quite necessary. Of course, if you use common HTML code, you can ignore it.

Defer attributes

The JavaScript code in the script element is executed in the page reading process. The only exception is that when the script element has the defer attribute. By default, when the browser encounters a script element, it stops and runs the code, and then continues to parse the document. The defer attribute tells the browser that the Code contains non-modified document code and can be executed later. The only problem with it is that it is only available under IE, so we should try not to use it. Just understand it.

Link external scripts

If you want to connect to an external script file, you only need to add a src attribute with the file address to your script element. Separating a script file independently for calling is indeed a better way than an inline script. It means that the browser can cache the file and you don't have to worry about CDATA or other nonsense.

 
 

  
  
<script type="text/javascript" src="my-script.js"></script>