Javascript basic knowledge system learning summary DOM

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 class="content">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!

Tags: Attribute Javascript xml Fragment

Posted on Fri, 05 Jun 2020 03:17:10 -0400 by kincet7