A brief summary of DOM knowledge points

A brief summary of DOM knowledge points

DOM (Document Object Model) is the document object model, which is an API for HTML and XML documents.

Node operation

1. DOM nodes are mainly divided into three categories:
element nodes:

<p class = "box">hello word</p>

Attribute node: class = "box";
Text node: hello word;
2. Ways to get element nodes:
document.getElementById(): Search by ID, return unique element node
document.getElementsByTagName(): Search by tag name, return element Node array
document.querySelector(".box"): Get the element node through the selector condition, and only return the first element node that meets the condition.
document.querySelector(".box"): Obtain the element node through the selector condition, and return an array of all eligible element nodes
3. Create an element node: document.creatElement("div"). Create a div tag
4. Mount the node To the dom tree: _.appendchild(div). Mount the div to the parent element, and add a child node at the end of the child node of the target node.
5. Delete the element node: The removeChild method is used to delete a specified node.
6. Get the value of an attribute: target element.getAttribute (element attribute name);
7. The setAttribute method is used to set the value of an attribute, and it will be created without the attribute. Target element.setAttribute (element attribute name, attribute value);
8. insertBefore: Insert a new element node in front of the target element, and the pointer at this time is on the parent of the target element.
9. The replaceChild method is used to replace an element node, and the pointer at this time is on the parent of the target element.

DOM operation position and size

1. clienWidth: actual width: width+padding
2. clientHeight: actual height: height+padding
clientWidth/clientHeight is commonly used to obtain the height and width of a screen: document.body.clientWidth/document.documentElement.clientWidth;
3. offsetWidth: actual Width: width+padding+border
4, offsetHeight: actual height: height+padding+border
5, offsetleft: get the position of an absolutely positioned element relative to the left side of the reference point
6, offsettop: get the position of an absolutely positioned element relative to the upper side of the reference point Position
7, offsetparent: get the reference point of an absolutely positioned element
8, scrollwidth/scrollheight: when there is no content overflow, the height width is width/height+padding, when there is content overflow, the height and width are approximately equal to the true value;
9, scrolltop: Get the height of the vertical scroll bar (available and can be set)
10. Scrollleft: Get the width of the horizontal scroll bar (available and can be set)
Get the height of the real content: document.body.scrollHeight/document.documentElement.scrollHeight
The true height of a web page scrolling up: scrollHeight-clientHeight;

Timer in the DOM

1. One-time timer:

<script>
window.setTimeout(()=>{
     
     
	 
	},1000);
</script>

Indicates that the callback function is executed after 1s, and the timer is closed: clearTimeout();
2. Loop timer

<script>
window.setInterval(()=>{
     
     
	 
	},1000);
</script>

Indicates that the callback function is executed every 1s and the timer is closed: clearInterval();

Event object

<script>
box.onclick=function(e){
     
     
}
</script>

When an event occurs, the browser calls the object and passes an object, which is the event object

Cancel the default event

For the a tag:
1. Use in-line

<a href="javascript:;"></a>

2. Use event objects to block

<script>
	a.onclick=function(e){
     
     
		e.preventDefault();
	}
</script>

3. Return behind the listener

<script>
	a.onclick=function(e){
     
     
		return false;
	}
</script>