# Today's content:
1. JavaScript:
1. ECMAScript:
2. BOM:
3. DOM:
1. Event
## DOM simple learning: in order to meet the requirements of the case
* Function: control the content of the html document
* Code: get the page label object (element ) Object Element
* document.getElementById ("id value"): Get the object of the element by its id
* Operate the Element object:
1. Modify the attribute value:
1. Check which object is obtained?
2. Check the API documentation to find out which attributes can be set
2. Modify the content of the label body:
* Attribute: innerHTML
1. Get the element object
2. Use the innerHTML property to modify the content of the label body
## Simple learning of events
* Function: Some components After certain operations are performed, the execution of certain codes is triggered.
* Sentence: xxx is xxx, I am xxx
* After our crystal was destroyed, I blamed teammates.
* After the enemy crystal was destroyed, I praised myself.
* How to bind the event
1. Specify the attribute (operation) of the event directly on the html tag, the attribute value is the js code
1. Event: onclick --- click event
2. Get the element object through js, specify the event attribute, set A function.
Example: body>
<img id = "light" src = "img / off.gif" onclick = "fun ();">
<img id = "light2" src = "img / off.gif">
<script>
function fun () {
alert ("I was ordered.");
alert ("I was ordered again");
}
function fun2 () {
alert ("咋 老 点 我");
var light2 = document.getElementById ("light2");
// 2. Binding event
light2.onclick = fun2;
</ script>
</ body>
# BOM:
1. Concept: Browsers Object Model Browser Object Model
* Will browse The various components of the browser are encapsulated into browser objects.
2. Composition:
* Window: window object
1. Create
2. Method
1. Methods related to the pop-up box:
alert () displays an alert box with a message and a confirmation button.
confirm () displays a dialog box with a message and confirmation and cancel buttons.
* If the user clicks the confirm button, the method returns true
* If the user clicks the cancel button, the method returns false
prompt () displays a dialog box that provides user input.
* Return value: Get the value entered by the user
2. The method related to opening:
close () close the browser window.
* Whoever calls me, I will turn off.
open () opens a new browser window
* returns a new Window object
3. The timer-related method
setTimeout () calls a function or expression after a specified number of milliseconds.
* Parameter:
1.js code or method object
2. Millisecond value
* Return value: unique identifier, used to cancel the timer
clearTimeout (): cancel the timeout set by the setTimeout () method.
setInterval () calls a function or calculation expression at a specified period (in milliseconds).
clearInterval () cancels the timeout set by setInterval ().
3. Properties:
1. Get other BOM objects
history
location
Navigator
Screen
2. Get DOM object
document
4. Features
* Window objects can be used directly without creating objects. window. Method name ();
* Window reference can be omitted. Method name ();
* Navigator: browser object
* Screen: display screen object
* History: history record object
History: history record object
1. Create (get):
1.window.history
2.history
2. Method:
* back () load the previous URL in the history list
* forward () load the next URL in the history list
* go (parameter)
* parameter :
* Positive number: forward several historical records
* Negative number: backward several historical records
3. Attribute:
* length Returns the number of URLs in the history list of the current window.
* Location: address bar object
1. Create (acquire):
1. window.location
2. location
2. Method:
* reload () Reload the current document. Refresh
3. Properties
* href Set or return the complete URL.
## DOM:
* Concept: Document Object Model Document Object Model
* Encapsulates the various components of markup language documents as objects. You can use these objects to perform CRUD dynamic operations on markup language documents.
* The W3C DOM standard is divided into 3 different parts:
* Core DOM-a standard model for any structured document
* Domcument: Document object:
1. Create (Get ): In the html dom model, you can use the window object to obtain
1. window.document
2. document
2. Methods:
1. Get the Element object:
1. getElementById (): Get the element object according to the id attribute value, the id attribute value is generally unique
2. getElementsByTagName (): Get element objects based on element names. The return value is an array
3. getElementsByClassName (): Get the element objects according to the value of the class attribute, the return value is an array
4. getElementsByName (): Get element objects according to the name attribute value, the return value is an array.
2. Create other DOM objects:
1. createAttribute (name)
2. createComment ()
3. createElement
4. createTextNode ()
3. Attribute
* Element: Element Object
1. Acquire / Create: Obtain and create through document
2. Method:
1. removeAttribute (): delete attribute
2. setAttribute (): set attribute
* Attribute: attribute object
* Text: text object
* Comment: comment object
* Node: node object, other 5 parent objects
* Features: All dom objects can be considered as a node
* Method:
* CRUD dom tree:
* appendChild (): Add a new child node to the end of the node's child node list.
* removeChile (): remove (and return) the specified child node of the current node.
* replaceChild (): Replace a child node with a new node.
* Properties:
* replaceChild (): returns the parent node of the node.
* XML DOM-standard model for XML documents
* HTML DOM- standard model for HTML documents
1. Setting and obtaining of label body: innerHTML
2. Using attributes of html element object
3. Controlling element style
1. Using element style attribute To set up
like:
// Modify style 1
div1.style.border = "1px solid red";
div1.style.width = "200px";
// font-
size- > fontSize div1.style.fontSize = "20px";
2. Define the class selector in advance Style, set the class attribute of the element through the element's className attribute.
## Event monitoring mechanism:
* Concept: After certain components are executed with certain operations, the execution of certain codes is triggered.
* Event: certain operations. For example: click, double-click, keyboard, press, mouse moves
* Event source: component. For example: button text input box ...
* Listener: Code
* Registration monitoring: combine events, event sources, and listeners together. When an event occurs on the time source, it triggers the execution of a listener code.
* Common events:
1. Click event:
1. onclick: click event
2. ondblclick: double click event
2. focus event
1. onblur: lose focus
2. onfocus: The element gets focus.
3. Loading event:
1. onload: A page or an image is loaded.
4. Mouse events:
1. onmousedown mouse button is pressed
2. onmouseup mouse button is released
3. onmousemove mouse is moved
4. onmouseover mouse moves above an element
5. onmouseout mouse moves away from an element
5. keyboard event :
1. onkeydown a keyboard key is pressed
2. obkeyup a keyboard button is released
3. onkeypress a keyboard key is pressed and released
6. selection and change
1. the content of the onchange field is changed
2. onselect Text is selected
7. Form events:
1. onsubmit confirm button is clicked
2. onreset reset button is clicked
06_JavaScript Advanced
Guess you like
Origin www.cnblogs.com/ktfeng/p/12688308.html
Recommended
Ranking