In-depth interpretation of BOM and DOM in JavaScript (1)

BKJIA has previously reported a summary of JavaScript usage experience: starting with BOM and DOM, this article mainly introduces the basic concepts of the two, and this article applies many examples, to interpret BOM and DOM in JavaScript.

BOM defines interfaces for various functional components of a browser that can be operated by JavaScript, and provides interfaces for accessing various functional components of a document, such as Windows, screen functional components, and Viewing History) methods and operation methods.

Unfortunately, BOM is only part of the implementation of JavaScript scripts, and there are no relevant standards. Each browser has its own BOM implementation, this is the weakness of BOM. Generally, browser-specific JavaScript extensions are regarded as part of BOM, including:

◆ Close and move the browser and adjust the browser window size;
◆ A new browser window is displayed;
◆ Positioning objects with detailed browser information;
◆ Provides positioning objects for detailed document information loaded into the browser window;
◆ Provides screen objects with detailed information about the user's screen resolution;
◆ Provide support for cookies;
◆ Add the extended BOM of the ActiveXObject class and instantiate the ActiveX object through JavaScript.

BOM has some de facto standards, such as window objects and navigation objects. However, each browser defines or extends attributes and methods for these objects. Document Object Model, which is a standard, developed by the famous w3c. Currently, the highest level is level 3, but level 3 has not been completely completed yet.

Currently, all mainstream browsers can support level 2. For html, that is, html4.x, the highest value is 4.01, later, w3c moved html closer to xml, so it had xhtml1.0. Later, w3c wanted to create xhtml2.0, and the results were slow. In addition, the major manufacturers were not optimistic, so we have html5.0.

1. Create a node

 
 

  
  
createElement():   
  
  
var a  = document.createElement(“p”);  
 
 

It creates an element node. Therefore, if nodeType is equal to 1, a. nodeName returns p.

Note: The new element node created by the createElement () method will not be automatically added to the document. Since it is not added to the document, it indicates that it is still in a free state. Therefore, it does not have the nodeParent attribute. If you want to add it to the document, you can use the appendChild (), insertBefore (), or replaceChild () methods. Of course, in the previous example, we wrote an insertAfter () method, for example:

 
 

  
  
var a  = document.createElement(“p”);   
  
  
document.body.appendChild(a);  
 
 

Note: appendChild () is added to the end of the document by default. That is, the lastChild subnode. If you want to add it to a certain place, you can use insertBefore (). If you want to add attributes to an element before it is inserted. You can do this:

 
 

  
  
var a  = document.createElement(“p”);   
  
  
a.setAttribute(“title”,”my demo”);   
  
  
document.body.appendChild(a);   
  
  
createTextNode():   
  
  
var b = document.createTextNode(“my demo”);  
 
 

It creates a text node, so nodeType is equal to 3. B. nodeName will return # text; like createElement (), nodes created with createTextNode () will not be automatically added to the document. You must use the appendChild (), insertBefore (), or replaceChild () methods. It is often used with createElement (). Do you know why? One element node and one text node .)

 
 

  
  
var mes = document.createTextNode(“hello world”);   
  
  
var container = document.createElement(“p”);   
  
  
container.appendChild(mes);   
  
  
document.body.appendChild(container);  
 
 

2. Copy a node

CloneNode (boolean ):

 
 

  
  
Var mes = document. createTextNode ("hello world ");
  
  
Var container = document. createElement ("p ");
  
  
Container. appendChild (mes );
  
  
Document. body. appendChild (container );
  
  
Var newpara = container. cloneNode (true); // difference between true and false
  
  
Document. body. appendChild (newpara );
 
 

Note:
 
◆ True: <p> aaaa </p> clone.
◆ False: Only <p> </p> is cloned, and the text in it is not cloned.
◆ You can write an example by yourself and use firebug to check it out.

The new node after cloning will not be automatically inserted into the document like createTextNode. AppendChild () is required. Note: If the id is the same after cloning, do not forget to use setAttribute ("id", "another_id"); change the ID of the new node.