JavaScript ------ Document Object Model (DOM)

JavaScript ------ Document Object Model (DOM)

 

 

 

The Document Object Model (DOM) is a language platform that allows programs and scripts to dynamically access and update document content, structures, and styles. It provides standard HTML and XML object sets, and there is a standard interface to access and operate

For them. It allows programmers to quickly access standard components on HTML or XML pages, such as elements, style sheets, scripts, and so on. Before the DOM standard is released, front-end Web applications must be created

Java Applet, ActiveX, and other complex components are now based on DOM specifications, in the browser environment that supports DOM, web developers can quickly and securely create diverse and powerful Web applications. Here we will only discuss

Html dom.

 

I. DOM Overview 1. The Document Object Model defines a browser for JavaScript operations, describes the logical structure of the document object and the standard interfaces of each functional component. It mainly includes the following aspects:

1) Core JavaScript Language Reference (data types, operators, basic statements, functions, etc)

2) core objects related to data types (String, Array, Math, Date, and other data types)

3) browser objects (Windows, location, history, navigator, etc)

4) document objects (document, images, form, etc)

 

2. Two main object models in JavaScript

1) browser Object Model (BOM)

Provides operation methods for accessing various functional components of the browser, such as the browser window itself and browsing history. (See the previous article)

2) Document Object Model (DOM)

Provides methods to access the content of a browser window, such as documents, images, and other HTML elements, as well as the text contained in these elements.

In earlier browser versions, there was no major difference between the browser object model and the Document Object Model.

 

Ii. Main Functions

It is mainly used to encapsulate a markup document into an object and encapsulate all the content (tags, text, attributes, etc.) in the markup document into an object.

Document: markup document-tags, text, attributes, etc.

Object: encapsulates attributes and methods and can call the attributes and methods in them.

Model: All markup documents have some common characteristics.

 

Iii. Important concepts (main DOM tree) 1. DOM tree model:

DOM parsing will reflect the hierarchy of tags to form a tree structure-DOM tree.

Labels, attributes, and text content are called nodes, and nodes are also called objects. tags are also called elements in pages)
1) core content of DOM technology:

Changes a document to an object tree. operations are performed on the objects in the tree to manipulate the document content.
2) DOM parsing method:

Parse the markup document into a DOM object tree and encapsulate the content in the tree into objects. ---- These actions are done by the browser for us
3) Advantages of DOM parsing:

You can perform any operations on the nodes in the tree: add, delete, modify, and query
4) Disadvantages of DOM parsing:

This resolution requires the entire markup document to be loaded into the memory. Therefore, if the markup document is very memory-consuming.
 

2. DHTML: Dynamic HTML, not a language, is short for multiple technical complexes.

 

Static web pages are made in HTML + CSS mode. To become dynamic, JS and DOM technologies must be added on this basis. Therefore, DHTML includes: HTML + CSS + JS + DOM

3. HTML: Provides tags and encapsulates data. 4. CSS: Provides style attributes and defines data display styles. 5. DOM: encapsulates a tag-type document into an object, for JS to manipulate 6. JS: provides a programming language and uses DOM to manipulate document content and display styles.

 

4. Methods for getting nodes in DOM

Each node has three attributes: node name, node type, and node value.

Node Type: the label node type value is 1, the attribute node type value is 2, and the text node type value is 3

Node value: the label type node is null and has no value. Only attributes and text nodes can have values.

1. getElementById (): Get the object of the node through the node id

 

Function getNodeDemo1 () {// get the node with the id divid1 // var divNode = document. getElementById (divid1); var divNode = document. getElementById (divid2); // alert (divNode. nodeName +, + divNode. nodeType +, + divNode. nodeValue); // obtain the innerHTML innerText attribute var txtHTML = divNode In the div node. innerHTML; var txt = divNode. innerText; alert (txtHTML +, + txt); // modify the text content in the div node // divNode. innerHTML = I changed it to Hunan urban college ....; divNode. innerHTML = I changed it to Hunan urban college ..... fontcolor (red );}

 

 

2. getElementsByName (): Get the node set through the name attribute of the node-Note: it is a set

 

Function getNodeDemo2 () {var node = document. getElementsByName (userName); // alert (node. nodeName); // undefined // alert (node); // It Is a set because it is an array. // alert (node [0]. nodeName); // INPUT // alert (node. length); // 1 // alert (node [0]. nodeType); // 1 alert (node [0]. nodeValue); // the value of a label node is null // alert (node [0]. getAttribute (value ));}

 

 

3. getElementsByTagName (): Get the node set by the label name of the node.

1) obtain all

 

Function getNodeDemo3 () {var nodes = document. getElementsByTagName (a); // alert (nodes. length); // 5 // alert (nodes [0]. innerHTML); // obtain the encapsulated content of the tag container: City homepage // Add the target attribute to all tags on the page // Add the attribute to the object and assign a value to the object, if the property does not exist, add it. If yes, modify for (var x = 0; x
 
  
2) Get
 

All nodes under the tag

 

 

Function getNodeDemo4 () {var divNode = document. getElementById (mylink); var nodes = divNode. getElementsByTagName (a); // only obtain all subnodes under the divNode element for (var x = 0; x
 
  
 
5. How to obtain a node by using the node level
  
 
  
Parent node: parentNode attribute
  
Subnode: childNodes set, firstChild (), lastChild ()
  
Previous sibling node: previussibling attribute
  
Next sibling node: nextSibling attributes
1. Obtain the parent node
  
 
  
var tabNode = document.getElementById(tableid1);var node = tabNode.parentNode;
  

  
 
2. Obtain subnodes
  
 
  
 
  
var nodes = tabNode.childNodes;
  
Note: 1) If there is a carriage return, the later versions of IE and Firefox will be recognized as "blank text" # text, while the earlier versions of IE will be directly crossed.
  
 The same is true for other nodes.
  
 
  
2) In the table,
  
 There is actually a tag-Table body hidden between the tag and the tag.
  
 
3. Obtain the sibling Node
  
 
  
Var node = tabNode. previussibling. previussibling; // The previous sibling alert (node. nodeName); // divvar node = tabNode. nextSibling. nextSibling; // The previous sibling alert (node. nodeName); // dl
  
 
  
 
Vi. Operations in DOM 1. Create text objects
  
 
  
Function createAndAdd1 () {// 1 use createTextNode () to create a Text object var oTextNode = document. createTextNode (new text, great !); // 2 obtain the div object var divNode = document. getElementById (div1); // 3 Add the oTextNode to the divNode. appendChild (oTextNode) of the div object );}
  

  
 
  
 
2. Create a tag object
  
Function createAndAdd2 () {// 1 use createElement () to create a label object var oBtnNode = document. createElement (input); oBtnNode. type = button; oBtnNode. value = new button; // 2 get the div object var divNode = document. getElementById (div1); // 3 Add the oTextNode as the Child divNode of the div object. appendChild (oBtnNode );}
  
3. directly use an attribute in the container tag: innerHTML ----- essentially modifying the "html code" in the tag container is not an operation of the object tree we think.
  
 
  
 
 

Function createAndAdd3 () {var divNode = document. getElementById (div1); // divNode. innerHTML =; DivNode. innerHTML = a hyperlink ;}

 

4. delete a node using removeChild () and removeNode () in the label container object. The former deletes the child node, and the latter deletes itself-not recommended.

 

 

Function deleteNode () {var oDivNode = document. getElementById (div2); // suicide ---- Not recommended // oDivNode. removeNode (); // The default value is false. The child node set is not deleted. // oDivNode. removeNode (true); // true, delete the child node set // delete its child oDivNode through the parent node. parentNode. removeChild (oDivNode );}

 

5. Replace nodes (remove replacement) Use replaceChild () and replaceNode () in the label container object. The former replaces the child nodes, and the latter replaces the child nodes.

 

 

Function updateNode () {var oDivNode = document. getElementById (div2); var oDivNode4 = document. getElementById (div4); // suicide ---- Not recommended // oDivNode. replaceNode (oDivNode4); // use the parent node to replace its child: Use oDivNode4 to replace oDivNodeoDivNode. parentNode. replaceChild (oDivNode4, oDivNode );}

 

6. Replace nodes (Clone and replace)

 

 

Function updateNode2 () {var oDivNode = document. getElementById (div2); var oDivNode4 = document. getElementById (div4); var oDivNode4_2 = oDivNode4.cloneNode (true); // clone an object. The default parameter is false. When the parameter is true, the child node is cloned with the child node. // The child node is replaced by the parent node. oDivNode4_2 is replaced with oDivNodeoDivNode. parentNode. replaceChild (oDivNode4_2, oDivNode );}