Back-end Java engineer Common Javascript_dom

Source: Internet
Author: User
Tags tag name


  [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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.