当前位置：网站首页>Webapi collation

Address bar object ：
attribute ：
    href： Get or set the address bar address
Method ：
    reload： Refresh （ Reload the current url）
    assign： Load the specified url
    replace： Replace url

history

The object of history ：
attribute ：
   length： Number of page history visited
Method ：
   go： Jump to the specified record （ Parameter is number）
   back： Returns the previous in the history
   forward： Move forward to the next in history

navigator

Browser object ：
attribute ：userAgent This attribute can identify the device system and so on

screen

Screen objects
attribute ：width、height

window

Top-level object ：（ Global object ）
Method ：
   alert、confirm、prompt

Timer ：
     1. How often to wait to call
   window.setInterval( function , Time )==>window.clearInterval（ Timer logo ）
     2. How often is this function called , No more execution after , Recursion can be used to achieve 1
   window.setTimeout( function , Time )==>window.clearTimeout( Timer logo )

DOM

Document object model 、 Operate page elements
Access to the node 、 Add the time 、 Attribute operation 、 Node operation

Access to the node

The first group :
id：document.getElementById('id value ');【 What you get is an element 】
tagName：document.getElementsByTagName(' Tag name ')【 Get multiple , Pseudo array 】
The second group :
Selector gets element ：
document.querySelector(' Selectors ');// Single
document.querySelectorAll(' Selectors ')// Multiple

Node relationship

Father and son ：
   Father .children;( Father .childNodes)
   Father .firstElementChild、 Father .lastElementChild

   Son .parentNode
Brotherhood ：
   element.nextElementSibling、   // Next element brother

   element.previousElemetSibling // The previous element brother

Node properties

nodeType： Node type , Elements ==> 1、 Text ==> 3
nodeName： The name of the node , Elements ==> Capitalized tag names 、 Text node ==> #text
nodeValue： Node values ： Elements ==>null、 Text ： Text content

Add event

on：
   Add event ：element.onclick = function () {}
   Remove events ：element.onclick = null;
Event monitoring ：
   Add event ：element.addEventListener(' Event type ', function () {}, Capture );
   Remove events ：element.removeEventListener(' Event type ', Event handler name （ Function name ）);

Operation node

Element attributes ：
   Get element properties ： Elements . attribute （element.id）
   Set element properties ： Elements . attribute = value ;(element.id = value );
   special ：class==>className、innerText、innerHTML
Style attribute ：
   Set style properties ： Elements .style. attribute = value ;(element.style.width = '200px');
   Be careful ： Don't get what you use for setting 、 Can only get style Inline style , But the general situation is written in css Inside
Form Elements ：
   value attribute ：
       Get content ： Elements .value;(element.value)
       Set contents ： Elements .value = xxx;(element.value = xxx);
   checked attribute ：( Single choice, multiple choice )
       obtain ： Elements .checked;( Boolean value )
       Set up ： Elements .checked = true/fasle;
   disabled attribute ：
       obtain ： Elements .disabled;
       Set up ： Elements .disabled = Boolean value ;
   selected attribute ：( The drop-down menu )
       obtain ： Elements .selected;
       Set up ： Elements .selected = Boolean value
Custom properties ：data-*
   H5: Elements .dataset.xxx
   obtain ： Elements .getAttribute( Property name );
   Set up ： Elements .setAttribute( Property name , value );
   remove ： Elements .removeAttribute( Property name );

Node method

Create elements ：
The first one is ：element.innerHTML = "<div> Content </div>"
The second kind ：document.createElement(' Tag name ');
Additional elements ： Father .appendChild( Son );
Remove elements ： Father .removeChild( Son );
Insert elements ： Father .inserBefore( new , used ); The new node is inserted in front of the old node
Replacement elements ： Father .replaceChild( new , used ) The new node replaces the old node
Clone elements ：element.cloneNode( Boolean value );

event

There are a lot of events 、 Different trigger mechanisms

Event type

Mouse events ：
   click： Click event 、 Click events
   dblclick： Double-click the event
   mouseenter： Mouse over （mouseover）
   mouseleave： Mouse away （mouseout）
   mousemove： Mouse movement events
   mousedown： The mouse click
   mouseup： The mouse is raised
   drapover： Drag and drop
   drop： Release
Form Events ：
   focus： Focus of attention
   blur： Lose focus
   input： Input event
   change： Change events
   submit： Submit the incident
Keyboard events ：
   keydown： Press the keyboard
   keyup： The keyboard is released
   keypress： Keyboard input press
Loading event ：
   load、scroll、resize、beforeunload、DOMContentload

Flow of events

The three stages of an event when it is triggered 、 Capture 、 The goal is 、 Bubbling
Bubbling ： After event triggering , Start with the target element 、 Event types will bubble up in turn 、 until document until

Event object

The object generated after the event is triggered ：
Event source .addEventListener('click', function (e) {e})
Mouse position ：
   e.clientX、e.clientY
   e.pageX、e.pageY
   e.offsetX、e.offsetY
Keyboard information ：
   e.keyCode： Key value
   e.altKey: alt key
Event object properties ：
   e.target
Event object method ：
   e.stopPropagation（）
   e.preventDefault()

Event delegation

Register the events of the child element with the parent element 、 Delegate to the parent element
1、 Register events for the parent element of the descendant element
2、 adopt e.target Get the first triggered element
3、 adopt e.NodeName Check whether it is the element we need
principle ： The core principle is to bubble because of events 、 The main point is target

Element size position

offset series ：offsetWidth、offsetHeight、offsetLeft、offsetTop
client series ：clientWidth、clientHeight
scroll series ：scrollTop
getBoundingClientRect： Get the element position size

function

Definition of function ：
   Name the function ：function () {}
   Anonymous functions ：
       Self calling function ：(function () {})()
       Expression function ：let fn = function () {}
Function call ：
   Function encountered （） Just execute the function ();
recursive ：
   Call the function inside the function
   function fn () { fn() }fn();
   Be careful ： Recursion should have an exit point

Time object

Instantiation ：
   new Date();
   new Date('1999-9-9 6:6:6');
   new Date(1999, 9, 9, 6, 6, 6);
   new Date(12341232532);

Method ：
   getFullYear() Get year
   getMonth() Get month
   getDate() Get date
   getHours() For hours
   getMinutes() Get minutes
   getSeconds() Get seconds
   getMilliSeconds() Get milliseconds
   getDay() Get week
   getTime() Get the timestamp Data.now()
   Above get Change it to set、 Is set
   Be careful ：getDay Can not be set、

Class name operation

class：
   obtain ： Elements .className
   Set up ： Elements .className = value ;
classList：
   Add the class ： Elements .classList.add( Class name );
   Delete class ： Elements .classList.remove( Class name );
   Switch classes ： Elements .classList.toggle( Class name );
   Find the class ： Elements .classList.contans( Class name );

Regular

Match string
establish ：
   let reg = / Content /;
test ：
   reg.test(str)、reg.exec(str);

Metacharacters ：
   Border character ：^、$
   Character set ：[a-z]
   Quantifier sign ：*,+,?,{n},{n,},{n,m}
   Predefined classes ：\d,\w,\s
   All characters ：. except \n
   Escape character ：\.
   Modifier ：igm

原网站

版权声明
本文为[Blue lover]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/207/202207260603163351.html