What is DOM?

DOM is a W3C standard, full name Document Object Model, translated as Document Object Model. DOM defines the methods needed to represent and modify a document. DOM objects, or host objects, are a collection of objects defined by the browser vendor for manipulating HTML and XML functionality. Some say DOM is the standard programming interface for HTML and XML.

Basic DOM operations

For objects and arrays, our basic operations are add, delete, change, check, and insert, and the same is true for DOM.

increase

There are three basic additions to DOM:

1. document.createElement();
2. // This method is to create an element node, that is, the tag, but the generated tag in js, will not be generated in the page, we usually use more, suggestion focus on master.
3. document.createTextNode();// Create a text node
4. document.createComment();// Create a comment node
5. //DOM increment usually goes with insert
Copy the code

delete

There are two types of DOM deletions: murder and suicide.

1.Parent.removechild (tag to be removed);2. // It is equivalent to the murder of the child by the father, but can actually be equivalent to cutting, the deleted value is retained
3. ep:
4. var div = document.getElementsbyTagName('div') [0];// Get the div tag
5. var span = document.getElementsbyTagName('span') [0];
6. var strong = document.createElement('strong');// Create the strong tag
7. var i = document.creatElement('i');
8. div.insertBefore(strong,span);// insert strong before span
9. div.insertBefore(i,strong);
10. div.removeChild(i);  / / delete the I
11. < I > < I >
12. child.remove();
13. // It can be understood that a person does not want to exist and then obliterates his own existence, i.e. commits suicide
14. strong.remove();//strong self-delete
Copy the code

Modify the

In the DOM, modification is replacement

1. parentNode.replaceChild(new, origin);2. // Replace the old with the new, the old will be cut out
Copy the code

insert

DOM insertions are going to be used a lot, so be sure to master them! There are two methods:

1.AppendChild (tag name);2. // The clipping operation, by which we can insert a created label into another label, can be understood as.push
3.Ep:4. var div = document.getElementsbyTagName('div') [0];// Get the div tag
5. var span = document.getElementsbyTagName('span') [0];
6. var strong = document.createElement('strong');// Create the strong tag
7. var i = document.creatElement('i');
8. div.appendChild(span);// Put the span inside the div
9. 
10. insertBefore(a,b);
11. Insert a before b; insert a before b;
12. div.insertBefore(strong,span);// Insert strong before span
13.The result should be:14. <div>
15. <strong> <strong>
16. <span> <span>
17. <div>
Copy the code

The query

DOM query should be our focus object, the method is as follows:

1. document.getElementById();
2. // Select the element by the id tag. Note that the selected element is a single element
3. document.getelementsByTagName();
4. // Select a set of elements by label name
5.Such as:6. var div = document.getElementsByTagName('div') [0];
7. // We select the first div tag
8. document.getElementsByClassName();
9. // Select by class name, but IE8 and below are not compatible
10. document.getElementsName();
11. // Only applies to some tags (form, form element, img, iframe), not supported by IE
12. document.querySelector();// Only one CSS selector can be selected. IE7 and below do not have this method
13. document.querySelectorAll();// The same CSS selector can select a group, IE7 and below does not have this method.
14. // Note that the last two methods have another disadvantage: the selected elements are not real-time.
Copy the code

Basic concepts of DOM nodes

According to the W3C DOM standard, all content in a document is a node, which is the smallest component of the DOM. The browser parses the document into a series of nodes based on the DOM model. Because all nodes ultimately inherit from the Node Node class, DOM nodes can also be called Node nodes.

Dom node type

The types of DOM nodes are:

1.Element nodes1
2.An attribute node2
3.Text node3
4.Comment node8
5. Document								        9
6. DocumentFragment   				                                11   // Document fragments
Copy the code

Basic properties of the DOM

There are four common ones, and we’re going to go through them today

Basic attributes of DOM nodes:

1.nodeName			// Label name, uppercase, read-only
2.nodeValue			// Only text and comment nodes are available, which can be read and written
3.nodeType		        // Node type, read-only, which returns relative values
4.attributes			// Attributes of a collection of Element nodes
// We can change the value of the corresponding attribute through this attribute, but we can not change the name of the attribute, but we usually do not use this method, we usually use getAttribute and setAttribute
Copy the code

Here, we also introduce a method to see if this node has children.

hasChildNodes(); // The return value is true or false.

Some properties and methods of the Element node

Two attributes of the Element node:

1. innerHTML();// Change the contents of the HTML
2.If we wanted to change the value of a div tag, the code would look like this:3. div.innerHTML = "";
4. // Put the content you want to change in ""
5. innerTEXT();// You can retrieve the text content of the label directly, or you can assign the value
6. // This property is not compatible with Firefox, but textConent can be used (old IE is not available)
Copy the code

Two methods on the Element node:

1. getAttribute();If we want to set an inter-line attribute for div, we can use this method: div.getAttribute(' class ', 'demo');
2. setAttribute();// Take the value of the interline attribute
Copy the code
1.In development we can use the getAttribute() method to get the value of data-log.2. // If we want to retrieve a's data-log
3. <div>
4. <a href = "#" data-log = "0"> Click on me <a>5. <div>
6. js:
7. var div = document.getElementsByTagName('div') [0];
8. var a = document.getElementsByTagName('a') [0];
9. a.onclink = function() {
10. console.log(this.getAttribute('data-log'));
11. } 
Copy the code

Non-method operations on the DOM

We can also query nodes through some non-method operations

Number of nodes to traverse

1.ParentNode;// There is only one parent node. Traversing the number of nodes, the uppermost parentNode is #document
ep:strong.parentNode;

2.childNodes;// The child nodes
ep:div.childNodes;

3.firstChild;// First child node
ep:div.firstChild;

4.lastChild;// The last child node
ep:div.lastChild;

5.nextSibling;// Next sibling node
ep:span.nextSibling;

6.previousSibling;// Last sibling node
ep:span.previousSibling;
Copy the code

Traversal based on element node tree

1.parentElement;// Returns the parent node of the current element
	ep:div.parentElement;
2.children;// Element child node
3.firstElementChild;// The first element node
4.lastElementChild;// The last element node
5.nextElementSibling;// Returns the next sibling element node
6.PreviousElementsibling;// Returns the previous sibling element node

// IE9 and below are incompatible except for children
Copy the code