1. Get dom node

• Find HTML elements by id
• Find HTML elements by tag name
• Find HTML elements by Class name
• Find HTML elements through CSS selectors

document.getElementById("#demo")            
document.getElementsByTagName("demo")       
document.getElementsByClassName("demo")    
document.querySelectorAll("demo") 

It is recommended to use querySelector to quickly obtain nodes. I like this one myself
var nodeName= document.querySelector('nodeName');

2. Node relationship

parent, child and sibling

parentNode
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling

• nodeName property
• nodeValue property
• nodeType property

NodeList document node list (Collection)
An HTMLCollection is a collection of HTML elements
HTMLCollection and NodeList objects are object lists (collections) of class arrays, and each item can be accessed like an array through an index

The difference between the two:
Access HTMLCollection items by their name, id, or index number
NodeList items can only be accessed through their index numbers
Only NodeList objects can contain attribute nodes and text nodes

3. Change HTML elements

Change the inner HTML of the element
Changing attribute values of HTML elements
Changing attribute values of HTML elements
Change the style of HTML elements

• element.innerHTML = new html content
• element.attribute = new value
• element.setAttribute(attribute, value)
• element.style.property = new style

var body= doucment.body;
var str=`<ul><li>html</li><li>css</li></ul>`;
body.innerHTML=str;

4. Add and delete elements

• Create HTML element
• Create a new HTML element (node)
• Delete HTML element
• Add HTML element
• Replace HTML element
• Write HTML output stream

// Create HTML element
document.createElement(element)	
// Create a new HTML element (node)
 document.createTextNode('') 
 // Delete HTML element    
 document.removeChild(element)	
 // Delete child from parent
parent.removeChild(child);      
// Add HTML element 
document.appendChild(element)	
// Add HTML element
element.insertBefore('main','child')    
// Replace HTML element  
document.replaceChild(element)	
// Write HTML output stream
document.write(text)	

<div id="app"></div >

<script>
		var p = document.createElement('P');
        var span = document.createElement('span');
        span.innerText = 'this is well goods';
        p.appendChild(span);
        app.appendChild(p);
</script>

5. Change the style of HTML elements

Syntax:

document.getElementById(id).style.property = new style

<div id="app"></div >

<script>
		app.style.padding= `10px 20px`;
        app.style.width=`500px`;
        app.style.height=`500px`;
        app.style.backgroundColor="red";
        app.style.margin=`100px auto`;
</script>

6. event

Several common events:

A page or image is loaded and the user exits the page

onload and onunload events

The user changes the contents of the domain

onchange event

The mouse is moved over and away from an element

onmouseover and onmouseout events

The mouse button is pressed, released and clicked

onmousedown, onmouseup, and onclick events

The keyboard key is pressed or held down

onkeydown
onkeypress

Elements gain focus and lose focus

onfocus and onblur events

The submit button is clicked

onsubmit

Listening events

addEventListener
removeEventListener() method

element.addEventListener(event, function, useCapture); event cannot be preceded by on. The default value of usecapture is false, and bubble propagation will be used. If the value is set to true, the event will be propagated by capture;
Cancel listening: element.removeEventListener("mousemove", myFunction);

&&Prevent event bubbling

ie use
e.cancleBubble = true
e.stopPropagation()；

&&Cancel default event:

e.preventDefault()
IE uses e.returnValue = false

<div id="app">
	<!-- Inline binding -->
	<h2 onclick="clickHandler(this)"></h2>
	<!-- Dynamic binding -->
	<div class="demo"></div>
</div >

<script>

		function clickHandler(e){
			console.log('e');
		}

		var demo = document.querySelector('.demo');
		demo.onclick = function(){
			this.style.backgroudColor = "red";
		}
		
		demo.addEventListener("click",function(){
			this.style.backgroudColor = "red";
		});
</script>