Native js get eight ways, event operations

08.17 self-summary

About js

A. Native js get eight ways

• Acquiring the ID (the getElementById)
• By name attribute (the getElementsByName)
• By tag name (getElementsByTagName)
• By class name (getElementsByClassName)
• Obtaining an element (querySelector) by the selector
• Obtaining a set of elements (querySelectorAll) by the selector
• Methods (document.documentElement) acquisition of html
• document.documentElement is designed to obtain this label html
• Methods (document.body) get body of
• document.body body is designed to obtain this label

II. Event handler

Attributes	When the following conditions occur, when this event
Onboart	Image loading is interrupted
onblur	Element loses focus
onchange	The user changes the content of the field
onclick	Click on an object
ondblclick	Double click an object
onerror	An error occurred when loading a document or image
onfocus	Element gets focus
onkeydown	A keyboard key is pressed
onkeypress	A keyboard key is pressed and held down
onkeyup	A keyboard key is released
onload	A page or image is finished loading
onmousedown	A mouse button is pressed
onmousemove	The mouse is moved
onMouseOut	The mouse is moved off an element
onmouseover	The mouse is moved over an element
onmouseup	A mouse button is released
onreset	The reset button is clicked
OnResize	Window or frame is resized
onselect	Text is selected
onsubmit	Submit button is clicked
onunload	User exits the page

III. Usage

1. Obtain a single element

2. Send a single element of the event

3. Replace the contents of the occurrence of the relevant

let inp = document.querySelector('input');

inp.onkeydown = function () {
    console.log('按下')
};

IV. Extract the contents of the elements inside

• innerHTML: get the text including a tag

• innerText: Get the text does not include a label

• val: Gets the value of the form inside

V. supplement knowledge

Get operation to modify child parent tag label

For example, we click on a category to modify the following class b

let xx = document.querySelector('.a');
xx.onclick = function () {
    this.querySelector('.b').innerHTML='点击a了;
};

After querySelectorAll get a set of elements we how to take the contents out

let xx = document.querySelectorAll('.a');
for (let i = 0; i < xx.length; i++){
    console.log(xx[i]);
}