Web APIs (get element event basic operation element)

API（ Application programming interface ）

It's some Predefine Function of , The purpose is to provide the ability for applications and developers to access a set of routines based on certain software or hardware , and also No need to access the source code , Or understand the details of the internal working mechanism

Simple understanding ： A tool for programmers , In order to realize a certain function

Web API

It's a set provided by the browser Operating browser functions and Page elements Of API（BOM and DOM）

API and Web API summary

1. API It is a Interface , Help us To achieve a function , Just use it , No need to tangle inside How to achieve
2. Web API Mainly for browser Provided Interface , Mainly for browser do Interaction effect
3. Web API Generally there are Input and Output （ Function parameters and return values ）,Web API A lot of them are methods （ function ）

DOM（ Document object model ） Extensible markup language （HTML or XML） Standard programming interface

W3C A series has been defined DOM Interface , adopt DOM Interface Sure Change the content of the page 、 Structure and pattern

DOM Trees

• file ： A page is a document ,DOM of use document Express
• Elements ： All tags in the page are elements ,DOM Use in element Express
• node ： Everything in a web page is a node （ label 、 attribute 、 Text 、 notes ）,DOM Use in node Express

Be careful ：DOM Think of all the above as objects

Get element method

according to ID obtain

Use getElementByld（） Method can get the ID The element object of

1. Because the document page loads from top to bottom , So we need to Label first , And then script The label is written at the bottom of the label
2. get intend get element Elements by adopt Hump nomenclature
3. Parameters id yes Case sensitive Of character string
4. Back to a Element object
5. console.dir（） Print the element object we return , Better view the properties and methods inside

Get... According to the tag name

Use getElementsByTagName（） Method can return a with the specified tag name A collection of objects

1. The return is , Get it A collection of element objects , With Pseudo array Form storage of
2. Want to print the objects in turn , Take the form of traversal
3. If there is only one page li The return is still in the form of pseudo array
4. If there is no such element in the page , Returns an empty pseudo array

Be careful ：

1. Because what you get is a collection of objects , All the elements we want to operate inside need to be traversed
2. obtain Element objects are dynamic     It means that the content inside changes ,js Will follow to change dynamically 、

You can also get an element （ Parent element ） All internal child elements with specified tag names

element.getElementsByTagName（' Tag name '）

Be careful ：

Parent element must be Single object （ You must specify which element object ） The parent element itself is not included in the acquisition

adopt H5 Add a new method to get

1. document.getElementsByClassName（‘ Class name ’）   //  Returns the collection of element objects according to the class name 

2. document.querySelector（‘ Selectors ’）       //  Returns the first element object... Based on the specified selector 

   Be careful ： Bear in mind , The selector inside needs to be signed

3. document.querySelectorAll（‘ Selectors  ’）   //  Returns a collection of all objects of the specified element 

obtain body Elements

document.body

obtain html Elements

document.documentElement        

The basis of the event

JS It gives us the ability to create dynamic pages , Event is Can be JS To detect To the behavior

Simple understanding ： Trigger -- Response mechanism

Every element of the web page Can produce some JS event   For example, when a user clicks a button to execute an event to perform certain operations

Three elements of the event

• Event source

The event is triggered by

• Event type

How to trigger , What event , For example, mouse click （onclick）, Or mouse over , Or press the keyboard

• Event handler

Complete by function assignment

Steps to execute the event

1. Get the event source
2. Registration events （ The binding event ）
3. Add event handler （ Take the form of function assignment ）

Operational elements

JS Of DOM The operation can change the content of the web page 、 Structure and pattern , You can use DOM Operate the element to change the content attributes in the element

• Change element content

element.innerText                Elements can also be added without events

Don't recognize Html label , Nonstandard , Content from start to end , Remove HTML label , At the same time, spaces and line breaks will be removed

element.innerHTML

Can identify Html label ,W3C standard , Everything from the start position to the end position , Include Html label , Keep spaces and wrap

• Attribute operation of common elements

Ideas ： Get the elements that need action , The binding event , Change its properties （ Elements . attribute = ‘xxx’）

• Attribute operations of form elements

utilize DOM You can manipulate the attributes of the following form elements ：

type,value,checked,selected,disabled（ Ban ）  eg ： btn.disabled = true amount to this.disabled = true           this It points to the caller of the event function

• Style property operation

Can pass JS Modify element size 、 Color 、 Location

element . style A property of                     Inline style operation

There are few styles , Use when the function is simple

Be careful ：

JS The style inside adopts the hump naming method     such as ：fontSize、backgroundColor

JS modify style Style operation , What's produced is the in line style , css High weight

element . className    A property of         Class name style operation         Change the class name of the current element

Suitable for many styles , Complex functions

Be careful ：

 class Because it's a reserved word , Therefore use className To manipulate the element class name attribute

className Will directly change the element class name , Will override the original class name

If you want to keep the original class name , It can be used this . className = ‘ Original class name New class name ’ Equivalent to multiple class names