Javascript
[1] Event
① The interactive behavior that occurs when a user operates a Web page or a browser is called an event. For example: Click the button, minimize the window, modify the text box content and so on.
②JS defines events in many browsers for us. For example: Click (onclick), double-click (ondblclick), Move (onmousemove), and so on.
③ we can respond to an event by setting a response function for the event:
1<body>2<button id= "Btn" > Buttons </button>3</body>4 5<script type= "Text/javascript" >6 //gets the object to the button7 varBTN = document.getElementById ("btn");8 //bind a Click response function for BTN9Btn.onclick =function(){TenAlert ("Hello world!"); One }; A</script> -
[2] Loading mode
The ① browser loads the page code from top to bottom.
② If we have not yet loaded the elements in the Web page in the browser, then we will not be able to determine, the console will be error, there are two ways to solve the problem:
1) write the JS code to the bottom of the body tag. But we are accustomed to writing JS, CSS and other code in the head tag. This form does not conform to the usage habit.
2) write the JS code into window.onload = function () {}. Recommended way to use. (PS: When writing JS code, it is best to start with window.onload = function () {}).
[3] DOM Programming
Dom Full name: Document Object Model.
Dom mainly uses JavaScript to control the various elements in the Web page, so as to make the Web page can interact with the user dynamic interaction.
Dom operations are mainly divided into four parts of the increase, deletion, change, check.
Node Type:
-Element node
-Text node
-Attribute Node
①dom Query
1) Query by Document object:
document.getElementById (ID); ---> Gets an Element node object by ID.
document.getElementsByTagName (standard signature); ---> Gets a set of element node objects by tag name.
Document.getelementsbyname (name attribute); ---> Gets a set of element node objects through the Name property, which is typically used to get form items.
2) through the specific element object query:
element.getelementsbytagname (standard signature); ---> Find child nodes of the specified tag name within the current element node
Element.childnodes; ---> Gets all the child nodes of the current node.
Element.parentnode; ---> Gets the parent node of the current node.
3) Gets the attributes of the element:
Get: element. Property name
Settings: element. property name = attribute value;
4) This:
This points to the owning object of the current function.
Dom Changes and additions:
1) Create element node: document.createelement (sign);
2) Create text node: document.createTextNode (text value);
3) Add child node: parent node. appendchild (child node);
4) Insert node: parent node. insertbefore (new node, old node);
5) Replace node: parent node. replacechild (new node, old node);
6) Delete node: parent node. removechild (child node); /child node. Parentnode.removechild (Child node) * * * * *
7) Read and write elements inside HTML code
READ: element. InnerHTML
Settings: element. InnerHTML = new Value
Back-end Java engineer Common Javascript_dom
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
