Summary of the systematic learning of Javascript basic knowledge (5) DOM
1, Tree structure
1. The essence of DOM is actually a tree structure generated by html file / language through browser verification, that is, a tree.
2.html can be said to be a specific way of writing XML.
2, Node operations
1. The operation for the node is to query / get the node. It is mainly obtained by ID, class, tag name, etc., as follows:
3, Properties
property and attribute can also be used for DOM node operations.
1.property is to modify the properties of an object through js without affecting the DOM structure:
2.attribute is to modify HTML attributes through js, which will affect DOM structure:
3. both of them may cause the re rendering of DOM structure, but generally it is better to use property.
4, Tree structure operation
Tree structure operations include adding, inserting, deleting nodes, getting the list of child elements and getting the parent elements.
1. Add and insert a node:
2. Delete a node:
3. Get the list of child elements:
4. Get parent element:
5, Performance
The main reason for performance is that it wastes cpu to operate DOM. We can cache the queried DOM and insert the document fragments at one time.
1. Cache DOM query:
2. Use document judgment:
The complete code is as follows:
<!DOCTYPE html> <html> <head> <title>DOM</title> </head> <body> <div id="box"> <p>loyal</p> </div> <script type="text/javascript"> // Get DOM node console.log(document.getElementById('box')) console.log(document.getElementsByClassName('content')) // Get the HTML collection console.log(document.getElementsByTagName('div')) // Get the HTML collection console.log(document.querySelectorAll('p')) // Getting the nodeList collection // property const div1 = document.getElementById('box') div1.style.backgroundColor="red" // attribute const div2 = document.getElementById('box') div2.getAttribute('style') div2.setAttribute('style', 'background-color: blue;') // Create a new node and insert it into the DOM structure const p1 = document.createElement('p') p1.innerHTML="For the Emperor" const div3 = document.getElementById('box') div3.appendChild(p1) //Get list of child elements const div4 = document.getElementById('box') console.log(div4.childNodes) // General acquisition is a collection of all nodes, including text nodes, annotation nodes, element nodes, etc const result = Array.from(div4.childNodes).filter((item) => { // Since we only need the element node as the label, we convert the set to an array if(item.nodeType === 1){ // And call the filter method of the array to filter. If the nodeType attribute of the value in the array is 1, it is the element node return true // Keep it in the results } return false // Otherwise, it will not be put into the result }) console.log(result) // Get parent element const div5 = document.getElementById('box') console.log(div5.parentNode) // Delete node const div6 = document.getElementById('box') console.log(div6.removeChild(result[0])); // Cache the query results of DOM, and then directly use the variable div7 for box operation const div7 = document.getElementById('box') // One time operation (using document fragments) const file = document.createDocumentFragment() // Created a document fragment </script> </body> </html>
OK, the fifth module of javascript is about these contents. I will divide it into 11 modules and finish it in 13 articles or so (some modules will mostly cover the content of the previous and next issues) After learning these modules, I believe you will have a more systematic understanding of the basic js, so come on, I'm O5, see you next time!