js BOM and DOM

1 、 GOOD

2, DOM

---

1 、 GOOD:

BOM (Browser Object Model) refers to the browser object model, which enables js to interact with the browser.

Child objects of window:
location object:

• location.href get url
• location.href = 'url' Jump to the specified page
• location.reload () reloads the page

Pop-up box: warning box, confirmation box, prompt box
warning box:

• alert ("statement");

Confirmation box:

• confirm ("Statement")

Prompt box:

• prompt ("Please enter below", "Your answer")

---

Timing related:

• setTimeout: do one thing after the specified time

• clearTimeout () stops after not specifying the time

• setInterval: how often to do things

• clearInterval () stops

var timer = setTimeout(function(){alert(123);},3000)
//取消setTimeout设置
clearTimeout(timer);

---

2, DOM:

DOM (Document Object Model) document object model, when the web page is loaded, the browser will create the document object model of the page.

The DOM standard stipulates that each component in an HTML document is a node:

• Document node (document object): represents the entire document
• Element node (element object): represents an element (tag)
• Text node (text object): represents the text in the element (label)
• Attribute node (attribute object): represents an attribute, and only elements (tags) have attributes

Find tags:

• document.getElementById gets a label based on ID
• document.getElementsByClassname is obtained according to the class attribute
• document.getElementByTagName gets the tag collection based on the tag name

Indirect search:

parentElement	Parent label element
children	All subtags
firstElementChild	First child tag element
lastElementChild	Last child tag element
nextElementSibling	Next sibling tag element
previousElementSibling	Previous brother label element

event:

onclick	Event handler called when the user clicks on an object
ondblclick	The event handler called when the user double-clicks an object
onfocus	Element gets focus
onblur	The element loses focus. Application scenario: form verification
onchange	The content of the domain is changed. Application scenario: form element (select linkage)
onkeydown	A keyboard key was pressed. Application scenario: the user presses the Enter key in the last input box, and the form is submitted
onkeypress	A keyboard key is pressed and released
onkeyup	A keyboard key is released
onload	One page or one image is loaded
onmousemove	The mouse is moved
onmousedown	The mouse button is pressed
onMouseOut	Move the mouse away from an element
onmouseover	Mouse over an element
unselect	Occurs when the text in the text box is selected
onsubmit	Confirm button is clicked, the object used is form

Binding method (commonly used):

<div id='d1'>点我</div>
<script>
	var divEle = document.getElementById('d1');
	divEle.onclick = function(){
	this.innerText = '哈哈';
}

</script>